jQuery的addClass方法是一個常用的DOM操作方法,可以用來給HTML元素添加一個或多個類名。它的實現(xiàn)代碼在jquery.js文件中。
jQuery.fn.extend({ addClass: function(value) { var classes, elem, cur, clazz, j, finalValue, 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) classes = ( value || "" ).match( rnotwhite ) || []; for ( ; i< len; i++ ) { elem = this[ i ]; cur = elem.nodeType === 1 && ( elem.className ? ( " " + elem.className + " " ).replace( rclass, " " ) : " " ); if ( cur ) { j = 0; while ( (clazz = classes[j++]) ) { if ( cur.indexOf( " " + clazz + " " )< 0 ) { cur += clazz + " "; } } // only assign if different to avoid unneeded rendering. finalValue = jQuery.trim( cur ); if ( elem.className !== finalValue ) { elem.className = finalValue; } } } } return this; } });
這段代碼首先擴(kuò)展了jQuery.fn對象,添加了一個叫做addClass的方法。然后,進(jìn)行了一些參數(shù)驗證和準(zhǔn)備工作。
如果傳入的是一個字符串,那么通過正則表達(dá)式將這個字符串拆分成一個數(shù)組。這個數(shù)組包含了所有要添加的類名。接著,遍歷this,也就是jQuery對象中的所有DOM元素。對于每個元素,首先獲取它的className屬性,并將其中的所有空格和類名分離,得到一個類名數(shù)組cur。
接下來,將要添加的所有類名遍歷一遍。如果這個元素的類名數(shù)組中還不存在這個類名,則將它加入數(shù)組中。最后,將類名數(shù)組通過join方法再次組合成一個字符串,賦值給元素的className屬性。
這樣,該元素就被成功添加了新的類名。
上一篇如何引用css外部樣式表
下一篇如何引用css字體文件