出处:jQuery 双击事件(dblclick)时,不触发单击事件(click) 在jQuery的事件绑定中,执行双击事件(dblclick)时能触发两次单击事件(click)。...即一个标签元素(如div等),如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblclick...)时却会触发两次单击事件(click)。...先看一下点击事件的执行顺序: 单击(click):mousedown,mouseout,click; 双击(dblclick):mousedown,mouseout,click , mousedown,...mouseout,click,dblclick; 在双击事件(dblclick),触发的两次单击事件(click)中,第一次的单击事件(click)会被屏蔽掉,但第二次不会。
); 2)$.each(object,[callback]): 3)for..of:JQuery3.0 版本之后提供的方式 【注意】:如果遍历中加判断条件,当前function返回为false,则结束循环...事件绑定 JQuery事件绑定方式包括: 1)JQuery标准的绑定方式:JQuery对象.事件方法(回调函数);注意:如果调用事件方法,不传递回调参数,会触发浏览器默认行为; 2)on绑定事件、off...解除绑定:JQuery对象.on("事件名称",回调函数)、JQuery对象.off("事件名称");注意:若off方法不传递任何参数,则会将组件上所有的事件解除; 3)事件切换toggle:JQuery...使用off解除btn按钮的单击事件 $("#btn2").click(function () { //解除btn按钮的单击事件...//$("#btn").off("click"); $("#btn").off();//将组件上的所有事件全部解绑 }); });
Jquery对象.mouseout();鼠标移出时触发 表单对象.submit();//让表单提交*** 在这里需要注意:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。...解除绑定 利用jquery的on()方法可以将的一个事件绑定到jquery对象上, 语法格式如下: jq对象.on("事件名称",回调函数) 利用jquery的off()方法可以将的一个事件从jquery...语法格式如下: jq对象.off("事件名称") 注意:如果off方法不传递任何参数,则将组件上的所有事件全部解绑, 如下面的实例:为第一个按钮绑定一个弹窗事件,点击按钮触发弹窗,点击第二个按钮,解除第一个按钮的弹窗事件...("click") // 解除所有绑定 $("#btn").off(); }); });...之后继续和大家分享应用jquery框架的实战案例! 我是灰小猿!我们下期见!
库内部已经做了各种底层的封装,以及各种兼容问题的处理,工作中调用库内的API接口就能实现需要的功能,不需要额外的代码来处理函数封装和兼容问题,让代码更简洁,效率更高。...(){ console.log("糟糕,我怎么又被点击了"); }) $("#btn").off("click.myClick") // 仅仅解绑了上面添加命名的事件二,不会解绑事件一 2....).on("click", "li", function() { var text = $(this).text() console.log(text) }) off() 方法通常用于移除通过...Paste_Image.png $("#btn").off("click.myClick") 推荐使用:on方法,因为既能普通绑定事件,也能事件代理绑定。...内置的 easing 函数: swing, linear callback: 可选,animate 函数执行完之后,要执行的函数。
jQuery 为我们提供 了多种事件解绑方法:die()、undelegate()、off()等,甚至还有只触发一次的事件绑定方法one(),在这里我们重点讲解一下off(): off语法 演示代码...事件解绑 off // $("div").off(); // 这个是解除了div身上的所有事件 $("div").off("click"); // 这个是解除了...div身上的点击事件 $("ul").off("click", "li"); // 2. one() 但是它只能触发事件一次...(下载略) 代码演示 懒加载只需引入html 和 js操作 即可,此插件不涉及css。...之后把最新从表单获取过来的数据,追加到数组里面。
for..of:jquery 3.0 版本之后提供的方式。...标准的绑定方式 jq对象.事件方法(回调函数); 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。...解除绑定 jq对象.on("事件名称",回调函数) jq对象.off("事件名称") 如果off方法不传递任何参数,则将组件上的所有事件全部解绑 <!...}) ; //使用off解除btn按钮的单击事件 $("#btn2").click(function (...) { //解除btn按钮的单击事件 $("#btn").off("click");
jQuery 为我们提供 了多种事件解绑方法:die() / undelegate() / off() 等,甚至还有只触发一次的事件绑定方法 one(),在这里我们重点讲解一下 off() ; 语法...事件解绑 off // $("div").off(); // 这个是解除了div身上的所有事件 $("div").off("click"); // 这个是解除了...div身上的点击事件 $("ul").off("click", "li"); // 2. one() 但是它只能触发事件一次...(下载略) 代码演示 懒加载只需引入html 和 js操作 即可,此插件不涉及css。...// 5.之后把最新从表单获取过来的数据,追加到数组里面。
元素结合.prevUntil(选择器) 获取到当前元素上面所有兄弟元素, 直到选择器元素为止(不包含选择器元素) 10. parent() => 获取到当前元素的父元素 11....元素集合.off(事件类型) => 解除元素身上该事件类型的所有事件处理函数 2....', handlerA) $('li').on('click', handlerB) // 3. off() // 3-1. off(事件类型) // 把 click 事件的所有事件处理函数全部解除...// $('li').off('click') // 3-2. off(事件类型, 事件处理函数) // 把 click 事件的 handlerA 事件处理函数解除 //...$('li').off('click', handlerA) // 4. trigger() // $('li:first').trigger('click') </script
而 JQuery,作为 JavaScript 的一种封装库,为这场表演提供了更为便捷和优雅的事件绑定方式。其中,on 和 off 两位主角,正是这场奇妙舞曲中的核心演员。...(function() { $('#myButton').off('click', handleClick); }, 3000); off 方法解绑了点击事件。这样,鼠标悬停事件仍然会被触发,但点击事件不再响应。 解绑所有事件 如果你想彻底解绑所有类型的事件,可以调用 off 方法时不传递任何参数。 <!...// 过一段时间后解绑点击事件 setTimeout(function() { $('#myButton').off('click', clickHandler)...小结 通过深入学习 on 和 off 方法,我们已经更好地理解了 JQuery 事件绑定的精髓。on 方法不仅能够简单直接地绑定事件,还支持多种用法和进阶技巧,包括事件代理、命名空间、事件数据传递等。
jQuery事件机制 JavaScript中已经学习过了事件,但是jQuery对JavaScript事件进行了封装,增加并扩展了事件处理机制。...jQuery事件发展历程(了解) 简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐) 简单事件注册 click(handler) //单击事件...之后,jQuery用on统一了所有事件的处理方法。...' ); //解绑所有的click事件 off方式(推荐) // 解绑匹配元素的所有事件 $(selector).off(); // 解绑匹配元素的所有click事件 $...(selector).off("click"); 触发事件 $(selector).click(); //触发 click事件 $(selector).trigger("click");
第8章 jQuery事件机制 JavaScript中已经学习过了事件,jQuery对JavaScript事件进行了封装,增加并扩展了事件处理机制。...8.1 jQuery事件发展历程(了解) 简单事件绑定–bind事件绑定–delegate事件绑定–on事件绑定(推荐) 简单事件注册 click(handler) 单击事件 mouseenter(...', function(){ // 为 .parentBox下面的所有的p标签绑定事件 }); 8.2 on注册事件(重点) jQuery1.7之后,jQuery用on统一了所有事件的处理方法。...' ); // 解绑所有的click事件 off方式(推荐) // 解绑匹配元素的所有事件 $(selector).off(); // 解绑匹配元素的所有click事件 $(selector).off(...'click'); 8.5 触发事件 $(selector).click(); // 触发 click事件 $(selector).trigger('click'); 8.6 jQuery事件对象 jQuery
3.0 版本之后提供的方式 事件绑定 jquery标准的绑定方式 on绑定事件/off解除绑定 事件切换:toggle 案例 广告显示和隐藏 抽奖 插件:增强JQuery的功能 实现方式: 动画...false:如果当前function返回为true,则结束本次循环,继续下次循环(continue) $.each(object, [callback]) for…of: jquery 3.0 版本之后提供的方式...for(元素对象 of 容器对象) 事件绑定 jquery标准的绑定方式 jq对象.事件方法(回调函数); 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。...表单对象.submit();//让表单提交 on绑定事件/off解除绑定 jq对象.on(“事件名称”,回调函数) jq对象.off(“事件名称”) 如果off方法不传递任何参数,则将组件上的所有事件全部解绑...给结束按钮绑定单击事件 $("#stopID").click(function () { //处理按钮是否可以使用的效果 $("#startID").prop("disabled"
, 释放之后就不能再使用$,改为使用jQuery jQuery.noConfict(); 2.自定义一个访问符号*/...() 如果不传递参数,会移除所有的事件 如果传递一个参数,会移除所有指定类型的事件 如果传递两个参数,会移除所有指定类型的指定事件 示例 off("click"); //off方法如果传递两个参数,会移除所有指定类型的指定事件 $("button...").off("click",test1); }); jQuery自动触发事件 1.trigger...可以找一个在入口函数执行之前就有的元素来监听动态添加的某些事件 为什么要事件委托 新增的节点没有click响应,因为jQuery入口函数加载$("ul>li").click时没有把
3.0 版本之后提供的方式 for(元素对象 of 容器对象) 3....事件绑定 1. jquery标准的绑定方式 * jq对象.事件方法(回调函数); * 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。...* 表单对象.submit();//让表单提交 2. on绑定事件/off解除绑定 * jq对象.on("事件名称",回调函数) * jq对象.off("事件名称...") * 如果off方法不传递任何参数,则将组件上的所有事件全部解绑 3....给结束按钮绑定单击事件 $("#stopID").click(function () { //处理按钮是否可以使用的效果
如果提供了第二参数,那么事件在往上冒泡的过程中遇到了选择器匹配的元素,将会触发事件回调函数 卸载事件off()方法 通过.on()绑定的事件处理程序 通过off() 方法移除该绑定 根据on绑定事件的一些特性...mousedown") 删除多个事件 $("elem").off("mousedown mouseup") 删除所有事件,这里不需要传递事件名了,节点上绑定的所有事件讲全部销毁 $("elem").off...() 事件对象的使用 jQuery事件对象的作用 标准的”click”点击事件 $(elem).on("click",function(event){ event //事件对象 }) 在不同浏览器之间事件对象的获取...正常来说是不可以的,但是jQuery解决了这个问题,提供了一个trigger方法来触发浏览器事件 $('#elem').trigger('click'); //在绑定on的事件元素上,通过trigger...尽管 .trigger() 模拟事件对象,但是它并没有完美的复制自然发生的事件,若要触发通过 jQuery 绑定的事件处理函数,而不触发原生的事件,使用.triggerHandler() 来代替 triggerHandler
siblings(selector) $( “.first”).siblings(“li”); 查找兄弟节点,不包括自己本身 nextAll([expr]) $(".first").nextAll() 查找当前元素之后所有的同辈元素...outerWidth(true) / outerHeight(true) 取得匹配元素宽度和高度值 包括 padding、border、margin 返回值是数字型的 如果参数是数字,则修改样式 参数不写单位...','li',function() { alert('hello world'); }) 对于新创建的元素,click无法绑定,但是on可以 $('div').on('click','p...',function() { alert('别点我'); }) $('div').append($('新来的')) 5.1.2 off()解绑事件 解除全部事件 $('div')....off() 解除特定事件 $('div').off('click') 解除事件委托 $('div').off('click','li') 只触发一次的事件 $('div').one('click',function
因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 (2016年5月20日) 2.x:不兼容IE678,很少有人使用,官方只做BUG维护,功能不再新增。...如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日) 3.x:不兼容IE678,只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。...("div:has(h1)")// 找到所有后代中有h1标签的div标签 $("div:has(.c1)")// 找到所有后代中有c1样式类的div标签 $("li:not(.c1)")// 找到所有不包含...(); }); $("p").click(function () { alert("p"); }); $("div").click(function (...jQuery的这个入口函数没有函数覆盖现象,文档加载完成之后就可以调用(建议使用此函数) 事件委托 事件委托是通过事件冒泡的原理,利用父标签去捕获子标签的事件。
// $("#btn").trigger('click', ['1234', '3333']); // 触发事件处理程序执行,不触发事件本身 $('#btn').triggerHandler...off(events,[selector],[fn]) 如果一个简单的事件名称,比如提供"click",所有 这种类型的事件(包括直接和委派)从jQuery设置的元素上删除。...实例: // 解绑所有的on的事件 $("p").off() // 解绑所有的p的委托click事件,所有子元素都被取消绑定 $("p").off( "click", "**" ) // 解绑具体的某个事件处理程序...$('.list li').off('click.demo'); }); }); 3....event.stopPropagation() 防止事件冒泡到DOM树上,也就是不触发的任何前辈元素上的事件处理函数。 4.
* jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。...如果不考虑兼容低版本的浏览器可以使用2.x, 最终版本:2.2.4 (2016年5月20日) 3.x:不兼容ie678,只支持最新的浏览器。...(function () { alert("abc") }); }*/ //JQuery入口函数(dom文档加载完成之后执行该函数中的代码...}); //点击btn2,接触btn的点击事件 $("#btn2").click(function () { // $("#btn").off("...click"); $("#btn").off();//如果不填参数,则将btn上面所有的参数都删除掉 }); }) 3.
2.1. jQuery事件发展历程(了解) 简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐) 简单事件注册 click(handler) 单击事件...之后,jQuery用on统一了所有事件的处理方法。...(不用) $( selector ).undelegate(); //解绑所有的delegate事件 $( selector).undelegate( “click” ); //解绑所有的click事件...off方式(推荐) // 解绑匹配元素的所有事件 $(selector).off(); // 解绑匹配元素的所有click事件 $(selector).off("click"); 2.4....触发事件 $(selector).click(); //触发 click事件 $(selector).trigger("click"); 2.5. jQuery事件对象 jQuery事件对象其实就是js