jQuery的屬性操作模塊總共有4個部分，本篇說一下第3個部分:類樣式操作部分，用于修改DOM元素的class特性的，對于類樣式操作來說，jQuery并沒有定義靜態方法，而只定義了實體方法，如下:
- addClass(value) ;為匹配元素集合中的每個元素添加一個或多個類樣式，通過修改DOM屬性className來修改類樣式，value可以是個以空格分隔的類樣式或者一個函式(回傳一個或多個以空格分隔的類樣式)
- hasClass(selector) ;檢測匹配元素中的任意元素是否含有指定的類樣式，只要其中一個元素含有就回傳true,selector是一個類樣式，
- removeClass(value) ;從匹配元素集合中的每個元素上移除一個或多個或全部類樣式,value可以為空(全部移除)、以空格分隔的類樣式(移除多個樣式)，或者是個函式(該函式回傳一個或多個以空格分隔的類樣式)
- toggleClass(value,stateVal) ;對設定或移除被選元素的一個或多個類進行切換，有五種用法
writer by:大沙漠 QQ:22969969
·toggleClass() ;未傳入引數 ;這時如果當前元素含有樣式則移除所有類，如果沒有則嘗試恢復，
·toggleClass(stateVal) ;只傳入一個布林值型別 ;如果stateVal是true,則等同于toggleClass();如果是false則總是移除所有類，
·toggleClass(value) ;引數1是字串或函式，未傳入引數2 ;value是字串時表示一個或多個樣式，用空格分隔，下同;value是函式時回傳字串格式，如果匹配元素含有指定的類樣式，則移除，否則添加該樣式，
·toggleClass(value,stateVal) ;引數1是字串或函式，引數2是布林值 ;當stateVal是true時總是添加，是false時則總是移除
對于toggleClass切換樣式時,jQuery內部實作會將所有類暫時保存在資料快取物件的__className__資料中，等下次恢復時嘗試讀取，
舉個栗子吧:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script> <style> .color{color: #f00;} .back{background: #ccc;} </style> </head> <body> <p>Hello World!</p> <button id="b1">設定所有樣式</button> <button id="b2">切換color樣式</button> <button id="b3">取消所有樣式</button> <script> let b1 = document.getElementById('b1'), b2 = document.getElementById('b2'), b3 = document.getElementById('b3'); b1.onclick = ()=>{ $('p').addClass('color back'); //添加所有樣式 } b2.onclick = ()=>{ $('p').toggleClass('color'); //切換color樣式 } b3.onclick = ()=>{ $('p').removeClass(); //取消所有樣式 } </script> </body> </html>
這里我們在style自定義了兩個class:color和back，前者修改字體的顏色，后者修改字體的背景色，然后定義了三個按鈕分別用于操作樣式，渲染如下:
點擊設定所有樣式，將在p這個DOM元素上添加color和back兩個class,如下:
當點擊切換color樣式時，由于p元素上的color這個class已經存在了，因此會取消掉:
當再次點擊切換color樣式這個按鈕時，由于p元素上的color這個class已經取消了，因此此時會顯示出來，如下:
當我們點擊取消所有樣式時將會把p元素上的所有class給刪掉，又回到初始狀態，如下:
原始碼分析
jQuery內部對于樣式的操作是修改對應DOM元素的className屬性來實作的，中間通過字串的indexOf和replace操作實作查找和替換，對于添加樣式和洗掉樣式的邏輯如下:
jQuery.fn.extend({ addClass: function( value ) { //添加類樣式 var classNames, i, l, elem, setClass, c, cl; if ( jQuery.isFunction( value ) ) { //如果value是函式 return this.each(function( j ) { jQuery( this ).addClass( value.call(this, j, this.className) ); //在每個匹配元素上執行該函式并且取其回傳值作為待添加的類樣式，然后呼叫.addClass(className)添加類樣式，執行函式時，傳入兩個引數，分別是元素在集合中的下標位置和當前樣式值， }); } if ( value && typeof value =https://www.cnblogs.com/greatdesert/p/=="string" ) { //如果value是字串，可以是空格分隔的多個樣式 classNames = value.split( rspace ); //用/\s+/對value進行分隔 for ( i = 0, l = this.length; i < l; i++ ) { //遍歷匹配元素 elem = this[ i ]; if ( elem.nodeType === 1 ) { //只針對元素節點 if ( !elem.className && classNames.length === 1 ) { //如果elem.className不存在，且待添加的樣式個數為1，則直接設定elem.className elem.className = value; } else { setClass = " " + elem.className + " "; //在待添加的類樣式className前后加空格 for ( c = 0, cl = classNames.length; c < cl; c++ ) { //歷要添加的類樣式value if ( !~setClass.indexOf( " " + classNames[ c ] + " " ) ) { //如果classNames中的某個樣式不存在setClass中 setClass += classNames[ c ] + " "; //則添加該樣式 } } elem.className = jQuery.trim( setClass ); //最后去除類樣式兩邊的空格，再設定到elem.className中 } } } } return this; }, removeClass: function( value ) { //從匹配元素集合中的每個元素上移除一個或多個或全部類樣式，通過修改DOM屬性className來移除類樣式， var classNames, i, l, elem, className, c, cl; if ( jQuery.isFunction( value ) ) { //如果value是一個函式 return this.each(function( j ) { //遍歷匹配元素 jQuery( this ).removeClass( value.call(this, j, this.className) ); //呼叫每個匹配元素的removeClass()函式，引數是value函式的回傳值 }); } if ( (value && typeof value =https://www.cnblogs.com/greatdesert/p/=="string") || value =https://www.cnblogs.com/greatdesert/p/== undefined ) { //如果value存在且是一個字串 或者 value未定義 classNames = ( value || "" ).split( rspace ); //用空白符分隔value以支持一次移除多個類樣式，這里如果value是空的，那么結果是[""]，該陣列的length等于1 for ( i = 0, l = this.length; i < l; i++ ) { //遍歷匹配元素 elem = this[ i ]; //elem是匹配的元素 if ( elem.nodeType === 1 && elem.className ) { //只支持已經設定了className的元素節點， if ( value ) { //如果傳入了value值,則表示是設定樣式 className = (" " + elem.className + " ").replace( rclass, " " ); //classNames是當前元素的類樣式，兩邊加個空格，再去除出換行、制表、回車符，var rclass = /[\n\t\r]/g, for ( c = 0, cl = classNames.length; c < cl; c++ ) { //遍歷要移除的類樣式陣列classNames className = className.replace(" " + classNames[ c ] + " ", " "); //呼叫字串方法replace()逐個從當前類樣式中移除 } elem.className = jQuery.trim( className ); //去掉空白字符，在設定elem.className屬性 } else { elem.className = ""; } } } } return this; }, /*略*/ })
當我們在頁面里做各種影片效果時還是會用到這個API的，挺方便的，配合css可以實作各種的影片效果，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/34125.html
標籤：jQuery
上一篇：jQuery 原始碼分析(十三) 資料操作模塊 DOM屬性 詳解
下一篇：jq處理影片累加