如果不使用链式操作,需要用两条语句才能完成上面的任务:关于jQuery链式操作,简单说:好的代码会带来速度的提升。快速渲染和响应意味着更好的用户体验。那么jQuery链式操作就能实现该目的,下面就来讲讲jQuery的链式操作,很多时候我们写代码的时候会这样去写:
代码:$("p").on({
mouseover:function(){
$(this).addClass("soso")}),
mouseout:function(){
$(this).removeClass("soso")});
如果不使用链式操作,需要用两个事件的操作onmouseover,mouseout才能完成任务。这样的写法代码量大,非常影响性能。有没有更为简便的方法去写代码呢? 答案就在jQuery链式操作,这是个非常好的减少代码的书写方式,也去优化了性能方面的问题。
代码:$("p").mouseover(function(){
$(this).addClass("soso")}).mouseout(function(){$(this).removeClass("soso")});
这样的方式简单明了,一行代码解决,好的代码就是这样的产生的。
对于jquery中的一些操作,如执行完mouseover或者mouseout等方法后,都会返回当前的对象,所以可以进行链式操作, 及不用 再去写函数名了,直接在上一个方法后面接上下一个方法。
在一个较短的链式操作中,往往语句比较清晰,可以分步骤地对jQuery对象实现各种操作。但是链式操作不应该太长,否则会造成语句难以理解,因为要查看jQuery对象当前的状态并不是容易的事,尤其如果涉及jQuery对象中元素的增删操作是更加难以判断。并不是所有的jQuery函数都可以使用链式操作。这与链式操作的原理有关,之所以可以实现链式操作是因为其中的每个函数返回的都是jQuery对象本身。在jQuery类库的内部实现中,虽然很多的函数都返回jQuery对象本身,但都是通过调用内部有限的几个函数实现的,比如attr()函数设置属性石,实际上最后调用了”jQuery.each(object,callback,args)”方法。注意此方法不是jQuery对象方法,jQuery对象方法也有一个each()函数,为”jQuery.fn.each(callback,args)”,此函数最后同样调用jQuery.each函数。