1、选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").text("p元素被修改了"); $("#p2").text("id为p2的元素被修改了。") }); }); </script> </head> <body> <p>p1</p> <p id="p2">p2</p> <button id="btn">按钮</button> </body> </html>
需要什么工具直接查找API就可以了。
2、事件常用方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $(this).hide();/*单击隐藏*/ }); $("#btn2").dblclick(function(){ $(this).hide();/*双击隐藏*/ }); $("#btn3").mouseleave(function(){ $(this).hide();/*当鼠标移动到按钮上的时候*/ }); $("#btn4").mousedown(function(){ $(this).hide();/*当鼠标按下去，click是点击完*/ }); $("#btn5").mouseout(function(){ $(this).hide();/*当鼠标从上面离开*/ }); $("#btn6").mouseover(function(){ $(this).hide();/*当鼠标在上面*/ }); }); </script> </head> <body> <button id="btn1">按钮1</button> <button id="btn2">按钮2</button> <button id="btn3">按钮3</button> <button id="btn4">按钮4</button> <button id="btn5">按钮5</button> <button id="btn6">按钮6</button> </body> </html>
3、事件绑定、解除绑定事件
3.1、jQuery事件：
常用事件方法
绑定事件
解除绑定事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.min.js"></script> <script> $(document).ready(function(){ /*$("#clickMeBtn").click(function(){ alert("hello");/!*这种方法在方法特别多，文档特别大的时候是非常耗时的*!/ });*/ $("#clickMeBtn").on("click",clickHandler1); $("#clickMeBtn").bind("click",clickHandler2); // $("#clickMeBtn").unbind("click");/*全部解除*/ $("#clickMeBtn").unbind("click",clickHandler2);/*解除一个事件*/ /* * on和off添加和解除事件是一样的（不过on和bind必须在jQuery1.7之后才可以使用） * 官方推荐使用on和off * */ }); function clickHandler1(){ console.log("clickHandler1"); } function clickHandler2(){ console.log("clickHandler2"); } </script> </head> <body> <button id="clickMeBtn">按钮</button> </body> </html>
4、事件目标与冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.min.js"></script> <script> $(document).ready(function(){ $("body").on("click",bodyHandler); $("div").on("click",divHandler1); $("div").on("click",divHandler2); /*$("li").on("click",liHandler);*/ }); function bodyHandler(event){ console.log(event); } function divHandler1(event){ console.log(event); /*stopImmediatePropagation()阻止当前事件的所有后续冒泡行为，所以后面的divHandler2不会执行*/ //event.stopImmediatePropagation(); /*stopPropagation()仅阻止当前事件的父事件的执行，不会阻止自己的后续动作，所以divHandler2还会执行*/ event.stopPropagation(); } function divHandler2(event){ console.log(event); } // function liHandler(event){ // console.log(event); // // event.stopPropagation(); // // event.stopImmediatePropagation(); // }/*冒泡只会往上冒一次，不会无限制的网上冒泡。*/ </script> </head> <body> <div style="300px; height:300px; background-color: aqua;"> <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> </div> </body> </html>
这里可以将console.log(event)封装在一个函数之中，便于以后调试程序信息出错;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.min.js"></script> <script> $(document).ready(function(){ $("body").on("click",bodyHandler); $("div").on("click",divHandler1); $("div").on("click",divHandler2); /*$("li").on("click",liHandler);*/ }); function bodyHandler(event){ conlog(event); } function divHandler1(event){ conlog(event); event.stopPropagation(); } function divHandler2(event){ conlog(event); } function conlog(event){ console.log(event); } </script> </head> <body> <div style="300px; height:300px; background-color: aqua;"> <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> </div> </body> </html>
5、自定义事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.min.js"></script> <script> var ClickMeBtn; $(document).ready(function(){ ClickMeBtn = $("#btn"); ClickMeBtn.click(function(){ var e = jQuery.Event("MyEvent");/*设置自定义事件的原因就是为了编写人员 在触发某一事件时能够更加直观地知道是什么事件被触发了。*/ ClickMeBtn.trigger(e);/*意思是以代码方式触发ClickMeBtn的e事件*/ }); ClickMeBtn.on("MyEvent",function(event){ console.log(event); }); }); </script> </head> <body> <button id="btn">按钮</button> </body> </html>