使用jQuery处理事件 事件处理 一个栗子,单击p时背景变成灰色 由于es6的箭头函数不支持this的绑定,所以无法使用箭头函数,只能使用匿名函数 html 在调用最后一个处理函数的时候,会将第二个值作为对象的data属性,这样即可避免使用闭包操作 ps jquery 中所有的处理程序都有一个函数 例如 hover() mouseenter...> { $('span').fadeIn(100); }); return false; }) 当发生click事件的时候,会先回调click内的事件,发生动画,在等待3000秒的时候,继续回调下一个函数...回调 context 指定回调函数时的上下文对象,即this beforeSend 指定发送ajax请求指定激活的函数 success 指定ajax请求成功后的回调函数 error 指定ajax请求失败后的回调函数...,在图片仍旧继续下载的时候,使用相应的时间,提示出图片正在加载中 例如 $('#loading_animation').bind({ ajaxStart: function() {$(this)
先慢,中间快,最后又慢 * linear:动画执行时速度是匀速的 3. fn:在动画完成时执行的函数,每个元素执行一次...事件绑定 1. jquery标准的绑定方式 * jq对象.事件方法(回调函数); * 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。...) * 当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2........使用 show/hide方法来完成广告的显示 */ //入口函数,在页面加载完成之后,定义定时器,调用这两个方法 $(function () {...//定义定时器,调用adShow方法 3秒后执行一次 setTimeout(adShow, 3000); //定义定时器,调用adHide方法,8秒后执行一次
先慢,中间快,最后又慢 linear:动画执行时速度是匀速的 fn:在动画完成时执行的函数,每个元素执行一次。...对象.each(function(index,element){}); index:就是元素在集合中的索引 element:就是集合中的每一个元素对象 this:集合中的每一个元素对象 回调函数返回值:...false:如果当前function返回为true,则结束本次循环,继续下次循环(continue) $.each(object, [callback]) for…of: jquery 3.0 版本之后提供的方式...事件切换:toggle jq对象.toggle(fn1,fn2…) 当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2… 注意:1.9版本 .toggle() 方法删除,jQuery...方法 3秒后执行一次 setTimeout(adShow,3000); //定义定时器,调用adHide方法,8秒后执行一次 setTimeout(adHide,8000);
更好的性能优化,以及防止出现不必要的错误。...事件冒泡 当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。...; }); 因此一个单击操作会触发alert函数的执行。 ?...,适合处理多个事件调用同一函数情况; 大括号替代方式:绑定较为灵活,可以给事件单独绑定函数; data 可选;需要传递的参数; function 必需项;当绑定事件发生时,需要执行的函数;适用所有版本...它会绑定事件到所有的选出来的元素上 它不会绑定到在它执行完后动态添加的那些元素上 当元素很多时,会出现效率问题 当页面加载完的时候,你才可以进行bind(),所以可能产生效率问题 2 .live()
先慢,中间快,最后又慢 * linear:动画执行时速度是匀速的 3. fn:在动画完成时执行的函数,每个元素执行一次。...* false:如果当前function返回为true,则结束本次循环,继续下次循环(continue) 2. $.each(object, [callback]) 3. for..of: jquery...事件绑定 1. jquery标准的绑定方式 * jq对象.事件方法(回调函数); * 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。...) * 当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2........使用 show/hide方法来完成广告的显示 */ //入口函数,在页面加载完成之后,定义定时器,调用这两个方法 $(function
:先慢 中间快,最后又慢 linear:动画执行时速度是匀速的 fn:在动画完成时执行的函数,每个元素执行一次。...element) { //3.1获取li对象 第一种方式this // alert(this.innerHTML) //3.2获取li对象 第二种方式 在回调函数中定义参数...当单击jq对象对应的组件后,会执行fn1,第二次单击会执行fn2..... 【注意】1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。...方法 3秒后执行一次 setTimeout(adShow,3000);//3秒后显示广告 //定义定时器,调用adHide方法 8秒后执行一次...插件,在插件里面定义了两个方法,分别是check()和uncheck(),然后再给两个单击按钮绑定不同的方法事件。
哈喽大家好,本次是jQuery案例练习系列第三期 ⭐本期是jQuery动画——显示与隐藏效果 系列专栏:前端案例练习 笔者还是前端的菜鸟,还请大家多多指教呀~ 欢迎大佬指正,一起学习,...fn:在动画完成时执行的函数。 实现效果 当点击“显示”,则div中的内容会显示,并弹出提示框,点击“隐藏”则隐藏内容,弹出提示框,点击“切换”,则会在二者之间切换。...部分 思路: 1、引入jQuery,如图 2、添加ready函数,ready是jQuery的文档就绪函数,它用于防止文档在完全加载之前允许jQuery代码,如果在文档没有完全加载之前就运行函数...,操作可能失败; 3、给三个按钮添加点击事件,这里用到筛选选择器eq; 4、实现单击显示按钮,控制div元素的显示(show),并弹出提示框(alert); 5、实现单击隐藏按钮,控制div元素的隐藏...(hide),并弹出提示框; 6、实现单击切换按钮,控制元素显示与隐藏切换(toggle)。
"fast"、"normal"、"slow")或表示动画时长的毫秒值; 2)easing:用来指定切换效果,默认是"swing",效果是先慢,中间快,最后又慢;参数"linear",匀速; 3)fn:在动画完成时执行的函数...2 JQuery遍历 js的遍历方式是使用for循环,JQuery提供了三种遍历方式: 1)JQuery对象.each(callback):回调函数中的参数 index(索引) element(元素对象...this.innerHTML); //alert($(this).html()); //3.2 获取li对象 第二种方式 在回调函数中定义参数...事件绑定 JQuery事件绑定方式包括: 1)JQuery标准的绑定方式:JQuery对象.事件方法(回调函数);注意:如果调用事件方法,不传递回调参数,会触发浏览器默认行为; 2)on绑定事件、off...,当点击对应组件时,会执行fn1,再次点击会执行fn2...,若只有2个,则循环执行。注意:JQuery1.9后该功能删除了,要使用的话引入jquery-migrate-1.0.0.js插件。
事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁 4 jQuery事件对象的作用 li都有一个共同的父元素,而且所有的事件都是一致的...可以确定元素在当前页面的坐标值,鼠标相对于文档的左边缘的位置(左边)与 (顶边)的距离,简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 7 event.preventDefault()阻止默认行为,在执行这个方法后...浏览器不会跳转到新的 URL 去,可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了 8 event.stopPropagation()阻止事件冒泡,为防止事件冒泡到...DOM树上,也就是不触发的任何前辈元素上的事件处理函数 9 event.which获取在鼠标单击时,单击的是鼠标的哪个键 10 event.which 将 event.keyCode 和...this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素 13 .this和event.target都是dom对象,使用jquey中的方法可以将他们转换为jquery
选择符与遍历 (): 函数接受css选择符作为参数,充当一个工厂函数,返回对应元素的JQuery对象。...mouseout mouseover mouseup resize scroll select submit unload toggle(func1, func2): 单击时轮流执行...JQuery采取事件冒泡的策略。 事件对象:事件发生时执行的函数可以把事件对象作为参数。...有两种传入参数的方式: ({“attr”: “value”, “attr”, “value}, speed, easing, func):第一个参数是css属性,第二个是速度,第三个是缓动,第四个是动画完成后的回调函数...为每个效果方法都提供了回调函数,可以用来让多个JQuery对象的动画排队执行。
先慢,中间快,最后又慢 linear:动画执行时速度是匀速的 fn:在动画完成时执行的函数,每个元素执行一次。...jq的遍历方式 jq对象.each(callback) 语法: jquery对象.each(function(index,element){}); index:就是元素在集合中的索引 element:就是集合中的每一个元素对象...false:如果当前function返回为true,则结束本次循环,继续下次循环(continue) $.each(object, [callback]),object为需要遍历的jq对象,回调方法中的参数与...标准的绑定方式 jq对象.事件方法(回调函数); 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。...当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2..... 注意:1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。
1.所谓的冒泡其实实质就是事件执行中的顺序。防止冒泡的发生:除了使用stopPropagation()方法阻止事件的冒泡过程外,还可以通过语句return false实现停止事件的冒泡过程。 2....在jQuery脚本加载到页面时,会设置一个isReady的标记,用于监听页面加载的进度。...PS:ready()其在页面框架下载完毕后就执行 3....可以使元素在鼠标悬停与鼠标移除的事件中进行切换,可使用jQuery中的mouseenter与mouseleave进行替换。...通过函数设置的前后顺序进行调用。
浏览器在加载显示一个网页时,会对页面html代码解析,并在内存中创建一个描述该页面的模型(树形结构)。...基础一 概念 1.1 jQuery 是一个javascript类库,通过jquery可以选取HTML元素,并对它们执行操作。...$(document).readY(function(){ }); 为了防止在文档加载完成前就运行jqury代码 1.5 jquery 选择器 1.5.1 元素选择器 $("p...事件 $(document).ready(function) #文档就绪事件 $(selector).click(function) #单击事件 $(selecto).dblclick...callback); # URL 必选,指定需要加载的URL # 可选,与请求一同发送的查询字符串键值对 # 可选,load()方法完成后执行的函数
1.执行时机 (document).ready()和window.onload虽然很相似,但是它们在执行时机方面是有区别的。...()事件中绑定了两个函数,这两个函数都正常执行,而不是第二个函数覆盖第一个函数 3.简写形式 由于ready()事件使用频繁,jQuery提供了一种简写方式。...在jQuery中,事件对象通常作为匿名函数的参数使用,语法如下所示: jQuery对象 ....图5.1.10 hover事件 5.3.2 toggle事件 该事件用于模拟鼠标的连续单击事件,第1次单击时触发第1个函数的执行;第2次单击时触发第2个函数的执行;第n次单击时触发第n个函数的执行...把bind换成live后,表格中的任何一行在单击时都可以改变背景色,包括动态创建的行。
1.执行时机 (document).ready()和window.onload虽然很相似,但是它们在执行时机方面是有区别的。...()事件中绑定了两个函数,这两个函数都正常执行,而不是第二个函数覆盖第一个函数 3.简写形式 由于ready()事件使用频繁,jQuery提供了一种简写方式。...在jQuery中,事件对象通常作为匿名函数的参数使用,语法如下所示: jQuery对象 ....图5.1.10 hover事件 5.3.2 toggle事件 该事件用于模拟鼠标的连续单击事件,第1次单击时触发第1个函数的执行;第2次单击时触发第2个函数的执行;第n次单击时触发第n个函数的执行。...把bind换成live后,表格中的任何一行在单击时都可以改变背景色,包括动态创建的行。
只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。 ...每次单击元素,依次触发指定的相应的函数,直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。 ...那么在单击子元素A的时候,会依次触发三个click事件;单击元素B的时候,会依次触发两个click事件。 ...这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后,事件对象就被销毁。 停止事件冒泡:停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。...在jQuery中提供了stopPropagation()方法来停止事件冒泡。
只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。 ...每次单击元素,依次触发指定的相应的函数,直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。 ...那么在单击子元素A的时候,会依次触发三个click事件;单击元素B的时候,会依次触发两个click事件。 ...这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后,事件对象就被销毁。 2、停止事件冒泡:停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。...在jQuery中提供了stopPropagation()方法来停止事件冒泡。
一、jQuery中的事件 1、加载DOM: 执行时机:在常规的JavaScript中,通常使用window.onload方法,而在jQuery中,使用的是$(document).ready()方法...,通过使用此方法,可以在DOM载入就绪时就对其进行操纵兵调用执行它所绑定的函数。 ...如果处理函数绑定给window对象,则会在所有的内容(包括窗口、框架、对象和图像等)加载完毕后触发,出国处理函数绑定在元素上,则会在元素的内容加载完毕后触发。 ...第三个参数则是用来绑定的处理函数。举个实际的例子,下面网页中,单击“标题”链接将显示内容。 ...明天继续完成jQuery事件的下半部分,包括的内容有合成事件、事件冒泡、移除事件等内容。
看如下实例: (1)把单击事件处理程序注册到一个锚元素,而不是一个外层的上,那么就要面对另外一个问题:当用户单击链接时,浏览器会加载一个新页面。...(2)当用户在编辑完表单后按下回车键时,会触发表单的submit事件,在此事件发生后,表单提交才会真正发生。 这种行为与我们讨论的事件处理程序不是同一个概念,它是单击标签元素的默认操作。...如果我们不希望执行这种默认操作,那么在事件对象上调用.stopPropagation()方法也无济于事,因为默认操作不是在正常的事件传播流中发生的。...的话则既阻止默认行为又防止对象冒泡。...e.preventDefault(); //阻止默认浏览器动作(W3C) }else { window.event.returnValue = false; //IE中阻止函数器默认动作的方式
在jquery框架的使用中,难免会遇到按钮或文本框等各种各样的要求要进行相应事件的绑定操作,进行事件的绑定能够增加页面的交互效果,相信在html和js中进行事件的绑定大家都不陌生,那么今天我就来和小伙伴们分享一下利用...一、 jquery标准的绑定方式 Jquery框架的标准绑定的语法是: jq对象.事件方法(回调函数); 如: Jquery对象.cilck();点击事件 Jquery对象.mouseover();鼠标移入时触发...的on()方法可以将的一个事件绑定到jquery对象上, 语法格式如下: jq对象.on("事件名称",回调函数) 利用jquery的off()方法可以将的一个事件从jquery对象上解绑。...当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2…依次执行下去,当执行完之后会重新从第一个事件开始执行。...之后继续和大家分享应用jquery框架的实战案例! 我是灰小猿!我们下期见!