jQuery選擇器和事件

時間 2019-12-14

原文原文鏈接

一、選擇器（id選擇器、類選擇器、普通選擇器，與css相似）css

index.htmlhtml

 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代碼：jquery

1 $(document).ready(function(){
2     $("button").click(function(){
3         $("#pid").text("p元素被修改了");
4     });
5 });

點擊button修改pid的內容ide

二、事件測試

2.一、事件之事件經常使用方法this

 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.二、事件之綁定、解除綁定事件spa

 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代碼：code

$(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");
}

三、事件之事件目標與冒泡htm

index代碼blog

<!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="width: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 }

四、事件之自定義事件

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 });

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。