jQuery中事件及常用事件总结、jQuery中常见效果、隐式迭代、链式编程、样式操作、动画队列、不同元素绑定同一个事件

jQuery事件：

jQuery中的事件和javascript中的事件基本相似，不同的是jQuery中的事件处理函数写在事件后面的括号中，如：

 <script>$('input').click(function() {alert('hello word');});</script>

jQuery中常见事件：

jQuery中常见效果：

jQuery中常见的效果有：hide()/show()/toggle():隐藏/显示/切换hide()和show()、slideDown()/slideUp()/slideToggle():滑出/滑入/slideDown和slideUp切换，更多如下表：

效果函数	描述	案例
toggle()和slideToggle()	两种方法都有对元素显示和隐藏的作用，toggle控制元素hide和show，slideToggle控制元素slideDown和slideUp，里面传入毫秒数则控制效果的时间	$(‘input’).click(function() {$(“div”).slideToggle();});
show()和hide()	控制元素的显示和隐藏，从左上角开始显示或隐藏，里面传入毫秒数则控制效果的时间	$(‘input’).click(function() {$(“div”).hide(1000);});
slideDown()和slideUp()	控制元素向下显示或向上隐藏，从元素的上边发生变化，里面传入毫秒数则控制效果的时间	$(‘input’).click(function() {$(“div”).slideUp(1000);});
animate(styleObj,speed,easing,fn)	自定义动画，可以出入四个参数，第一个参数是控制元素属性的对象，第二个参数是控制速度的，可省略；第三个是控制运动轨迹的，可省略；第四个参数是一个回调函数，当animate执行完后，回调函数会被调用	$(‘input’).click(function() {$(“div”).animate({height: ‘300px’,width: ‘300px’}, function() {$(“div”).css(‘backgroundColor’, ‘green’);});});
clearQueue()	当有多组动画时，停止当前运动后的动画，即这次动画运动完后，下一动画被停止	$(‘input’).click(function() {$(“div”).animate({width: ‘500px’}, 2000);$(“div”).animate({height: ‘500p’}, 2000);});$(‘button’).click(function() {$(“div”).clearQueue();});
dequeue()	当前动画没有运动完，直接进入下一动画	$(‘input’).click(function() {$(“div”).animate({width: ‘500px’}, 2000);$(“div”).animate({height: ‘500p’}, 2000);});$(‘button’).click(function() {$(“div”).dequeue();});
fadeIn()和fadeOut()	渐变的控制元素的显示和隐藏，可以传入毫秒数控制效果时间	$(‘input’).click(function() {$(“div”).fadeIn()});
fadeTo(speed,opacity,fn)	控制元素的透明度，第一个参数传入毫秒数，表示渐变过程的时间；第二参数表示透明值，第三个参数是回调函数	$(‘button’).click(function() {$(“div”).fadeTo(null, 0.1);});
stop()	暂停当前运动的动画或效果	$(‘button’).click(function() {$(“div”).stop();});

隐式迭代：

隐式迭代：jQuery中遍历内部 DOM 元素（伪数组形式存储）的过程。简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

  $('div').hide();  // 页面中所有的div全部隐藏，不用循环操作

链式编程：

jQuery中允许我们在一条语句中写多个 jQuery 方法在相同的元素上，链式编程可以节省代码量，看起来更优雅美观，如：

 $(this).css('color', 'red').sibling().css('color', 'white');

jQuery 样式操作：

jQuery中常用的样式操作有两种：css() 和设置类样式。

使用CSS操作样式：

jQuery 可以使用 css 方法来修改简单元素样式，css() 多用于样式少时操作，多了则不太方便，常用以下三种形式 :

 // 1.参数只写属性名，则是返回属性值var strSize = $('p').css('fontSize');// 2.  参数是属性名+属性值，中间用逗号分隔，是设置一组样式，属性必须加引号$('div').css('color', 'red');// 3.  参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号连接$('p').css({ "color":"white","font-size":"20px"});

通过设置类名设置样式：

jQuery提供了可以删除添加及删除添加互相转换的方法来操作某个类名，提醒：操作某个类时，其他类不会发生改变(原生javascript中的className会覆盖所有类名)，类名前面不需要加点;设置类样式方法比较适合样式多时操作，可以弥补css()的不足,如：

 // 1.添加类$("div").addClass("hide");// 2.删除类$("div").removeClass("show");// 3.切换类$("div").toggleClass("showHide");

