深刻了解jQuery之链式结构

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

1 什么是链式?

先来段代码:ide

$('#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元素的下一个元素隐藏函数

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

2  为何jQuery能用链式?

  就拿上面的代码来讲吧,$(this).addClass('current).next() ,为何addClass()后面能直接使用next()?一切尽在源码:对象

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

  看到了木有?addClass函数最后的一句:return this rem

  也就是,仅从对象上来讲: $(this).addClass('current') === $(this)get

 addClass详细源码

不只是addClass() 像什么 removeClass()  show() hide()......都在结尾存在这么一句: return this源码

相关文章
相关标签/搜索