《jquery源码解读之addclass 方法分析_1》由会员分享，可在线阅读，更多相关《jquery源码解读之addclass 方法分析_1（7页珍藏版）》请在金锄头文库上搜索。
1、jQuery源码解读之addClass 方法分析这篇文章主要介绍了jQuery源码解读之addClass 方法,注释形式较为详细的分析了addClass 方法的实现技巧与相关注意事项,具有一定参考借鉴价值,需要的朋友可以参考下本文较为详细的分析了jQuery源码解读之addClass 方法。分享给大家供大家参考。具体分析如下：给jQuery原型对象扩展addClass功能，jQuery.fn就是jQuery.prototype代码如下:jQuery.fn.extend(/*可以看出这是一个函数名叫addClass的插件方法。*/addClass: function( value ) var c
2、lasses, elem, cur, clazz, j, finalValue,i = 0,/*this表示选择器选择的准备添加class的jQuery对象，len是该jQuery对象数组的长度。*/len = this.length,/在有一个操作数不是布尔值的情况下，&操作就不一定返回布尔值，此时，它遵循下列规则：/1.如果个操作数不是布尔类型，则返回第二个操作数;/2.如果第二个操作数不是布尔类型，则只有在个操作数的求值结果为true，的情况下才会返回该对象;/3.如果两个操作数都不是布尔类型，则返回第二个操作数；/4.如果有一个操作数是null,则返回null;/5.如果有一个操作数是
3、NaN，则返回NaN;/6.如果有一个操作数是undefined,则返回undefined 。/情况1:如果value是null,符合规则4，返回null，即proceed值为null;/情况2:如果value是undefine，符合规则6,返回undefined，即proceed值为undefined;/情况3:如果value是NaN，符合规则5，返回NaN，即proceed值为NaN;/情况4:如果value是数字类型，返回false;/情况5:如果value是布尔类型,返回false;/情况7:如果value是Array,Object,Function类型,符合规则2，但typeof v
4、alue = string是false,所以返回该对象，返回false。/情况8:如果value是字符串类型，符合规则2，返回value。/因此，这句只能判断value是不是字符串类型，并且返回这个字符串赋值给proceed。其他任何类型最后都返回false，或是可被隐式转换为false的类型。proceed = typeof value = string & value;/由于上面只能判断是否是字符串类型，下面这句是判断value是否为Function类型。使用了jQuery的全局函数isFunction判断，就是$.isFunction 。if ( jQuery.isFunction( v
5、alue ) ) /如果value是Function类型，进到这里了。/返回jQuery对象，为了链式调用。/这里的this是你选择器选择的jQuery对象。return this.each(function( j ) /开始迭代，这里的this可不是jQuery对象了，是当前迭代的DOM对象，所以用jQuery(this)包装了一下，成为一个jQuery对象，这样就可以使用jQuery方法。j表示每次遍历的索引。传递一个用来设置类名的有返回值的value函数。value这个函数每次call当前DOM为其执行对象，并传入当前DOM索引值和类名，value函数返回的值，由jQuery(this)
6、.addClass(返回值)再次调用addClass 方法。如果返回的是字符串，就执行另外一个if的分支。如果返回的还是function，则继续调用返回的这个function。jQuery( this ).addClass( value.call( this, j, this.className ) ););/之前得到proceed是字符串，这里判断下是否为空字符串，非空字符串隐式转换为true。空字符串隐式转换为false哦，那么if语句块就不再执行了，程序跳到最后的return this，返回这个jQuery对象就执行完了。if ( proceed ) /proceed非空字符串，开始执行
7、if语句块。假定value是show bd1。/rnotwhite是正则表达式(/S+/g),意思是全局匹配非空白字符一次或更多次。/(value | )返回show bd1，很简单。/show bd1.match(/S+/g) | 返回show, bd1，match不知道什么作用的同学快去查查吧。classes = ( value | ).match( rnotwhite ) | ;/现在classes是show, bd1一个你要添加类名的数组。/下面开始遍历，为每一个DOM对象添加类。for ( ; i /this是jQuery对象，elem是当前DOM对象。elem = this i ;
8、/*=操作符比&操作符优先级高，先判断DOM节点类型是否是元素节点。rclass是正则表达式/trnf/g;括号内的三目运算符表示，当前DOM节点是否已经有class，有的话，则将class中可能存在的制表符，换行符，回车符等替换为带有一个空格的字符串 ，并且给当前class的前后各加一个空格；如果当前DOM节点还没有class,则也是给一个带一个空格的字符串 。最后变成cur = elem.nodeType = 1 & show bd1，这个很熟悉啊，没错，根据最开始的那6个规则求值。假定elem的节点类型是1，那么 cur = true & ，最后cur = show bd1。如果elem
9、的节点类型不是1，那么 cur = false & ，最后cur = false。*/cur = elem.nodeType = 1 & ( elem.className ?( + elem.className + ).replace( rclass, ): );/现在cur = show bd1 ，进入if语句块执行。if ( cur ) j = 0;/*classes为show bd1循环检查要添加的类是否已经存在与当前DOM元素已经有的类里。如果没有，则添加这个类。*/while ( (clazz = classesj+) ) if ( cur.indexOf( + clazz + ) cur += clazz + ;/*最后用$.trim 将类 show bd1 两头的空格字符去掉。检查当前DOM元素的类是否和拼接好的类重复。避免不必要的重复添加相同类的渲染。*/finalValue = jQuery.trim( cur );if ( elem.className != finalValue ) elem.className = finalValue;/返回这个jQuery对象，为了以后的链式调用。return this;);希望本文所述对大家的jQuery程序设计有所帮助。
