jQuery选择器和事件

最新推荐文章于 2022-05-31 21:12:53 发布

dxh_0829

最新推荐文章于 2022-05-31 21:12:53 发布

阅读量596

点赞数

分类专栏： JQuery

JQuery 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

1）选择器

$(".className")——类选择器；

$("#IDName")——ID选择器；

$("ElementTagName")——元素名选择器；

更多选择器点击打开链接

2）事件

click()——点击事件；

dblclick()——双击事件；

mouseenter()——鼠标进入事件；

mouseleave()——鼠标离开事件；

更多事件点击打开链接

3）事件的绑定和解绑

bind()、on()——事件绑定;

unbind()、off()——事件解绑；

注意on()、off()需要在jQuery1.7版本以上；

[html]view plaincopy 
   
 <button id="btn1">事件绑定</button>  

[javascript]view plaincopy 
   
 <pre name="code" class="javascript">$(document).ready(function(){  
     $("#btn1").bind("click",clickHandler);  
     $("#btn1").bind("click",clickHandler2);  
     $("#btn1").unbind("click",clickHandler2);  
 });  
   
 function clickHandler(e){  
     console.log(e.target.innerHTML);  
   
 }function clickHandler2(e){  
     console.log(e.target.id);  
 }  

4)事件的目标

currentTarget与target的区别:

1、target发生在事件流的目标阶段，而currentTarget发生在事件流的整个阶段（捕获、目标和冒泡阶段）;
2、只有当目标流处于目标阶段的时候才相同;
3、而当事件流处于捕获和冒泡阶段时，target指向被点击的对象，而currentTarget指向当前事件活动的对象，通常是事件的祖元素。

5）事件的冒泡

event.stopImmediatePropagation()——阻止所有元素的事件冒泡；

event.stopPropagation()——阻止父级元素的事件冒泡；

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
     <meta charset="UTF-8">  
     <title>Dom元素的设置</title>  
     <script src="jquery-1.11.2.min.js"></script>  
     <script src="eventTarget.js"></script>  
     <style type="text/css">  
         #div1{  
             width:200px;  
             height: 200px;  
             background-color: #0088bb;  
         }  
         #div1 ul{  
             list-style-type: none;  
         }  
     </style>  
 </head>  
 <body>  
 <div id="div1">  
     <ul>  
         <li>广州恒大</li>  
         <li>山东鲁能</li>  
         <li>上海上港</li>  
         <li>北京国安</li>  
         <li>上海申花</li>  
     </ul>  
 </div>  
   
 </body>  
 </html>  

eventTarget.js的代码：

[javascript]view plaincopy 
   
 $(document).ready(function(){  
     $("body").bind("click",bodyHandler);  
     $("div").bind("click",divHandler);  
     $("div").bind("click",divHandler2);  
 });  
   
 function bodyHandler(e){  
     //currentTarget:body; target:div  
     console.log(e);  
 }  
   
 function divHandler(e){  
     //currentTarget:div; target:div  
     console.log(e);  
     //阻止父级元素的冒泡  
     //e.stopPropagation();  
     //阻止所有元素的冒泡  
     e.stopImmediatePropagation();  
 }  
 function divHandler2(e){  
     console.log(e);  
 }  

6）自定义事件：

jQuery.Event("myEvent")——指定自定义事件的类型为myEvent;

$(selector).trigger(event,[param1,param2])——规定被选元素触发的事件；

第一种书写方式：

[javascript]view plaincopy 
   
 //给element绑定hello事件  
 element.bind("hello",function(){  
     alert("hello world!");  
 });  
          
 //触发hello事件  
 element.trigger("hello");  

第二种书写方式：

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
 <head lang="zh-CN">  
     <meta charset="UTF-8">  
     <title>trigger demo</title>  
     <script src="jquery-1.11.2.min.js"></script>  
     <script src="myEvent.js"></script>  
 </head>  
 <body>  
 <button id="btn">click me</button>  
   
 </body>  
 </html>  

myEvent.js代码：

[javascript]view plaincopy 
   
     //自定义事件  
 var btn;  
 $(document).ready(function(){  
     btn=$("#btn");  
     btn.click(function(){  
         //自定义事件类型  
         var e=jQuery.Event("myEvent");  
         //触发自定义事件  
         btn.trigger(e);  
     });  
     //绑定自定义事件  
     btn.on("myEvent",function(e){  
         console.log(e);  
     });  

dxh_0829

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery选择器和事件

1）选择器 $(".className")——类选择器； $("#IDName")——ID选择器； $("ElementTagName")——元素名选择器；更多选择器点击打开链接2）事件 click()——点击事件； dblclick()——双击事件； mouseenter()——鼠标进入事件；
复制链接

扫一扫