深入了解jQuery之链式结构

标签：jquer   lis   .sh   存在   blank   query   详细   current   dcl   

本文是在阅读了Aaron艾伦的jQuery源码解析(地址：http://www.imooc.com/learn/172)后的个人体会以及笔记。在这里感谢艾伦老师深入浅出的讲解！！

1 什么是链式？

先来段代码：

$(‘#level > a‘).click(function(){
            $(this).addClass(‘current‘).next().show().parent().siblings().children(‘a‘).removeClass(‘current‘).next().hide()
        })

　　这段代码的意思是： 当点击id为level中的直属a元素时，将所点击的a元素添加一个current的class，将该a元素的下一个同级元素显示出来，将这个同级元素的
父元素的所有同级元素的标签为a 的子元素移除 current class，将每个a元素的下一个元素隐藏

这么复杂的任务仅仅用了一行代码就完成了，这就是链式的方便性！

2  为什么jQuery能用链式？

　　就拿上面的代码来说吧，$(this).addClass(‘current).next() ,为什么addClass()后面能直接使用next()？一切尽在源码：

jQuery.fn.extend({
    addClass: function( value ) {
        //  省略...
        return this;
    },

　　看到了木有？addClass函数最后的一句：return this 

　　也就是，仅从对象上来说： $(this).addClass(‘current‘) === $(this)

 addClass详细源码

不仅是addClass() 像什么 removeClass()  show() hide()......都在结尾存在这么一句： return this

深入了解jQuery之链式结构

标签：jquer   lis   .sh   存在   blank   query   详细   current   dcl   

原文地址：http://www.cnblogs.com/yezuhui/p/6863785.html