首页 > 代码库 > 深入了解jQuery之链式结构
深入了解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详细源码
不仅是addClass() 像什么 removeClass() show() hide()......都在结尾存在这么一句: return this
深入了解jQuery之链式结构
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。