문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

현재 위치: start » wiki » javascript » jquery » jquery_note » jquery_events
wiki:javascript:jquery:jquery_note:jquery_events

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판 이전 판
다음 판 		이전 판
wiki:javascript:jquery:jquery_note:jquery_events [2021/04/15 13:33]
emblim98 		wiki:javascript:jquery:jquery_note:jquery_events [2023/01/13 18:44] (현재)
줄 1: 줄 1:
 ======jQuery Event Methods====== ======jQuery Event Methods======
-<WRAP left notice 80%>+<WRAP left notice 70%>
   * description : jQuery Event Methods   * description : jQuery Event Methods
   * author      : 오션   * author      : 오션
줄 28: 줄 28:
 | mouseenter    | keyup            | focus        | scroll                  | | mouseenter    | keyup            | focus        | scroll                  |
 | mouseleave    |                  | blur         | unload                  | | mouseleave    |                  | blur         | unload                  |
-\\+
 =====jQuery Syntax For Event Methods===== =====jQuery Syntax For Event Methods=====
 %%jQuery%%에서, 대부분의 %%DOM%% 이벤트에는 동일한 %%jQuery%% 메서드가 있습니다.\\ %%jQuery%%에서, 대부분의 %%DOM%% 이벤트에는 동일한 %%jQuery%% 메서드가 있습니다.\\
줄 45: 줄 45:
 }); });
 </code> </code>
 +\\
 ======Commonly Used jQuery Event Methods====== ======Commonly Used jQuery Event Methods======
 =====$(document).ready()===== =====$(document).ready()=====
줄 60: 줄 60:
 ====예제==== ====예제====
 <code jquery> <code jquery>
-$("p").click(function() { +    $(document).ready(function () { 
-  $(this).hide(); +      $("p").click(function () { 
-});+        $(this).hide(); 
 +      }); 
 +    });
 </code> </code>
  
줄 72: 줄 74:
 ====예제==== ====예제====
 <code jquery> <code jquery>
-$("p").dblclick(function() { +    $(document).ready(function () { 
-  $(this).hide(); +      $("p").dblclick(function () { 
-});+        $(this).hide(); 
 +      }); 
 +    });
 </code> </code>
  
줄 84: 줄 88:
 ====예제==== ====예제====
 <code jquery> <code jquery>
-$("#p1").mouseenter(function() { +    $(document).ready(function () { 
-  alert("You entered p1!"); +      $("#p1").mouseenter(function () { 
-});+        alert("You entered p1!"); 
 +      }); 
 +    });
 </code> </code>
  
줄 96: 줄 102:
 ====예제==== ====예제====
 <code jquery> <code jquery>
-$(this).mouseleave(function() { +    $(document).ready(function () { 
-  alert("Bye! You now leave p1!"); +      $("#p1").mouseleave(function () { 
-});+        alert("Bye! You now leave p1!"); 
 +      }); 
 +    });
 </code> </code>
  
줄 108: 줄 116:
 ====예제==== ====예제====
 <code jquery> <code jquery>
-$("#p1").mousedown(function() { +    $(document).ready(function () { 
-  alert("Mouse down over p1!"); +      $("#p1").mousedown(function () { 
-});+        alert("Mouse down over p1!"); 
 +      }); 
 +    });
 </code> </code>
  
줄 120: 줄 130:
 ====예제==== ====예제====
 <code jquery> <code jquery>
-$("#p1").mouseup*function() { +    $(document).ready(function () { 
-  alert("Mouse up over p1!"); +      $("#p1").mouseup(function () { 
-});+        alert("Mouse up over p1!"); 
 +      }); 
 +    });
 </code> </code>
  
줄 132: 줄 144:
 ====예제==== ====예제====
 <code jquery> <code jquery>
-$("#p1").hover(function() { +    $(document).ready(function () { 
-  alert("Ypu entered p1!); +      $("#p1").hover(function () { 
-}, +        alert("You entered p1!"); 
-function() { +      }, 
-  alert("Bye! You now leave p1!"); +        function () { 
-});+          alert("Bye! You now leave p1!"); 
 +        }); 
 +    });
 </code> </code>
  
줄 147: 줄 161:
 ====예제==== ====예제====
 <code jquery> <code jquery>
-$("input").focus(function() { +    $(document).ready(function () { 
-  $(this).css("background-color", "#cccccc"); +      $("input").focus(function () { 
-});+        $(this).css("background-color", "yellow"); 
 +      }); 
 +      $("input").blur(function () { 
 +        $(this).css("background-color", "green"); 
 +      }); 
 +    });
 </code> </code>
  
줄 159: 줄 178:
 ====예제==== ====예제====
 <code jquery> <code jquery>
-$("input").blur(function9) {+$("input").blur(function() {
   $(this).css("background-color", "#ffffff");   $(this).css("background-color", "#ffffff");
 }); });
줄 171: 줄 190:
 ====예제==== ====예제====
 <code jquery> <code jquery>
-$("p").on("click", function() { +    $(document).ready(function () { 
-  $(this).hide(); +      $("p").on("click", function () { 
-});+        $(this).hide(); 
 +      }); 
 +    });
 </code> </code>
 \\ \\
줄 180: 줄 201:
 ====예제==== ====예제====
 <code jquery> <code jquery>
-$("p").on({ +    $(document).ready(function () { 
-  mouseenter: function() { +      $("p").on({ 
-    $(this).css("background-color", "lightgray"); +        mouseenter: function () { 
-  }, +          $(this).css("background-color", "lightgray"); 
-  mouseleave: function() { +        }, 
-    $(this).css("background-color", "lightblue"); +        mouseleave: function () { 
-  }, +          $(this).css("background-color", "lightblue"); 
-  click: function() { +        }, 
-    $(this).css("background-color", "yellow"); +        click: function () { 
-  } +          $(this).css("background-color", "yellow"); 
-});+        } 
 +      }); 
 +    });
 </code> </code>
  
/volume1/web/dokuwiki/data/attic/wiki/javascript/jquery/jquery_note/jquery_events.1618461204.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki