Web
-
[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..
-
[jQuery] 6. Fading - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:15
jQuery Effects - Fading 1. jQuery Fading Methods jQuery에서 요소의 가시성을 나타내게 하거나 사라지게 할 수 있습니다: - fadeIn() - fadeOut() - fadeToggle() - fadeTo() 2. jQuery fadeIn() Method fadeIn() 메소드는 사라진 요소를 희미하게 나타냅니다. 문법:$(selector).fadeIn(speed,callback); 예제: 123456789101112131415161718192021222324252627 $(document).ready(function(){$("button").click(function(){$("#div1").fadeIn();$("#div2").fadeIn("slow");$("#d..
-
[jQuery] 5. 보이기 / 숨기기(Hide / Show) - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:14
jQuery Effects - Hide and Show 1. jQuery hide() and show() HTML 요소를 hide()와 show() 메소드로 숨기고 보일 수 있습니다: 12345678910111213141516171819202122232425 $(document).ready(function(){$("#hide").click(function(){$("p").hide();});$("#show").click(function(){$("p").show();});}); If you click on the "Hide" button, I will disappear. Hide Show Colored by Color Scriptercs 문법:$(selector).hide(speed,callback); $(..
-
[jQuery] 4. 이벤트 메소드(Event method) - jQuery 강좌Web/jQuery 2015. 6. 13. 11:14
jQuery Event Methods jQuery는 HTML 페이지 내에서 이벤트에 반응하기 위한 맞춤입니다. 1. What are Events? 모든 다른 방문자들의 행위에 따른 웹페이지의 반응은 이벤트라 합니다. 예제: - 요소 위에 마우스를 이동시킨다. - 라디오 버튼을 선택한다. - 요소를 클릭한다. Mouse EventsKeyboard EventsForm EventsDocument/Window Eventsclickkeypresssubmitloaddblclickkeydownchangeresizemouseenterkeyupfocusscrollmouseleave blurunload [ 출처: W3Schools ] 2. jQuery Syntax For Event Methods jQuery에서, 대부분의..