本文共 3192 字，大约阅读时间需要 10 分钟。
一、jQuery选择器
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <head> <meta charset= "UTF-8" > <title></title> <script src= "jquery-1.10.1.min.js" ></script> <script src= "Selector.js" ></script> </head> <body> <p>p1</p> <p class= "pclass" >p2</p> <button>Click me</button> </body> </html> $(document).ready( function (){ $( "button" ).click( function (){ $( ".pclass" ).text( "p元素被修改了" ); }) }); |
二、jQuery事件
1.jQuery事件：
常用事件方法
绑定事件
解除绑定事件
事件的目标
事件的冒泡
自定义事件
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html> <head> <meta charset= "UTF-8" > <title></title> <script src= "jquery-1.10.1.min.js" ></script> <script src= "EventMethod.js" ></script> </head> <body> <button>Click me</button> </body> </html> $(document).ready( function (){ // $("button").click(function(){ // $("button").dblclick(function(){ // $("button").mouseenter(function(){ $( "button" ).mouseleave( function (){ $( this ).hide(); }); }); |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html> <html> <head> <meta charset= "UTF-8" > <title></title> <script src= "jquery-1.10.1.min.js" ></script> <script src= "bindEvent.js" ></script> </head> <body> <button id= "clickMeBtn" >Click me</button> </body> </html> $(document).ready( function (){ // $("#clickMeBtn").click(function(){ // alert("hello"); // }); // $("#clickMeBtn").bind("click",clickHandler1); // $("#clickMeBtn").bind("click",clickHandler2); // $("#clickMeBtn").unbind("click",clickHandler1); $( "#clickMeBtn" ).on( "click" ,clickHandler1); $( "#clickMeBtn" ).on( "click" ,clickHandler2); $( "#clickMeBtn" ).off( "click" ,clickHandler1); }); function clickHandler1(e){ console.log( "clickHandler1" ); } function clickHandler2(e){ console.log( "clickHandler2" ); } |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html> <head> <meta charset= "UTF-8" > <title></title> <script src= "jquery-1.10.1.min.js" ></script> <script src= "EventTarget.js" ></script> </head> <body> <div style= "width: 300px;height: 300px;background-color: #009B86;" > <li>A</li> <li>B</li> <li>C</li> <li>D</li> </div> </body> </html> $(document).ready( function (){ $( "body" ).bind( "click" ,bodyHandler); $( "div" ).bind( "click" ,divHandler1); $( "div" ).bind( "click" ,divHandler2); }); function bodyHandler(event){ console.log(event); } function divHandler1(event){ console.log(event); // event.stopPropagation(); event.stopImmediatePropagation(); } function divHandler2(event){ console.log(event); } |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html> <head> <meta charset= "UTF-8" > <title></title> <script src= "jquery-1.10.1.min.js" ></script> <script src= "CustomEvent.js" ></script> </head> <body> <button id= "ClickMeBtn" >Click Me</button> </body> </html> var ClickMeBtn; $(document).ready( function (){ ClickMeBtn = $( "#ClickMeBtn" ); ClickMeBtn.click( function (){ var e = jQuery.Event( "MyEvent" ); ClickMeBtn.trigger(e); }); ClickMeBtn.bind( "MyEvent" , function (event){ console.log(event); }); }); |
本文转自yeleven 51CTO博客，原文链接:http://blog.51cto.com/11317783/1795214
转载地址：http://shmwa.baihongyu.com/