Where The Streets Have No Name

jQuery 기본 예제 모음(7) : Events 본문

Developement/Web

jQuery 기본 예제 모음(7) : Events

highheat 2008. 4. 10. 19:35
출처 : http://apmusers.com/tt/dbckdghk/59

<Events>

1. ready( fn )  Returns: jQuery
ready( fn )  실행후 jQuery 객체를 반환

Binds a function to be executed whenever the DOM is ready to be traversed and manipulated.
문서가 준비가 되면 그 시점에 함수를 실행시킨다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   $("p").text("The DOM is now loaded and can be manipulated.");
  });
  </script>
  <style>p { color:red; }</style>
</head>
<body>
  <p>
  </p>
</body>
</html>



2. bind( type, data, fn )  Returns: jQuery
bind( type, data, fn )  실행후 jQuery 객체를 반환

Binds a handler to a particular event (like click) for each matched element.
지정된 이벤트가 일어날때까지 기다렷다가 함수 실행

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   
   $("p").bind("click", function(e){
     var str = "( " + e.pageX + ", " + e.pageY + " )";
     $("span").text("Click happened! " + str);
   });
   $("p").bind("dblclick", function(){
     $("span").text("Double-click happened in " + this.tagName);
   });

  });
  </script>
  <style>
  p { background:yellow; font-weight:bold; cursor:pointer;
     padding:5px; }
  span { color:red; }
  </style>
</head>
<body>
  <p>Click or double click here.</p>
  <span></span>
</body>
</html>



3. one( type, data, fn )  Returns: jQuery
one( type, data, fn )  실행후 jQuery 객체 반환

Binds a handler to a particular event to be executed once for each matched element.
지정된 이벤트가 일어날때까지 기다렷다가 한번만 실행

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   
   var n = 0;
   $("div").one("click", function(){
     var index = $("div").index(this);
     $(this).css({ borderStyle:"inset",
                   cursor:"auto" });
     $("p").text("Div at index #" + index + " clicked." +
                 "  That's " + ++n + " total clicks.");
   });

  });
  </script>
  <style>
  div { width:60px; height:60px; margin:5px; float:left;
       background:green; border:10px outset;
       cursor:pointer; }
  p { color:red; margin:0; clear:left; }
  </style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <p>Click a green square...</p>
</body>
</html>



4. trigger( type, data )  Returns: jQuery
trigger( type, data )  실행후 jQuery 객체 반환

Trigger a type of event on every matched element.
매치되는 모든 원소에 지정된 타입의 이벤트를 발생시킨다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   
   $("button:first").click(function () {
     update($("span:first"));
   });
   $("button:last").click(function () {
     $("button:first").trigger('click');

     update($("span:last"));
   });

   function update(j) {
     var n = parseInt(j.text(), 0);
     j.text(n + 1);
   }

  });
  </script>
  <style>
  button { margin:10px; }
  div { color:blue; font-weight:bold; }
  span { color:red; }
  </style>
</head>
<body>
  <button>Button #1</button>
  <button>Button #2</button>
  <div><span>0</span> button #1 clicks.</div>
  <div><span>0</span> button #2 clicks.</div>
</body>
</html>



5. triggerHandler( type, data )  Returns: jQuery
triggerHandler( type, data )  실행후 jQuery객체 반환

This particular method triggers all bound event handlers on an element (for a specific event type) WITHOUT executing the browsers default actions.
잘은 모르겟지만 실제적인 행위는 하지 않고 그결과만 실행한다는 뜻인것 같음

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   
   $("#old").click(function(){
     $("input").trigger("focus");
   });
   $("#new").click(function(){
     $("input").triggerHandler("focus");
   });
   $("input").focus(function(){
     $("<span>Focused!</span>").appendTo("body").fadeOut(1000);
   });

  });
  </script>
 
</head>
<body>
  <button id="old">.trigger("focus")</button>
  <button id="new">.triggerHandler("focus")</button><br/><br/>
  <input type="text" value="To Be Focused"/>
</body>
</html>




6. unbind( type, data )  Returns: jQuery
unbind( type, data ), 실행후 jQuery 객체 반환

This does the opposite of bind, it removes bound events from each of the matched elements.
bind와 정반대의 역활을 하며 매치되는 모든 원소에 바운드 이벤트를 제거한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   
   function aClick() {
     $("div").show().fadeOut("slow");
   }
   $("#bind").click(function () {
     // could use .bind('click', aClick) instead but for variety...
     $("#theone").click(aClick)
                 .text("Can Click!");
   });
   $("#unbind").click(function () {
     $("#theone").unbind('click', aClick)
                 .text("Does nothing...");
   });

  });
  </script>
  <style>
  button { margin:5px; }
  button#theone { color:red; background:yellow; }
  </style>
</head>
<body>
  <button id="theone">Does nothing...</button>
  <button id="bind">Bind Click</button>
  <button id="unbind">Unbind Click</button>
  <div style="display:none;">Click!</div>
</body>
</html>



7. hover( over, out )  Returns: jQuery
hover( over, out )  실행후 jQuery 객체를 반환

Simulates hovering (moving the mouse on, and off, an object). This is a custom method which provides an 'in' to a frequent task.
마우스 오버와 아웃시 행위를 지정할수 있다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   
   $("li").hover(
     function () {
       $(this).append($("<span> ***</span>"));
     },
     function () {
       $(this).find("span:last").remove();
     }
   );

  });
  </script>
  <style>
  ul { margin-left:20px; color:blue; }
  li { cursor:default; }
  span { color:red; }
  </style>
</head>
<body>
  <ul>
   <li>Milk</li>
   <li>Bread</li>
   <li>Chips</li>
   <li>Socks</li>
  </ul>
</body>



8. toggle( fn, fn )  Returns: jQuery
toggle( fn, fn )  실행후 jQuery 객체 반환

Toggle between two function calls every other click.
클릭시 두개의 함수를 반복적으로 실행

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   
   $("li").toggle(
     function () {
       $(this).css("list-style-type", "disc")
              .css("color", "blue");
     },
     function () {
       $(this).css({"list-style-type":"", "color":""});
     }
   );

  });
  </script>
  <style>
  ul { margin:10px; list-style:inside circle; font-weight:bold; }
  li { cursor:pointer; }
  </style>
</head>
<body>
  <ul>
   <li>Go to the store</li>
   <li>Pick up dinner</li>
   <li>Debug crash</li>
   <li>Take a jog</li>
  </ul>
</body>
</html>



9. blur( )  Returns: jQuery
blur( )  실행후 jQuery 객체 반환

Triggers the blur event of each matched element.



10. blur( fn )  Returns: jQuery
blur( fn )  실행후 jQuery 객체 반환

Bind a function to the blur event of each matched element.




11. change( )  Returns: jQuery
change( )  실행후 jQuery 객체 반환

Triggers the change event of each matched element.



12. change( fn )  Returns: jQuery
change( fn )  실행후 jQuery 객체 반환

Binds a function to the change event of each matched element.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   
   $("select").change(function () {
         var str = "";
         $("select option:selected").each(function () {
               str += $(this).text() + " ";
             });
         $("div").text(str);
       })
       .change();

  });
  </script>
  <style>
  div { color:red; }
  </style>
</head>
<body>
  <select name="sweets" multiple="multiple">
   <option>Chocolate</option>
   <option selected="selected">Candy</option>
   <option>Taffy</option>
   <option selected="selected">Carmel</option>
   <option>Fudge</option>
   <option>Cookie</option>
  </select>
  <div></div>
</body>
</html>



13. click( )  Returns: jQuery
click( )  실행후 jQuery 객체 반환

Triggers the click event of each matched element.


14. click( fn )  Returns: jQuery
click( fn )  실행후 jQuery 객체 반환

Binds a function to the click event of each matched element.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
   
   $("p").click(function () {
     $(this).slideUp();
   });
   $("p").hover(function () {
     $(this).addClass("hilite");
   }, function () {
     $(this).removeClass("hilite");
   });

  });
  </script>
  <style>
  p { color:red; margin:5px; cursor:pointer; }
  p.hilite { background:yellow; }
  </style>
</head>
<body>
  <p>First Paragraph</p>
  <p>Second Paragraph</p>
  <p>Yet one more Paragraph</p>
</body>
</html>

15. dblclick( )  Returns: jQuery
dblclick( )  실행후 jQuery 객체를 리턴

Triggers the dblclick event of each matched element.

16. dblclick( fn )  Returns: jQuery
dblclick( fn )  실행후 jQuery 객체를 리턴

Binds a function to the dblclick event of each matched element.

17. error( )  Returns: jQuery
Triggers the error event of each matched element.

18. error( fn )  Returns: jQuery
Binds a function to the error event of each matched element.

19. focus( )  Returns: jQuery
Triggers the focus event of each matched element.

20. focus( fn )  Returns: jQuery
Binds a function to the focus event of each matched element.

21. keydown( )  Returns: jQuery
Triggers the keydown event of each matched element.

22. keydown( fn )  Returns: jQuery
Bind a function to the keydown event of each matched element.

23. keypress( )  Returns: jQuery
Triggers the keypress event of each matched element.

24. keypress( fn )  Returns: jQuery
Binds a function to the keypress event of each matched element.

25. keyup( )  Returns: jQuery
Triggers the keyup event of each matched element.

26. keyup( fn )  Returns: jQuery
Bind a function to the keyup event of each matched element.

27. load( fn )  Returns: jQuery
Binds a function to the load event of each matched element.

28. mousedown( fn )  Returns: jQuery
Binds a function to the mousedown event of each matched element.

29. mousemove( fn )  Returns: jQuery
Bind a function to the mousemove event of each matched element.

30. mouseout( fn )  Returns: jQuery
Bind a function to the mouseout event of each matched element.

31. mouseover( fn )  Returns: jQuery
Bind a function to the mouseover event of each matched element.

32. mouseup( fn )  Returns: jQuery
Bind a function to the mouseup event of each matched element.

33. resize( fn )  Returns: jQuery
Bind a function to the resize event of each matched element.

34. scroll( fn )  Returns: jQuery
Bind a function to the scroll event of each matched element.

35. select( )  Returns: jQuery
Trigger the select event of each matched element.

36. select( fn )  Returns: jQuery
Bind a function to the select event of each matched element.

37. submit( )  Returns: jQuery
Trigger the submit event of each matched element.

38. submit( fn )  Returns: jQuery
Bind a function to the submit event of each matched element.

39. unload( fn )  Returns: jQuery
Binds a function to the unload event of each matched element.