1、选择器（id选择器、类选择器、普通选择器，与css类似）
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script src="jquery-3.1.0.min.js"></script> 7 <script src="myjs2.js"></script> 8 </head> 9 <body> 10 <p>p1</p> 11 <p id="pid">p2</p> 12 <button>click me</button> 13 </body> 14 </html>
js代码：
1 $(document).ready(function(){ 2 $("button").click(function(){ 3 $("#pid").text("p元素被修改了"); 4 }); 5 });
点击button修改pid的内容
2、事件
2.1、事件之事件常用方法
1 $(document).ready(function(){ 2 // $("button").click(function(){//click单击事件 3 // $(this).hide(); 4 // }); 5 6 7 // $("button").dblclick(function(){//click双击事件 8 // $(this).hide(); 9 // }); 10 11 // $("button").mouseenter(function(){//鼠标放上去时的事件 12 // $(this).hide(); 13 // }) 14 15 $("button").mouseleave(function(){//鼠标移开时的事件 16 $(this).hide(); 17 }) 18 });
2.2、事件之绑定、解除绑定事件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script src="jquery-3.1.0.min.js"></script> 7 <script src="myjs4.js"></script> 8 </head> 9 <body> 10 <button id="clickMeBtn">click me</button> 11 </body> 12 </html>
js代码：
$(document).ready(function(){ // $("#clickMeBtn").click(function(){ // alert("hello"); // }); $("#clickMeBtn").bind("click",clickHandler1);//添加绑定 $("#clickMeBtn").bind("click",clickHandler2); $("#clickMeBtn").unbind("click",clickHandler1);//解除绑定 /*jquery1.7后，可使用下列的方法，官方推荐这种绑定方式*/ $("#clickMeBtn").on("click",clickHandler1);//添加绑定 $("#clickMeBtn").on("click",clickHandler2); $("#clickMeBtn").off("click",clickHandler1);//解除绑定 }); function clickHandler1(e){ console.log("clickHander1"); } function clickHandler2(e){ console.log("clickHander2"); }
3、事件之事件目标与冒泡
index代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="jquery-3.1.0.min.js"></script> <script src="myjs5.js"></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>
js代码
1 $(document).ready(function(){ 2 $("body").bind("click",bodyHandler); 3 $("div").bind("click",divHandler); 4 $("div").bind("click",divHandler1); 5 }); 6 7 function bodyHandler(event){ 8 console.log(event);//测试事件目标，current-target是body，target是div 9 } 10 function divHandler(event){//测试事件目标，current-target是div，target是div 11 console.log(event); 12 //event.stopPropagation();//添加一个事件阻止，阻止父级，这个时候就只有div事件 13 event.stopImmediatePropagation();//阻止所有的事件冒泡，只有一个div事件 14 } 15 function divHandler1(event){ 16 console.log(event); 17 }
4、事件之自定义事件
js代码：
1 var clickMeBtn; 2 $(document).ready(function(){ 3 clickMeBtn = $("#clickmebtn"); 4 clickMeBtn.click(function(){ 5 var e = jQuery.Event("MyEvent"); 6 clickMeBtn.trigger(e); 7 }); 8 clickMeBtn.bind("MyEvent",function(event){ 9 console.log(event); 10 }); 11 });