jQuery addClass() 源码解读
2015-02-07 20:36
501 查看
addClass: function( value ) { var classes, elem, cur, clazz, j, i = 0, len = this.length, proceed = typeof value === "string" && value; if ( jQuery.isFunction( value ) ) { return this.each(function( j ) { jQuery( this ).addClass( value.call( this, j, this.className ) ); }); } if ( proceed ) {//如果传入的值不是字符串 // The disjunction here is for better compressibility (see removeClass) //如果传入的是假值,"".match() //core_rnotwhite 用于匹配非空格字符,且有g标识,匹配成功返回数组,匹配不成功返回[] classes = ( value || "" ).match( core_rnotwhite ) || []; //rclass = /[\t\r\n\f]/g for ( ; i < len; i++ ) { elem = this[ i ]; //如果elem是元素,cur会返回真值," "或者 " a b " //替换tab符 回车 换行 换页 cur = elem.nodeType === 1 && ( elem.className ? ( " " + elem.className + " " ).replace( rclass, " " ) : " " ); if ( cur ) { j = 0; //遍历,如果原始class中不存在,字符串拼接 while ( (clazz = classes[j++]) ) { if ( cur.indexOf( " " + clazz + " " ) < 0 ) { cur += clazz + " "; } } elem.className = jQuery.trim( cur );//最后两边去空格 } } } return this; }
removeClass、hasClass与addClass代码类似。
相关文章推荐
- jQuery源码解读之addClass()方法分析
- jQuery源码解读之addClass()方法分析
- jquery源码解析:addClass,toggleClass,hasClass详解
- jQuery源码分析之addClass,removeClass,toggleClass,hasClass详解四问
- [原创] jQuery源码分析-13 CSS操作-CSS-类样式-addClass+removeClass+toggleClass+hasClass
- 【转】jQuery源码分析-13 CSS操作-CSS-类样式-addClass+removeClass+toggleClass+hasClass
- jQuery源码学习(1)——addClass
- jQuery源码解读之hasClass()方法分析
- jQuery源码分析-13 CSS操作-CSS-类样式-addClass+removeClass+toggleClass+hasClass
- jQuery源码解读之hasClass()方法分析
- jQuery源码解读之removeClass()方法分析
- jQuery源码解读之removeClass()方法分析
- 第二十三课:jQuery.event.add的原理以及源码解读
- jQuery源码分析-13 CSS操作-CSS-类样式-addClass+removeClass+toggleClass+hasClass
- jQuery 1.5 源码解读 面向中高阶JSER
- jquery 中 attr()和addClass()的区别
- jquery中的文档操作之一addClass append attr
- jquery1.8.1源码解读
- jquery之修改元素样式(添加和删除类名称,使用addClass(),removeClass(),toggleClass()方法)