jquery学习链式操作

如果不使用链式操作，需要用两条语句才能完成上面的任务：关于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函数。