动画队列：

动画一旦触发必将执行完，才可以进入下一动画，这样会发生在连续触发动画时，动画会产生不友好的体验，可以使用jQuery提供的stop()方法来停止当前动画，这样就解决了不友好的体验，如：

 <script>$('button').click(function() {$('div').stop().slideToggle(2000);});</script>

hover事件切换:

jQuery提供了一个新事件 hover() ; 类似 css 中的伪类 :hover ，hover(fn1,fn2)里面传入两个函数做为参数，第一个参数表示鼠标移入某个元素时触发的函数，第二个参数表示鼠标移出某个元素时触发的函数；如果只传入一个函数作为参数，则移出和移入都执行这个函数，如：

 <script>$('div').hover(function() {$('li').hide();}, function() {$('li').show();});</script>

jQuery中不同元素绑定相同事件：

jQuery中on支持给不同元素绑定相同的处理事件,其元素之间仅用逗号隔开即可，如：

$('.btn2,input,a').on('click', function() {$box.toggleClass('fade');
});

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海

jQuery中事件及常用事件总结、jQuery中常见效果、隐式迭代、链式编程、样式操作、动画队列、不同元素绑定同一个事件相关推荐

html绑定多个事件,jquery可以给多个元素绑定同一事件吗？
jquery可以给多个元素绑定同一事件吗?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. jquery可以给多个元素绑定同一事件吗? jquery可以给多 ...
transitionend、change、classList、兼容代码、元素样式属性的操作、-Attribute自定义属性、阻止跳转、元素绑定相同事件、元素解绑事件、事件冒泡、事件三阶段
transitionend过渡监听事件: 过渡监听事件transitionend指的是CSS3中过渡效果执行一次后触发事件处理函数,如下案例: <!DOCTYPE html><htm ...
（2）Echarts图表绑定特殊事件-图表元素绑定选中事件
在上篇文章中,介绍了Echarts关于元素绑定特殊事件需要做的处理和操作.而本文手把手教大家如何在源码中添加自己定义的事件. 需求介绍 :假设有个需求,一个图表有多根y轴,当用户点击某根轴的范围时,需 ...
jQuery —— 元素绑定单击事件（click），但是双击该元素也能触发单击事件，同时会触发两次单击事件的问题
最近做项目遇到一个问题,给元素绑定了单击事件,但是双击该元素时同样会触发单击事件,并且触发两次的问题,网上找了解决办法基本上都是用 clearTimeout .setTimeout 解决,但是效果不是 ...
JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置
日常的网页开发调试工作中,经常需要知道指定的某个网页元素绑定了哪些事件以及绑定代码的位置,下面介绍三种用来跟踪页面中的事件的方法. 1.使用firefox调试我们可以使用firefox的debug工 ...
Visual Event插件----查看html元素绑定的事件与方法的利器
WEB标准提倡结构.表现和行为相分离,现在越来越多采用这种表现和行为的方式,但它也为我们开发调试带来一些问题,网页载入一堆JavaScript,,我们很难搞清楚最后在哪些元素的哪个动作绑定了事件,尤 ...
查看html元素绑定的事件与方法 visual Event 插件
WEB标准提倡结构.表现和行为相分离,现在越来越多采用这种表现和行为的方式,但它也为我们开发调试带来一些问题,网页载入一堆JavaScript,,我们很难搞清楚最后在哪些元素的哪个动作绑定了事件,尤 ...
php框架中数据库模型层原理,简单模拟ThinkPHP框架模型层对数据库的链式操作-Go语言中文社区...
在接口被实例化以后的每个方法中return 类本身就可以达到链式操作. 改善了写多行代码执行一次操作的缺点. 下面请看我的代码,若有疑问,请留言给我. class Instance{ public s ...
Jquery给HTML元素绑定按键事件-回车事件
在做网页的时候,有时是需要js来判断用户的按键来进行操作对应的功能. 本实例已加载jquery.js 1.全局判断按键(按回车) $(document).keypress(function(e) { ...

jQuery中事件及常用事件总结、jQuery中常见效果、隐式迭代、链式编程、样式操作、动画队列、不同元素绑定同一个事件

jQuery中事件及常用事件总结、jQuery中常见效果、隐式迭代、链式编程、样式操作、动画队列、不同元素绑定同一个事件相关推荐

最新文章

热门文章