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