首页
学习
活动
专区
圈层
工具
发布

jquery 事件绑定及取消 bind live delegate on one区别 (超详细且通俗易懂)

需要使用addEventListener方法添加事件,jquery则不会 它会全部执行,两者都是同时执行,并不是按顺序一一执行。..., function handlerName(e){ alert(e.data.msg); }) }); 取消绑定用 unbind()方法 $("button").click(function()...{ $("p").unbind(); //取消p标签所有绑定的事件 }); unction alertMe() { alert("Hello World!")...").insertAfter("button");//动态添加的新标签会保留事件 }); }); undelegate()取消绑定事件 4.on() 究极进化的产物,集前面三位所长为一身,也是最推荐用的...它既可以给单个标签绑定事件,有map映射,也可以自主选择事件委托对象给后面动态创建的节点绑定事件。 取消绑定事件的方法是off() 这里就不做演示了 跟上面的大同小异,大家赶快去试试吧!

2.5K21
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JQuery 对控件的事件操作

    JQuery是非常棒的js类库,有丰富的UI库和插件,不过我钟爱他的是他的选择器,感觉其他功能有时跟后台人员距离很远,所以一般我也只使用一下他的选择器。...jQuery有unbind的方法,专门来取消绑定的,也就是取消事件,按照上面的例子的话,应该使用: $("#testButton").unbind("click"); 恩,看上去非常好,如果你的...click有2个事件的话,你还可以使用unbind("click", fnName)来删除特定函数的绑定。...为什么有这个取消特定函数的方法呢,我们来看下例子,我们会发现,javascript的事件,跟C#的事件如出一辙,事件的绑定是叠加(+=) 而不是覆盖。...我这里取消了绑定,又删除了特定的绑定,为什么还会执行Eat呢? 其中的原由要看jQuery的类库了,我估计它只删除了通过JQuery绑定的那些事件了,呵呵。 那这时候我们该如何呢?

    2.1K60

    Ztree使用教程

    1️⃣ ZTree 简介ZTree:一款功能强大、轻量的 jQuery 树插件特点:支持多级树形结构支持异步加载节点(AJAX)支持复选框、单选框、节点操作(增删改)样式可定制,兼容性好2️⃣ 引入 ZTree2.1...}};chkboxType:"Y":选中父节点时是否自动选中子节点"N":取消父节点时是否自动取消子节点5.3 节点点击事件var setting = {callback: {onClick: function...parentNode = zTree.getNodeByParam("id",1,null);zTree.addNodes(parentNode, {id:13, pId:1, name:"新增子节点"});// 删除节点...多选框:jquery.ztree.excheck.js8️⃣ 总结ZTree 核心流程:引入 JS/CSS 文件准备  容器准备节点数据(静态或异步)调用 $.fn.zTree.init() 初始化根据需要绑定事件或操作节点常用功能...:异步加载、复选框、节点操作、事件绑定 建议:初学者先用静态 JSON 测试树掌握 map 数据结构和事件绑定再使用异步加载大数据树https://www.52runoob.com/archives/6415

    6110

    jQuery中的常用内容总结(二)

    /delete.json", {"a":"1","b":"2"}, function(d){ 2 if (d.error){ 3 alert("删除出错...上图中 id为p2的dom是用jQuery插入的,然后绑定的一个点击事件和一个鼠标移开事件,当然(•‾̑⌣‾̑•)✧˖°只有在dom存在的时候才会执行绑定的事件,也就是将这两个事件归一(用统一的函数处理这些事件...);当然上图中id为p2的节点是用jQuery插入的(属于未来事件的处理范畴),比较合适的一种方式是用on来进行绑定,如果低版本的jQuery 的话建议也可以使用live()进行绑定( ̄ε  ̄)~ C>...咳咳~,以上5种弹窗,第一种是不可传参的,第五种需要使用jquery_UI.js(jQuery 弹窗插件)且传参需要单独从表单取值......的UI插件(dialog方法),自定义也很强,不过个人感觉很丑,如果有时间建议尝试bootstrap插件,比这个亮潵百倍哄~ oh~yeah,本章搞定ㄟ(▔▽▔)ㄏ

    3.1K40

    jQuery中的常用内容总结(二)

    /delete.json", {"a":"1","b":"2"}, function(d){ 2 if (d.error){ 3 alert("删除出错...上图中 id为p2的dom是用jQuery插入的,然后绑定的一个点击事件和一个鼠标移开事件,当然(•‾̑⌣‾̑•)✧˖°只有在dom存在的时候才会执行绑定的事件,也就是将这两个事件归一(用统一的函数处理这些事件...);当然上图中id为p2的节点是用jQuery插入的(属于未来事件的处理范畴),比较合适的一种方式是用on来进行绑定,如果低版本的jQuery 的话建议也可以使用live()进行绑定( ̄ε  ̄)~ C>...咳咳~,以上5种弹窗,第一种是不可传参的,第五种需要使用jquery_UI.js(jQuery 弹窗插件)且传参需要单独从表单取值......的UI插件(dialog方法),自定义也很强,不过个人感觉很丑,如果有时间建议尝试bootstrap插件,比这个亮潵百倍哄~ oh~yeah,本章搞定ㄟ(▔▽▔)ㄏ

    1.4K30

    jQuery中的常用内容总结(二)

    /delete.json", {"a":"1","b":"2"}, function(d){ 2 if (d.error){ 3 alert("删除出错...上图中 id为p2的dom是用jQuery插入的,然后绑定的一个点击事件和一个鼠标移开事件,当然(•‾̑⌣‾̑•)✧˖°只有在dom存在的时候才会执行绑定的事件,也就是将这两个事件归一(用统一的函数处理这些事件...);当然上图中id为p2的节点是用jQuery插入的(属于未来事件的处理范畴),比较合适的一种方式是用on来进行绑定,如果低版本的jQuery 的话建议也可以使用live()进行绑定( ̄ε  ̄)~ C>...咳咳~,以上5种弹窗,第一种是不可传参的,第五种需要使用jquery_UI.js(jQuery 弹窗插件)且传参需要单独从表单取值......的UI插件(dialog方法),自定义也很强,不过个人感觉很丑,如果有时间建议尝试bootstrap插件,比这个亮潵百倍哄~ oh~yeah,本章搞定ㄟ(▔▽▔)ㄏ

    1.7K110

    jQuery

    jQuery有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件,并且用jQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用...点击每一行的删除按钮删除当前行数据。   作业示例代码: <!...示例:     表格中每一行的编辑和删除按钮都能触发相应的事件。回去完善一下咱们上面的那个作业吧,添加一行数据的那个作业,然后我们在学习一下上面的那些绑定事件。...多用于插件开发者向 jQuery 中添加新函数时使用。     ...);     例子:jQuery的插件都是这样扩展出来的     自定义的jQuery登录验证插件:(自己看看,了解一下就行了)     HTML文件 <!

    9.5K20

    jQuery (二)

    事件处理程序 $('a').unbind('mouseover mouseout'); // 移除两个属性 // 取消绑定在myMod命名空间下的所有mouseover 和mouseout处理程序...$('a').unbind('mouse.myMod mouseout.myMod'); // 取消绑定在myMod命名空间下的所有事件处理程序 $('a').unbind('.myMod'); //...取消同时绑定在ns1和ns2命名空间下的单击处理程序 $('a').unbind('click.ns1.ns2') 使用命名空间达到模块化的目的 // 使用函数名,达到注销事件处理程序 $('#mybutton...插件扩展 插件地址 https://plugins.jquery.com/ ps 这个插件已经停止了,新的插件,使用npm方式安装。...this 插件有两个或者两个以上的选项,使用对象直接传入 不能污染命名空间,请在jquery上定义一个方法即可,如果有多个方法,请直接使用前缀 如果有事件需要绑定,使用插件名作为命名空间,然后放在插件名中

    10.2K30

    JQuery常用命令

    JQuery ①. $('oldChild').replaceWith( newChild ) 已有节点用新节点替换,返回被删除的旧节点 ②....$('事件源').off('事件名称') 取消所有监听函数 on() 的第一种用法有两个限制: ①. 若选中元素很多,每个都会有一个监听函数 ②....JQuery 中的插件函数 Plugin:插件,在现有的功能基础上添加更多的功能,扩展整体的应用。 JQuery 中的插件(即函数)分为两类: (1)....JQuery 全局插件函数 原本要声明的工具函数(如 max()/min())如果声明为全局函数,会造成“全局对象(window)的污染;为了避免污染全局对象,可以把这些函数纳入到 JQuery 对象的名下...JQuery 对象插件函数 JQuery 对象插件函数就是为所有的 jQuery 对象添加的公共函数,用于操作当前选定的 DOM 元素 声明方式:JQuery.fn.max = function( ){

    7K10

    「jQuery」基础 - 03

    ():事件触发 1.2.1 事件处理 on() 绑定事件 因为普通注册事件方法的不足,jQuery又创建了多个新的事件绑定方法bind()、live()、delegate()/on()等,其中最好用的是...jQuery 插件 jQuery 功能比较有限,想要更复杂的特效效果,可以借助于 jQuery 插件完成。...这些插件也是依赖于jQuery来完成的,所以必须要先引入 jQuery文件,因此也称为 jQuery 插件。...jQuery 插件常用的网站: jQuery 插件库 http://www.jq22.com/ jQuery 之家 http://www.htmleaf.com/ jQuery 插件使用步骤: 引入相关文件...(jQuery 文件 和 插件文件) 复制相关html、css、js (调用插件)。 1.4.1. 瀑布流插件(重点讲解) 我们学习的第一个插件是jQuery之家的开源插件,瀑布流。

    3.4K30

    jQuery基础(五)一Ajax应用与常用插件-imooc

    cookie对象保存、读取、删除用户的信息,还能通过cookie插件保存用户的浏览记录,它的调用格式为: 保存:$.cookie(key,value);读取:$.cookie(key),删除:$.cookie...cookie用户名 搜索插件——autocomplete 搜索插件的功能是通过插件的autocomplete()方法与文本框相绑定,当文本框输入字符时,绑定后的插件将返回与字符相近的字符串提示选择,...,提示选择,如下图所示: 右键菜单插件——contextmenu 右键菜单插件可以绑定页面中的任意元素,绑定后,选中元素,点击右键,便通过该插件弹出一个快捷菜单,点击菜单各项名称执行相应操作,调用代码如下...——draggable 拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(...({options}); selector参数为显示弹出对话框的元素,通常为,options参数为方法的配置对象,在对象中可以设置对话框类型、“确定”、“取消”按钮执行的代码等。

    17.8K20

    前端成神之路-03_jQuery

    03 - jQuery 学习目标: 能够说出4种常见的注册事件 能够说出 on 绑定事件的优势 能够说出 jQuery 事件委派的优点以及方式 能够说出绑定事件与解绑事件 能够说出 jQuery...这些插件也是依赖于jQuery来完成的,所以必须要先引入 jQuery文件,因此也称为 jQuery 插件。 ​...jQuery 插件常用的网站: jQuery 插件库 http://www.jq22.com/ jQuery 之家 http://www.htmleaf.com/ jQuery 插件使用步骤: 引入相关文件...(jQuery 文件 和 插件文件) 复制相关html、css、js (调用插件)。 1.4.1. 瀑布流插件(重点讲解) ​ 我们学习的第一个插件是jQuery之家的开源插件,瀑布流。...1.7.5 案例:toDoList 删除操作 // 1.点击里面的a链接,不是删除的li,而是删除本地存储对应的数据。

    3.4K20

    彻底抛弃PeopleEditor,SharePoint中利用Jquery Chosen创建新的人员选择器

    只能另辟蹊径,寻找适合的JQuery插件,创建新的人员选择器,分析了一下需求,可以归纳新的人员选择器必须支持如下情况: 支持人员的多选,比如像会议、通知需要对多人进行发送,当然也要支持删除。...对于单选的人员选择器,可以删除选中的人员。 不管单选还是多选,支持Jquey AutoComplete那样索引功能。...找来找去,发现Jquery Chosen功能十分强大,完全满足我的需求,更多的功能参照Chosen官网: http://harvesthq.github.io/chosen/ 利用Jquery Chosen...进行改造 多选的人员选择器 支持多选,点击X即可取消选中,当然还支持索引,如下所示: ?...总结 Chosen是一个非常强大的 JQuery插件,利用Chosen完全可以让我们抛弃传统的PeopleEditor。

    1.1K80

    WordPress中的jQuery库不起作用的相关问题

    如果仅仅加载WordPress 自带的jQuery 库,在使用一些jQuery 插件的时候明明是代码没有错误,但就是不起作用,该有的效果不能实现;但加载了原版的jQuery 库却又可以了,这样一来却同时加载了两个...jQuery 库。...貌似WordPress 默认是加载自带的jQuery 库的,首先你要取消这个功能,使之在前台默认不加载自带的jQuery 库: 打开/wp-includes/script-loader.php文件,以“...更新:如果查看源代码分享加载了WordPress 自带的jquery 库,那么肯定是主题或者插件加载的(非登录状态下),因此,按照下面的代码可予以取消(其实就开发而言,不建议这么做): 你的主题也可能加载也会加载...如果你想取消,就需要在主题文件中找到如下关键代码,删除或注销之: wp_enqueue_script('jquery'); 当然,既然主题自动加载了,那肯定是有它的用处,如果删除了,一些主题功能可能会失效

    5.4K60
    领券