一、jQuery选择器
<!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事件：
常用事件方法
绑定事件
解除绑定事件
事件的目标
事件的冒泡
自定义事件
<!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(); });});
<!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");}
<!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);}
<!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); });});
如果您觉得本文的内容对您的学习有所帮助：
关键字：
i3wm 配置刷新生效