深入了解jQuery之链式结构
本文是在阅读了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() 像什么 removeClass() show() hide()......都在结尾存在这么一句: return this
深入了解jQuery之链式结构的更多相关文章
- JavaScript之链式结构序列化
一.概述 在JavaScript中,链式模式代码,太多太多,如下: if_else: if(...){ //TODO }else if(...){ //TODO }else{ //TODO } swi ...
- 仿jQuery之链式调用
链式调用的形式其实就是对象调用一连串的方法.为什么能连续调用这么多的方法?因为调用方法返回调用的对象,于是乎就可以一如既往,一往无前地调用下去.链式调用的原理就是在方法中返回执行上下文this,每次调 ...
- JavaScript之链式结构序列化1
一.概述 在JavaScript中,链式模式代码,太多太多,如下: if_else: if(...){ //TODO }else if(...){ //TODO }else{ //TODO } swi ...
- jquery之链式调用,层级菜单
一. 链式调用的含义 jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写: $('#div1') // id为div1的元素 .children('ul ...
- jQuery之链式编程
使用的思想:隐式迭代. <button>快速</button> <button>快速</button> <button>快速</but ...
- js代码风格之链式结构
<div class="box"> <ul class="menu"> <li class="level1"& ...
- [C++][数据结构][算法]单链式结构的深拷贝
深拷贝(deep-copy),区别于浅拷贝,表示复制所有数据,而不是像浅拷贝一般只复制指针.深拷贝的数据不会因原始数据被delete后而消失. 单链式结构可以实现单链表,栈,队列,树等数据结构.掌握了 ...
- C语言 队列 链式结构 实现
一个C语言链式结构实现的队列 mQueue (GCC编译). /** * @brief C语言实现的链式队列 * @author wid * @date 2013-10-31 * * @note 若代 ...
- C语言 栈 链式结构 实现
一个C语言链式结构实现的栈 mStack (GCC编译). /** * @brief C语言实现的链式结构类型的栈 * @author wid * @date 2013-10-30 * * @note ...
随机推荐
- 解决maven打包时,会编译特定文件导致文件不可用
<plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-resou ...
- Fiddler之打断点
1..Fiddler可以修改以下请求 --Fiddler设置断点,可以修改HTTP请求头信息,如修改Cookie,User-Agent等 --可以修改请求数据,突破表单限制,提交任意数字,如充值最小1 ...
- 大话OSI七层协议
大白话OSI七层协议 互联网的本质就是一系列的网络协议,这个协议就叫OSI协议(一系列协议),按照功能不同,分工不同,人为的分层七层.实际上这个七层是不存在的.没有这七层的概念,只是人为的划分而已.区 ...
- SAS学习笔记21 散点图、条形图
- R|批量循环处理同一格式文件-csv,txt,excel
本文首发于“生信补给站”微信公众号,https://mp.weixin.qq.com/s/8IfMrSr9xc8_1Y2_9Ne6hg 在一个文件夹下有很多字段一致,格式统一的数据文件(csv,txt ...
- 扩展kmp入门+比赛模板
https://wenku.baidu.com/view/8e9ebefb0242a8956bece4b3.html 参考了这个ppt 理解起来还是有点费劲的(还是推荐一下这个课件 里面概念和思路给的 ...
- 双重检查加锁机制(并发insert情况下数据重复插入问题的解决方案)
双重检查加锁机制(并发insert情况下数据重复插入问题的解决方案) c#中单例模式和双重检查锁 转:https://blog.csdn.net/zhongliangtang/article/deta ...
- Vibe
在读研和工作之间徘徊了半年,看着一个个好友工作.保研,生活安排得井井有条,我也是时候收拾心情,整装前进了.既然选择了图像,就一定要好好做下去. 今天开始第一个算法,Vibe. ViBe是一种像素级视频 ...
- VBA输入框(InputBox)(六)
InputBox函数提示用户输入值.当输入值后,如果用户单击确定 按钮或按下键盘上的ENTER 键,InputBox函数将返回文本框中的文本.如果用户单击“取消” 按钮,该函数将返回一个空字符串(&q ...
- js移动端回退监听 popstate
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...