jQuery选择器和事件

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="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 }

 

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

 

posted @ 2016-08-11 14:55  UniqueColor  阅读(967)  评论(0)  编辑  收藏  举报