首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

jQuery中on()、bind()、live()、delegate()之间的区别

事件冒泡 当我们点击一个链接时,其触发了链接元素单击事件,该事件则引发任何我们已绑定到该元素单击事件函数执行。...; }); 因此一个单击操作会触发alert函数执行。 ?...click事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先元素,只要是它的某个后代元素单击事件被触发,事件就会传给它。 ? 操纵DOM的语境中,document是根节点。...和.bind()相比的时候有一个好处就是我们不需要在每个元素再去绑定事件,而document绑定一次就可以了。尽管这个不是最快的方式,但是确实是最少浪费的。...优点 这里仅有一次的事件绑定,绑定到document而不像.bind()那样给所有的元素挨个绑定 那些动态添加的elemtns依然可以触发那些早先绑定的事件,因为事件真正的绑定是document

1.2K30

一文深入JQuery

先慢,中间快,最后又慢 linear:动画执行时速度是匀速的 fn:动画完成时执行函数每个元素执行一次。...对象.each(function(index,element){}); index:就是元素集合中的索引 element:就是集合中的每一个元素对象 this:集合中的每一个元素对象 回调函数返回值:...for(元素对象 of 容器对象) 事件绑定 jquery标准的绑定方式 jq对象.事件方法(回调函数); 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。...setTimeout (执行一次定时器) 2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display 3....给开始按钮绑定单击事件 $("#startID").click(function () { // 1.1 定义循环定时器 20毫秒执行一次 startId = setInterval

3.3K30

JQuery最全常用方法指南

每个页面中可以 有很多个函数被加载执行,按照fn的顺序来执行。 bind(type, [data], fn) 为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。...每个对 象,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。 trigger(type, [data]) 每一个匹配的元素触发某类事件。...queue() 取得第一个匹配元素的动画序列的引用(返回一个内容为函数的数组) queue(callback) 每一个匹配元素的事件序列的末尾添加一个可执行函数,作为此元素的事件函数 queue(queue...(fn); //为id为msg的元素单击事件添加函数 同样blur, focus, select, submit事件都可以有着两种调用方法 5、集合处理功能 对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理...p元素的所有事件 $("p").unbind("click") //删除所有p元素单击事件 10、几个实用特效功能 其中toggle()和slidetoggle()方法提供了状态切换功能。

10.9K20

jQuery 事件绑定 和 JavaScript 原生事件绑定

live、delegate 不多用,Jquery1.7中已经移除,这里不多说 重点介绍 bind、on bind(event,[data],function) bind 是使用频率较高的一种,作用就是选择到的元素绑定特定事件类型的监听函数...("click",myFun); on(event,childSelector,data,function) on() 方法在被选元素及子元素添加一个或多个事件处理程序。...提示:如需添加运行一次的事件然后移除,请使用 one() 方法。 event:必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值,也可以是数组。必须是有效的事件。...规定只能添加到指定的子元素的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。  data:可选。规定传递到函数的额外数据。 function:可选。...原生的事件绑定,可以发现执行了最后一个相同的绑定事件,后面绑定的事件处理函数覆盖了前面的事件处理函数

5.6K20

JS DOM学习笔记

method函数,和setInterval的区别是setTimeout执行一次,setInterval可以不断的执行无数次 6、onload(页面加载后触发):网页加载完毕时触发,浏览器是一边下载文档...、一边解析执行,可能会出现JavaScript执行时需要操作某个元素,这个元素还没有加载,如果这样就要把操作的代码放到body的onload事件中,或者可以把JavaScript放到元素之后。...,IE中使用srcElement; FireFox里使用target 使用Dom获取和更改网页标签元素内文本,IE中使用innerText; FireFox里使用textContent 动态为网页或元素绑定事件...,IE中绑定事件的方法是attachEvent; FireFox中绑定事件的方法是addEventListener jQuery之类的框架进行了封装,解决了不同浏览器Dom的不同 14、jQuery...的ready和Dom的onload的区别:window.onload只能注册一次,是在所有的Dom元素创建完毕、图片、CSS都加载完毕后才被触发;而jQuery的ready则是Dom元素创建完毕后被触发

4K40

Web阶段:第五章:JQuery

每个元素 $checkedObjs.each(function(){ //jquery对象的each遍历的function...:页面所有资源加载完后执行,如果有多个定义则执行最后一个2、(function(){}):Dom节点创建完成后执行,如果有多个定义则依次执行可以看出(function(){})window.onload...window.onload只可以使用一次 $(function(){})可以使用多次 原生js只会执行最后一次的赋值函数。...而jquery的页面加载完成之后,会把所有注册了函数都按照注册的顺序,依次全部执行。 事件 **click()** 绑定单击事件。触发单击事件 **mouseover()** 绑定鼠标移入事件。...//给元素绑定事件 //jquery对象.事件方法(回调函数(){ 触发事件执行的代码 }).事件方法(回调函数(){ 触发事件执行的代码 }).事件方法(回调函数

26.1K20

第51次文章:JQuery高级

:先慢 中间快,最后又慢 linear:动画执行时速度是匀速的 fn:动画完成时执行函数每个元素执行一次。...当单击jq对象对应的组件后,会执行fn1,第二次单击执行fn2..... 【注意】1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。...setTimeout(执行一次定时器) 分析发现JQuery的显示和隐藏动画效果其实就是控制display属性值 使用 show/hide方法来完成广告的显示 (3)代码实现 <!...方法 3秒后执行一次 setTimeout(adShow,3000);//3秒后显示广告 //定义定时器,调用adHide方法 8秒后执行一次...插件,插件里面定义了两个方法,分别是check()和uncheck(),然后再给两个单击按钮绑定不同的方法事件。

3.6K30

jQuery:详解jQuery中的事件(二)

当鼠标移动到元素时,会触发指定的第一个函数(enter);当鼠标移出这个元素时,会触发指定的第二个函数(leave)。   ....);   toggle()方法用于模拟鼠标连续单击事件。每次单击元素,依次触发指定的相应的函数,直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。   ...那么单击元素A的时候,会依次触发三个click事件;单击元素B的时候,会依次触发两个click事件。   ...这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后,事件对象就被销毁。  停止事件冒泡:停止事件冒泡可以阻止事件中其他对象的事件处理函数执行。...显然移除元素的所有事件是使用没有第二个参数的unbind()方法。   如果没有第一个参数,则移除所有绑定的事件;否则删除该类型的事件。

2.2K30

第79天:jQuery事件总结(二)

当鼠标移动到元素时,会触发指定的第一个函数(enter);当鼠标移出这个元素时,会触发指定的第二个函数(leave)。   ....); toggle()方法用于模拟鼠标连续单击事件。每次单击元素,依次触发指定的相应的函数,直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。   ...那么单击元素A的时候,会依次触发三个click事件;单击元素B的时候,会依次触发两个click事件。   ...这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后,事件对象就被销毁。  2、停止事件冒泡:停止事件冒泡可以阻止事件中其他对象的事件处理函数执行。...显然移除元素的所有事件是使用没有第二个参数的unbind()方法。   如果没有第一个参数,则移除所有绑定的事件;否则删除该类型的事件。

1.6K20

jquery对象和dom对象的相互转换

;   //如果存在(不存在)就删除(添加)名称为select的class 9、完善的事件处理功能 Jquery已经为我们提供了各种事件处理方法,我们无需html元素直接写事件,而可以直接为通过jquery...当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。 //当鼠标放在表格的某行时将class置为over,离开时置为out。...addClass("selected");    },function(){ $(this).removeClass("selected");  }); (4)trigger(eventtype): 每一个匹配的元素触发某类事件...p元素的所有事件 $("p").unbind("click")   //删除所有p元素单击事件 10、几个实用特效功能 其中toggle()和slidetoggle()方法提供了状态切换功能。...如检测是否ie:$.browser.isie,是ie浏览器则返回true。 $.each(obj, fn):通用的迭代函数。可用于近似地迭代对象和数组 (代替循环)。

3.2K40

JavaWeb——JQuery之高级操作应用及实践案例总结(动画、遍历、事件绑定)

"fast"、"normal"、"slow")或表示动画时长的毫秒值; 2)easing:用来指定切换效果,默认是"swing",效果是先慢,中间快,最后又慢;参数"linear",匀速; 3)fn:动画完成时执行函数...,每个元素执行一次。...2 JQuery遍历 js的遍历方式是使用for循环,JQuery提供了三种遍历方式: 1)JQuery对象.each(callback):回调函数中的参数 index(索引) element(元素对象...解除绑定:JQuery对象.on("事件名称",回调函数)、JQuery对象.off("事件名称");注意:若off方法不传递任何参数,则会将组件所有的事件解除; 3)事件切换toggle:JQuery...,当点击对应组件时,会执行fn1,再次点击会执行fn2...,若只有2个,则循环执行。注意:JQuery1.9后该功能删除了,要使用的话引入jquery-migrate-1.0.0.js插件。

