第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

章節(jié)
問答
課簽
筆記
評論
占位
占位

樣式類操作

通過給元素添加刪除指定的樣式類名用來修改樣式的方法有 addClass removeClass,為每個匹配的元素添加指定的樣式類名,對元素的樣式操作,底層的實現(xiàn)就是修改元素的className值,實現(xiàn)的功能:

增加一條樣式規(guī)則: .addClass('myClass')
增加多條樣式規(guī)則: .addClass('myClass yourClass')

傳遞回調(diào)遍歷樣式規(guī)則:

$("ul li:last").addClass(function(index) {
  return "item-" + index;
});

從接口傳參去分析這個實現(xiàn)手法,參考右邊的代碼addClass我把代碼簡略的分了幾個步驟:

  • 如果傳遞的是回調(diào)函數(shù),遞歸調(diào)用分解下樣式規(guī)則,通過正則 /\S+/g 空白分組
  • 如果元素本身存在 class 樣式,先取出來組合成新的規(guī)則按照空格分開
  • 通過 className 設(shè)置新的樣式傳遞一個參數(shù)與多個參數(shù)的處理無非就是字符串的拼接

這里就不詳講,看看代碼就能理解重點說一下傳遞回調(diào)函數(shù)的設(shè)計,官方給的測試案例:

<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é)點,并找其對應(yīng)的 class,返回給每一個回調(diào)函數(shù),看看源碼的設(shè)計:

//如果傳遞的是回調(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è)計操作 DOM 的,在 jQuery 內(nèi)部就的到 this.each 方法,原因很簡單jQuery就是一個數(shù)組保存著所有對應(yīng)的節(jié)點的下標(biāo)。

內(nèi)部在傳遞一個編寫好的回調(diào)函數(shù),傳遞給 each 方法 ,each 方法理解就是一個循環(huán)方法,分解出 jQuery 數(shù)組中每一個下標(biāo)元,然后把每一個元素返回給外部回調(diào)。

這里再進一步替換下代碼就很明顯了:

function(  i, obj[ i ]  ) {  
   jQuery( this ).addClass( value.call( this, j, this.className ) )
}

這里的 this 是指向的每一個 p 元素節(jié)點,因為 callback.call 了一下,把每一個上下文指定到當(dāng)前的函數(shù)了,所以 this 就是對應(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é)點增加新的類名:

jQuery( this ).addClass( value.call( this, j, this.className ) );
  p.addClass(function(index,className){
        return 'aaaa'
});

 

任務(wù)

?不會了怎么辦
||

提問題

寫筆記

公開筆記
提交
||

請驗證,完成請求

由于請求次數(shù)過多,請先驗證,完成再次請求

加群二維碼

打開微信掃碼自動綁定

您還未綁定服務(wù)號

綁定后可得到

  • · 粉絲專屬優(yōu)惠福利
  • · 大咖直播交流干貨
  • · 課程更新,問題答復(fù)提醒
  • · 賬號支付安全提醒

收藏課程后,能更快找到我哦~

使用 Ctrl+D 可將課程添加到書簽

邀請您關(guān)注公眾號
關(guān)注后,及時獲悉本課程動態(tài)

舉報

0/150
提交
取消
全部 精華 我要發(fā)布
全部 我要發(fā)布
最熱 最新
只看我的

手記推薦

更多

本次提問將花費2個積分

你的積分不足,無法發(fā)表

為什么扣積分?

本次提問將花費2個積分

繼續(xù)發(fā)表請點擊 "確定"

為什么扣積分?