[jQuery] 选择器和事件

来源：互联网发布：闲鱼淘宝介入流程编辑：程序博客网时间：2024/06/07 03:03

jQuery选择器

属性选择器

p1

<span style="font-size:24px;"></span><pre name="code" class="html" style="font-size: 24px;">$(document).ready(function(){$("button").click(function(){$("p").text("你好aaaa123");});});

类选择器

p1

$(document).ready(function(){$("button").click(function(){$(".pclass").text("你好aaaa123");});});

id选择器

p1

$(document).ready(function(){$("button").click(function(){$("#pclass").text("你好aaaa123");});});

jQuery事件

常用事件方法

$(document).ready(function(){//$("button").click(function(){   <span style="white-space:pre"></span>点击隐藏//$("button").dblclick(function(){<span style="white-space:pre"></span>双击隐藏//$("button").mouseenter(function(){<span style="white-space:pre"></span>鼠标进入隐藏$("button").mouseleave(function(){<span style="white-space:pre"></span>鼠标移开隐藏$(this).hide();});});

绑定事件

<span style="font-size:24px;">$(document).ready(function(){$("#clickMeBtn").bind("click",clickHandler1);$("#clickMeBtn").bind("click",clickHandler2);});function clickHandler1(e){console.log("clickHandler1");}function clickHandler2(e){console.log("clickHandler2");}</span>

执行打印两行。没有问题。

解除绑定事件

(官方推荐使用on和off关键字，其实bind和unbind底层也是调用的on和off方法。一样，但是on和off关键字在1.7版本之后才有)

$(document).ready(function(){$("#clickMeBtn").on("click",clickHandler1);$("#clickMeBtn").on("click",clickHandler2);$("#clickMeBtn").off("click",clickHandler2);});function clickHandler1(e){console.log("clickHandler1");}function clickHandler2(e){console.log("clickHandler2");}

只打印出来事件1了。

事件的目标

js代码

$(document).ready(function(){$("body").bind("click",bodyHandler);$("div").bind("click",divHandler);});function bodyHandler(event){console.log(event);}function divHandler(event){console.log(event);}

HTML代码

 <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>

点击div后，div的事件是

同时该事件也触发了body的点击

而且点击一次出来两个点击事件：

发生了事件冒泡。

事件的目标并不同，currentTarget指向body是因为给body设置的监听事件，而target是div是因为，是div触发的点击事件。这是事件冒泡。

对于当前div和父级body，如果只想让div响应点击事件，可以阻止事件冒泡

事件的冒泡

在网上找到一段解释时间冒泡的：

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

打个比方说：你在地方法院要上诉一件案子，如果地方没有处理此类案件的法院，地方相关部门会帮你继续往上级法院上诉，比如从市级到省级，直至到中央法院，最终使你的案件得以处理。

jQuery防止事件冒泡的方法：

1、event.stopPropagation();阻止父级的冒泡事假

2、event.stopImmediatePropagation();阻止所有冒泡事件

<span style="font-size:24px;">function divHandler(event){console.log(event);event.stopPropagation();}</span>

这样，控制台只打印了div的响应事件，没有body的。

event.stopImmediatePropagation()也很好理解，阻止所有的事件冒泡。

自定义事件

HTML文件

 <head>  <meta charset="UTF-8"><script src = "jquery-2.1.4.min.js"></script><script src = "CustomEvent.js"></script>  <title>Document</title> </head> <body>  <button id="ClickMeBtn">ClickMe</button> </body>

JS文件

<span style="font-size:24px;">var ClickMeBtn;$(document).ready(function(){ClickMeBtn = $("#ClickMeBtn");ClickMeBtn.click(function(){var e = jQuery.Event("MyEvent");ClickMeBtn.trigger(e);});$(ClickMeBtn).bind("MyEvent",function(event){console.log(event);})});</span>

控制台：新类型的事件MyEvent

1 0