一、jQuery选择器

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><scriptsrc="jquery-1.10.1.min.js"></script><scriptsrc="Selector.js"></script></head><body><p>p1</p><pclass="pclass">p2</p><button>Clickme</button></body></html>$(document).ready(function(){$("button").click(function(){$(".pclass").text("p元素被修改了");})});


二、jQuery事件

1.jQuery事件：

常用事件方法

绑定事件

解除绑定事件

事件的目标

事件的冒泡

自定义事件

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><scriptsrc="jquery-1.10.1.min.js"></script><scriptsrc="EventMethod.js"></script></head><body><button>Clickme</button></body></html>$(document).ready(function(){//$("button").click(function(){//$("button").dblclick(function(){//$("button").mouseenter(function(){$("button").mouseleave(function(){$(this).hide();});});

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><scriptsrc="jquery-1.10.1.min.js"></script><scriptsrc="bindEvent.js"></script></head><body><buttonid="clickMeBtn">Clickme</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);});functionclickHandler1(e){console.log("clickHandler1");}functionclickHandler2(e){console.log("clickHandler2");}

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><scriptsrc="jquery-1.10.1.min.js"></script><scriptsrc="EventTarget.js"></script></head><body><div><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);});functionbodyHandler(event){console.log(event);}functiondivHandler1(event){console.log(event);//event.stopPropagation();event.stopImmediatePropagation();}functiondivHandler2(event){console.log(event);}

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><scriptsrc="jquery-1.10.1.min.js"></script><scriptsrc="CustomEvent.js"></script></head><body><buttonid="ClickMeBtn">ClickMe</button></body></html>varClickMeBtn;$(document).ready(function(){ClickMeBtn=$("#ClickMeBtn");ClickMeBtn.click(function(){vare=jQuery.Event("MyEvent");ClickMeBtn.trigger(e);});ClickMeBtn.bind("MyEvent",function(event){console.log(event);});});