jQuery
-
[jQuery] 16. CSS Classes - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:22
jQuery - Get and Set CSS Classes jQuery에서, CSS 요소를 조작하는 것은 쉽습니다. 1. jQuery Manipulating CSS jQuery는 CSS 조작을 위해서 몇 가지 메소드를 가지고 있습니다. - addClass() - removeClass() - toggleClass() - css() 2. Example Stylesheet 아래 나오는 스타일시트는 이번 페이지의 모든 예제에 사용될 것 입니다. 12345678.important { font-weight: bold; font-size: xx-large;}.blue { color: blue;}cs 3. jQuery addClass() Method 아래 예제는 다른 요소에 class 속성을 추가하는 방법을 보여줍니다..
-
[jQuery] 15. Remove - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:22
jQuery - Remove Elements 1. Remove Elements/Content 요소와 내용을 삭제하기 위한, 2 개의 jQuery 메소드가 있습니다: - remove() - empty() 2. jQuery remove() Method remove() 메소드는 선택된 요소와 그의 자식 요소들까지 제거합니다. 12345678910111213141516171819202122232425262728$(document).ready(function(){$("button").click(function(){$("#div1").remove();});}); This is some text in the div.This is a paragraph in the div.This is another paragraph ..
-
[jQuery] 14. Add - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:21
jQuery - Add Elements 1. Add New HTML Content 새로운 내용을 추가하는데 사용되는 4 가지 jQuery 메소드를 살펴볼 것입니다: - append() - prepend() - after() - before() 2. jQuery append() Method append() 메소드는 선택된 HTML 요소의 맨 끝에 내용을 추가하는 메소드입니다. 12 $("p").append("Some appended text.");cs 3. jQuery prepend() Method prepend() 메소드는 선택된 HTML 요소의 맨 처음에 내용을 추가하는 메소드입니다. 12 $("p").prepend("Some prepended text.");cs 4. Add Several New El..
-
[jQuery] 13. Set - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:20
jQuery - Set Content and Attributes 1. Set Content - text(), html(), and val() get과 마찬가지로 3 가지 메소드를 이용하여 설정합니다: - text() - html() - val() 123456789101112131415161718192021222324252627282930313233 $(document).ready(function(){$("#btn1").click(function(){$("#test1").text("Hello world!");});$("#btn2").click(function(){$("#test2").html("Hello world!");});$("#btn3").click(function(){$("#test3").val("..
-
[jQuery] 12. Get - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:20
jQuery - Get Content and Attributes jQuery는 HTML 요소와 속성을 변경하거나 조작하는 강력한 메소드를 가지고 있습니다. 1. jQuery DOM Manipulation jQuery의 가장 중요한 부분은 DOM을 조작하는 가능성입니다. jQuery는 DOM 관련 메소드의 다양한 종류로, 요소나 속성을 조작하거나 접근하는데 용이합니다. 2. Get Content - text(), html(), and val() 3 가지 간편하면서도 유용한 DOM 조작을 위한 jQuery 메소드: - text() - 선택된 요소의 텍스트 내용을 설정하거나 반환하는 메소드 - html() - 선택된 요소의 내용을 설정하거나 반환하는 메소드 - val() - 서식 필드의 값을 설정하거나 반환하..
-
[jQuery] 11. Chaining - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:19
jQuery - Chaining jQuery에서 액션 / 메소드를 함께 연결할 수 있습니다. 연결하기(Chaining)은 한 문장에 여러 jQuery 메소드를 실행 시키는 것을 허용합니다. 1. jQuery Method Chaining 액션을 연결하기 위해, 간단히 이전의 액션에 다음 액션을 덪붙이기만 하면 됩니다. 12345678910111213141516171819202122 $(document).ready(function(){$("button").click(function(){$("#p1").css("color", "red").slideUp(2000).slideDown(2000);});}); jQuery is fun!! Click me Colored by Color Scriptercs 여러 메소드를..
-
[jQuery] 10. Call back - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:18
jQuery Callback Functions callback 함수는 현재 효과가 100% 끝나고 난 후 실행되는 함수 입니다. 1. jQuery Callback Functions 자바스크립트 문은 라인 별로 실행되어 집니다. 그러나, 이러한 효과는 아직 끝나지 않았는데도, 다음 라인의 코드를 실행할 수도 있습니다. 에러를 유발합니다. 이러한 것을 방지하기 위해, callback 함수를 만듭니다. callback 함수는 현재 효과가 끝난 뒤 실행됩니다. 예제: 123456789101112131415161718192021222324 $(document).ready(function(){$("button").click(function(){$("p").hide("slow", function(){alert("Th..
-
[jQuery] 9. Stop Animation - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:17
jQuery Stop Animations 1. jQuery stop() Method stop() 메소드는 애니메이션이나 효과가 끝나기 전에 정지하게 합니다. stop() 메소드는 모든 jQuery 효과 함수에 적용가능 합니다. 문법:$(selector).stop(stopAll,goToEnd); 12345678910111213141516171819202122232425262728293031323334353637383940414243 $(document).ready(function(){$("#flip").click(function(){$("#panel").slideDown(5000);});$("#stop").click(function(){$("#panel").stop();});}); #panel, #flip..