Web/jQuery
-
[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..
-
[jQuery] 8. 애니메이션(Animation) - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:17
jQuery Effects - Animation jQuery animate() 메소드는 자신만의 애니메이션을 만들 수 있게 해줍니다. 1. jQuery Animations - The animate() Method 문법:$(selector).animate({params},speed,callback); 요구되는 params 매개변수는 애니메이션을 적용할 CSS 속성입니다. 예제: 123456789101112131415161718192021222324 $(document).ready(function(){$("button").click(function(){$("div").animate({left: '250px'});});}); Start Animation By default, all HTML elements h..
-
[jQuery] 7. Sliding - jQuery 강좌Web/jQuery 2015. 6. 13. 11:16
jQuery Effects - Sliding 1. jQuery Sliding Methods jQuery로 요소에 sliding 효과를 만들 수 있습니다: - slideDown() - slideUp() - slideToggle() 2. jQuery slideDown() Method slideDown() 메소드는 요소를 slide down을 줍니다. 문법:$(selector).slideDown(speed,callback); 예제: 1234 $("#flip").click(function(){ $("#panel").slideDown();});cs 3. jQuery slideUp() Method slideUp() 메소드는 요소를 slide up을 해줍니다. 문법:$(selector).slideUp(speed,ca..