9.4K20

jQuery (二)

使用jQuery处理事件 事件处理 一个栗子,单击p时背景变成灰色 由于es6的箭头函数不支持this的绑定,所以无法使用箭头函数,只能使用匿名函数 html <!...; // 触发没有命名空间的单击处理程序 或者如下 // 单击一将会触发二的事件 $('#button1').click((e) => {$('#button2').trigger('button2'.../ 自定义事件 一个栗子,实现发布订阅模型,先全体元素广播一个事件,单击一个按钮的时候 $('#logoff').click(() => { $.event.trigger('logoff')...动画异步好坑,动画实际是通过定时器来完成的,由于定时器是一段段的执行,所以动画为异步操作,先执行返回,动画等待某个时刻进行执行。返回的结果,并不一定执行完毕。返回的结果,并不是执行完毕。...,top接受两个可选的参数,如果第一个为true将会清楚当前队列,否则队列将不会被清除,第二个为是否保留当前值,如果未true将会变化到终值,如果为false将会保持当前值,然后开始执行动画 // 当属性悬浮在图片

9.3K30

Jquery 使用技巧总结

value值设为test $("#msg").click(); //触发id为msg的元素单击事件 $("#msg").click(fn); //为id为msg的元素单击事件添加函数...//如果存在(不存在)就删除(添加)名称为select的class 9、完善的事件处理功能 Jquery已经为我们提供了各种事件处理方法,我们无需html元素直接写事件,而可以直接为通过jquery...当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。 //当鼠标放在表格的某行时将class置为over,离开时置为out。...例如: $("p").bind("click", function(){alert($(this).text());}); //为每个p元素添加单击事件 $("p").unbind();...//删除所有p元素的所有事件 $("p").unbind("click") //删除所有p元素单击事件 10、几个实用特效功能 其中toggle()和slidetoggle

2.8K20
领券