最近比较闲,寻思着学习下jQuery源码,看了好多博客,很多都讲的比较详细。jQuery虽然只有那么200多K,但内容却比较丰富,对于我这样一个js菜鸟,看起来相当吃力。骨头太大,只能化整为零,从简单的小块开始。

    今天看了下class系列的方法,贴下来!可能网上已经有很多,就当做自己记录笔记吧,请勿喷饭!

//添加类addClass: function( value ) {var classNames, i, l, elem,setClass, c, cl;//如果value是一个函数,则调用这个函数得到运算结果,然后再递归调用addClassif ( jQuery.isFunction( value ) ) {return this.each(function( j ) {jQuery( this ).addClass( value.call(this, j, this.className) );});}if ( value && typeof value === "string" ) {//得到传入的class数组classNames = value.split( core_rspace );//this表示调用此方法的jQuery对象,可能有多个for ( i = 0, l = this.length; i < l; i++ ) {elem = this[ i ];//元素类型节点类型:元素element 1;属性attr 2;文本text 3;注释comments 8;文档document 9        //如果是元素节点        if ( elem.nodeType === 1 ) {//如果元素没有class并且classNames数组只有一个元素,则直接赋值if ( !elem.className && classNames.length === 1 ) {elem.className = value;} else {setClass = " " + elem.className + " ";//循环添加要加入的classfor ( c = 0, cl = classNames.length; c < cl; c++ ) {if ( setClass.indexOf( " " + classNames[ c ] + " " ) < 0 ) {setClass += classNames[ c ] + " ";}}elem.className = jQuery.trim( setClass );}}}}//返回获取的jQuery对象return this;},

//删除指定的类removeClass: function( value ) {var removes, className, elem, c, cl, i, l;if ( jQuery.isFunction( value ) ) {return this.each(function( j ) {jQuery( this ).removeClass( value.call(this, j, this.className) );});}if ( (value && typeof value === "string") || value === undefined ) {removes = ( value || "" ).split( core_rspace );for ( i = 0, l = this.length; i < l; i++ ) {elem = this[ i ];if ( elem.nodeType === 1 && elem.className ) {//获取当前元素的class(用空格替换制表符或回车符、换行符)className = (" " + elem.className + " ").replace( rclass, " " );// loop over each item in the removal listfor ( c = 0, cl = removes.length; c < cl; c++ ) {// Remove until there is nothing to remove,while ( className.indexOf(" " + removes[ c ] + " ") >= 0 ) {className = className.replace( " " + removes[ c ] + " " , " " );}}//如果value为空,则直接去掉元素的所有class;否则使用处理后的classNameelem.className = value ? jQuery.trim( className ) : "";}}}//大部分方法都是返回this,遍于进行链式操作return this;},

//如果没有class则添加,如果有则删除//如果stateVal设置为true,则添加样式;如果为false,则删除样式toggleClass: function( value, stateVal ) {var type = typeof value,//判断stateVal是否为boolean类型isBool = typeof stateVal === "boolean";//value为function时递归调用if ( jQuery.isFunction( value ) ) {return this.each(function( i ) {jQuery( this ).toggleClass( value.call(this, i, this.className, stateVal), stateVal );});}return this.each(function() {if ( type === "string" ) {// toggle individual class namesvar className,i = 0,self = jQuery( this ),state = stateVal,classNames = value.split( core_rspace );//如果className[ i++ ] 存在while ( (className = classNames[ i++ ]) ) {// check each className given, space separated list//如果第二个参数是boolean类型,则将第二个参数赋值给state;//否则判断当前jQuery对象是否拥有className这个类,将判断结果取反,赋值给statestate = isBool ? state : !self.hasClass( className );//如果state为true,则将className赋值给self['addClass'];//如果state为false,则将className赋值为self['removeClass'],这里的self就是当前jQuery对象self[ state ? "addClass" : "removeClass" ]( className );}} else if ( type === "undefined" || type === "boolean" ) {if ( this.className ) {// store className if setjQuery._data( this, "__className__", this.className );}// toggle whole className//如果className为空或者value为false,则直接清空对象的class;//否则将保存的_className赋值给当前对象的classNamethis.className = this.className || value === false ? "" : jQuery._data( this, "__className__" ) || "";}});},

//判断某个对象(或一个对象集中的第一个对象)是否拥有某个classhasClass: function( selector ) {var className = " " + selector + " ",i = 0,l = this.length;for ( ; i < l; i++ ) {if ( this[i].nodeType === 1 && (" " + this[i].className + " ").replace(rclass, " ").indexOf( className ) >= 0 ) {return true;}}return false;},

