通過給元素添加刪除指定的樣式類名用來修改樣式的方法有 addClass 與 removeClass，為每個(gè)匹配的元素添加指定的樣式類名，對(duì)元素的樣式操作，底層的實(shí)現(xiàn)就是修改元素的className值，實(shí)現(xiàn)的功能：
增加一條樣式規(guī)則： .addClass('myClass')
增加多條樣式規(guī)則： .addClass('myClass yourClass')
傳遞回調(diào)遍歷樣式規(guī)則：
$("ul li:last").addClass(function(index) {
return "item-" + index;
});
從接口傳參去分析這個(gè)實(shí)現(xiàn)手法，參考右邊的代碼addClass我把代碼簡(jiǎn)略的分了幾個(gè)步驟：
/\S+/g 空白分組這里就不詳講，看看代碼就能理解重點(diǎn)說一下傳遞回調(diào)函數(shù)的設(shè)計(jì)，官方給的測(cè)試案例：
<p class ='selected highlight'>Goodbye</p> <p class ='selected1 highlight1'>Goodbye</p> <p class ='selected2 highlight2'>Goodbye</p>
增加樣式代碼：
$(p).addClass(function(index,className){
index className
0 "selected highlight"
1 "selected1 highlight1"
2 "selected2 highlight2"
});
遍歷出所有的 P 節(jié)點(diǎn)，并找其對(duì)應(yīng)的 class，返回給每一個(gè)回調(diào)函數(shù)，看看源碼的設(shè)計(jì)：
//如果傳遞的是回調(diào)函數(shù)，遞歸調(diào)用 ⑴
if ( jQuery.isFunction( value ) ) {
return this.each(function( j ) { //each addClass回調(diào)
jQuery( this ).addClass( value.call( this, j, this.className ) );
});
}
不管是寫插件還是其他的，只要是設(shè)計(jì)操作 DOM 的，在 jQuery 內(nèi)部就的到 this.each 方法，原因很簡(jiǎn)單jQuery就是一個(gè)數(shù)組保存著所有對(duì)應(yīng)的節(jié)點(diǎn)的下標(biāo)。
內(nèi)部在傳遞一個(gè)編寫好的回調(diào)函數(shù)，傳遞給 each 方法 ，each 方法理解就是一個(gè)循環(huán)方法，分解出 jQuery 數(shù)組中每一個(gè)下標(biāo)元，然后把每一個(gè)元素返回給外部回調(diào)。
這里再進(jìn)一步替換下代碼就很明顯了：
function( i, obj[ i ] ) {
jQuery( this ).addClass( value.call( this, j, this.className ) )
}
這里的 this 是指向的每一個(gè) p 元素節(jié)點(diǎn)，因?yàn)?callback.call 了一下，把每一個(gè)上下文指定到當(dāng)前的函數(shù)了，所以 this 就是對(duì)應(yīng)的 obj[i]，最后執(zhí)行的代碼就是：
value.call( this, j, this.className )
value 就是最外層用戶定義的回調(diào)了，復(fù)制代碼：
$(p).addClass(function(index,className){
// index className
// 0 "selected highlight"
// 1 "selected1 highlight1"
// 2 "selected2 highlight2"
});
這里意外的發(fā)現(xiàn) jQuery Api沒給出還包裝了一層 jQuery( this ).addClass ，那么意味著 jQuery 還可以接受用戶最外層的返回參數(shù)，然后再調(diào)用 addClass 給當(dāng)前節(jié)點(diǎn)增加新的類名：
jQuery( this ).addClass( value.call( this, j, this.className ) );
p.addClass(function(index,className){
return 'aaaa'
});
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
打開微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)