zoukankan      html  css  js  c++  java
  • 深入了解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

      

  • 相关阅读:
    岁月
    唯美励志古风
    活着
    走进华夏统一
    使用Fiddler测试WebApi接口
    深入了解正则表达式
    Linux 学习_ssh(secure shell)
    PHP使用mysql扩展操作数据库
    给自己的网站加点情趣,常用的javaScript效果
    三层架构的基础知识
  • 原文地址:https://www.cnblogs.com/yezuhui/p/6863785.html
Copyright © 2011-2022 走看看