本文是在阅读了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之链式结构的更多相关文章

  1. JavaScript之链式结构序列化

    一.概述 在JavaScript中,链式模式代码,太多太多,如下: if_else: if(...){ //TODO }else if(...){ //TODO }else{ //TODO } swi ...

  2. 仿jQuery之链式调用

    链式调用的形式其实就是对象调用一连串的方法.为什么能连续调用这么多的方法?因为调用方法返回调用的对象,于是乎就可以一如既往,一往无前地调用下去.链式调用的原理就是在方法中返回执行上下文this,每次调 ...

  3. JavaScript之链式结构序列化1

    一.概述 在JavaScript中,链式模式代码,太多太多,如下: if_else: if(...){ //TODO }else if(...){ //TODO }else{ //TODO } swi ...

  4. jquery之链式调用,层级菜单

    一. 链式调用的含义 jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写: $('#div1') // id为div1的元素 .children('ul ...

  5. jQuery之链式编程

    使用的思想:隐式迭代. <button>快速</button> <button>快速</button> <button>快速</but ...

  6. js代码风格之链式结构

    <div class="box"> <ul class="menu"> <li class="level1"& ...

  7. [C++][数据结构][算法]单链式结构的深拷贝

    深拷贝(deep-copy),区别于浅拷贝,表示复制所有数据,而不是像浅拷贝一般只复制指针.深拷贝的数据不会因原始数据被delete后而消失. 单链式结构可以实现单链表,栈,队列,树等数据结构.掌握了 ...

  8. C语言 队列 链式结构 实现

    一个C语言链式结构实现的队列 mQueue (GCC编译). /** * @brief C语言实现的链式队列 * @author wid * @date 2013-10-31 * * @note 若代 ...

  9. C语言 栈 链式结构 实现

    一个C语言链式结构实现的栈 mStack (GCC编译). /** * @brief C语言实现的链式结构类型的栈 * @author wid * @date 2013-10-30 * * @note ...

随机推荐

  1. 解决maven打包时,会编译特定文件导致文件不可用

    <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-resou ...

  2. Fiddler之打断点

    1..Fiddler可以修改以下请求 --Fiddler设置断点,可以修改HTTP请求头信息,如修改Cookie,User-Agent等 --可以修改请求数据,突破表单限制,提交任意数字,如充值最小1 ...

  3. 大话OSI七层协议

    大白话OSI七层协议 互联网的本质就是一系列的网络协议,这个协议就叫OSI协议(一系列协议),按照功能不同,分工不同,人为的分层七层.实际上这个七层是不存在的.没有这七层的概念,只是人为的划分而已.区 ...

  4. SAS学习笔记21 散点图、条形图

  5. R|批量循环处理同一格式文件-csv,txt,excel

    本文首发于“生信补给站”微信公众号,https://mp.weixin.qq.com/s/8IfMrSr9xc8_1Y2_9Ne6hg 在一个文件夹下有很多字段一致,格式统一的数据文件(csv,txt ...

  6. 扩展kmp入门+比赛模板

    https://wenku.baidu.com/view/8e9ebefb0242a8956bece4b3.html 参考了这个ppt 理解起来还是有点费劲的(还是推荐一下这个课件 里面概念和思路给的 ...

  7. 双重检查加锁机制(并发insert情况下数据重复插入问题的解决方案)

    双重检查加锁机制(并发insert情况下数据重复插入问题的解决方案) c#中单例模式和双重检查锁 转:https://blog.csdn.net/zhongliangtang/article/deta ...

  8. Vibe

    在读研和工作之间徘徊了半年,看着一个个好友工作.保研,生活安排得井井有条,我也是时候收拾心情,整装前进了.既然选择了图像,就一定要好好做下去. 今天开始第一个算法,Vibe. ViBe是一种像素级视频 ...

  9. VBA输入框(InputBox)(六)

    InputBox函数提示用户输入值.当输入值后,如果用户单击确定 按钮或按下键盘上的ENTER 键,InputBox函数将返回文本框中的文本.如果用户单击“取消” 按钮,该函数将返回一个空字符串(&q ...

  10. js移动端回退监听 popstate

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...