转载于:https://www.cnblogs.com/peislin/archive/2012/12/20/2826371.html

jQuery源码学习(1)——addClass相关推荐

  1. jQuery源码学习之Callbacks

    jQuery源码学习之Callbacks jQuery的ajax.deferred通过回调实现异步,其实现核心是Callbacks. 使用方法 使用首先要先新建一个实例对象.创建时可以传入参数flag ...

  2. jquery源码学习笔记三:jQuery工厂剖析

    jquery源码学习笔记二:jQuery工厂 jquery源码学习笔记一:总体结构 上两篇说过,query的核心是一个jQuery工厂.其代码如下 function( window, noGlobal ...

  3. jquery源码学习笔记一:总体结构

    练武不练功,到老一场空.计算机也一样. 计算机的功,就是原理.如果程序员只会使用各种函数,各种框架,而不知其原理,顶多熟练工人而已.知其然,更要知其所以然. jquery我们用得很爽,但它究竟咋实现的 ...

  4. jQuery源码学习

    $.jQuery是什么? 平时天天在用的$到底是个什么东西?$("id")思考,感觉像个工厂方法.提供selector创建jquery对象. 一看源码绕晕了,剥茧抽丝吧 定义jqu ...

  5. jQuery源码学习第二天--jQuery的extend扩展

    Jquery中的extend扩展 一.看下常见的extend扩展: 1: jQuery.extend({ 2: noConflict: function( deep ) { 3: if ( windo ...

  6. jQuery源码学习(6)-Sizzle选择器(2)

    1.CSS选择器的位置关系: 四种关系:"+" 紧挨着的兄弟关系:">" 父子关系:" " 祖先关系:"~" 之后 ...

  7. jQuery源码学习(5)-Sizzle选择器(1)

    1.常见的选择器: #test表示id为test的DOM节点 .aaron 表示class为aaron的DOM节点 nav>li 表示在nav内部子li的样式,而不是所有的后代元素,只是往下一层 ...

  8. 通过jQuery源码学习javascript(三)

    序 承接上两篇继续写下去.我尽量把我明白的地方给大家说清楚.有些大家的提问我也有点搞不明白,如果有人能解答,再好不过了. 疑问 第一篇中有位博友提出了以下的问题,我也不太明白,如果有明白的,能否告知一 ...

  9. jQuery源码学习视频

    为什么80%的码农都做不了架构师?>>>    http://bbs.miaov.com/forum.php?mod=viewthread&tid=7385&extr ...

最新文章

  1. 程序还没写完只能当然计算器用,先发过来用着后面的慢慢写
  2. 使用Postman测试导入和导出excel
  3. JAVA(利用jsp+javabean+servlet)实现简易计算器
  4. swift_019(Swift 的类)
  5. python保存csv_python怎样保存csv文件
  6. Johnny and Another Rating Drop CodeForces - 1362C(规律)
  7. 【HDU - 5965】扫雷(dp)
  8. 第七届蓝桥杯省赛C/C++大学B组真题解析
  9. 使用信号量机制解决家庭吃水果问题。
  10. 微软阿根廷服务器解锁,XBOX阿根廷服购买教程
  11. 微信小程序按钮添加背景
  12. 安卓开发中获取服务器网络延迟(ping)
  13. 互斥事件的概念和公式_高中数学典型例题分析与解答:互斥事件
  14. latex 公式换行、对齐
  15. wpsmac和pc版的区别_WPS Office for Mac VS Microsoft Office 365,同为办公软件,差别竟然这么大!...
  16. python实现文字游戏_改进Python文字小游戏(4)
  17. 无限宝电脑连接不上服务器,无限宝客户端登录过程问题
  18. 做自动化用哪种开发语言,一起【探讨】,谈谈你的想法?
  19. 3分钟vue-router速览
  20. javaweb报修系统源码

热门文章

  1. 004_strace工具
  2. 事件ID 6038审核NTLM使用情况
  3. 上海浦发银行总行信息科技部大数据专家陈春宝:大数据与机器学习重塑零售银行业务...
  4. 如何理解Return的返回值?
  5. 歌唱online活动目录数据库还原[为企业维护windows server 2008系列二]
  6. CentOS7最小化安装配置IP
  7. 负载均衡(SLB)使用最佳实践
  8. myclipse 项目struts 2 版本升级过程
  9. js面试必考:this
  10. 2019 年,容器技术生态会发生些什么?