jQuery 2 0 3 原始碼分析 樣式操作

根據api分類

css對元素的樣式操作,底層的實現就是修改元素的classname值

實現的功能：

增加一條樣式規則： .addclass(『myclass』)

增加多條樣式規則： .addclass(『myclass yourclass』)

傳遞**遍歷樣式規則：

$("ul li:last").addclass(function

(index) );

addclass原始碼

// 為匹配的每個元素增加指定的class(es)
addclass: function( value ) );
}if ( proceed ) 
}//設定樣式  ⑹
elem.classname = jquery.trim( cur );}}
}return
this;
},

傳遞乙個引數與多個引數的處理無非就是字串的拼接，這裡就不詳講，看看**就能理解

重點說一下傳遞**函式的設計

官方給的測試案例

html結構

goodbye

goodbye
goodbye

$(p).addclass(function

(index,classname));

看看原始碼的設計

//

如果傳遞的是**函式，遞迴呼叫  ⑴
if( jquery.isfunction( value ) ) );
}

原因很簡單，jquery就是乙個陣列儲存著所有對應的節點的下標

內部在傳遞乙個編寫好的**函式，傳遞給each方法

each方法理解就是乙個迴圈方法，分解出jquery陣列中每乙個下標元，然後把每乙個元素返回給外部**

這裡在進步替換下**就很明顯了

function(  i, obj[ i ]  )

最後執行的**就是

value.call( this, j, this.classname )

$(p).addclass(function

(index,classname));

還包裝了一層jquery( this ).addclass

那麼意味著，jquery還可以接受使用者最外層的返回引數，然後再呼叫addclass給當前節點增加新的類名

jquery( this ).addclass( value.call( this, j, this.classname ) );

p.addclass(function

(index,classname));

**跟結構與addclass很相似

removeclass原始碼

removeclass: function( value ) );
}if ( proceed ) 
}elem.classname = value ? jquery.trim( cur ) : "";}}
}return
this;
},

.hasclass()檢測匹配的元素是否指定了傳入的class，只要有乙個匹配就返回true；

元素可能有多個class，在html中多個class用空格隔開；

如果遇到某個元素含有指定的classname，.hasclass()將會返回true，即便還指定了其他的classname。

/*

** 檢測匹配的元素是否指定了傳入的class，只要有乙個匹配就返回true
* .hasclass( classname )
*   classname 要查詢的class
* 核心技巧：前後加空格 + indexof */
hasclass: 
function
( selector ) 
}return
false
;},

關於jquery的鉤子，單獨暴露的乙個介面，然使用者可以自定義相容

文章已經說了原理

.toggleclass()

.toggleclass()負責對匹配元素集中的每個元素增加或刪除乙個或多個class，增加或刪除的行為依賴當前元素是否含有指定的class或switch引數的值；

.toggleclass()接受乙個或多個class；自從jquery1.4以後，如果沒有為.toggleclass()指定引數，元素上的所有class名稱將被切換；

自從jquery1.4以後，classname可以是乙個函式，函式的返回值作為切換的classname。

通過判斷節點上是否有classname從而實現切換

結合了hasclass，addclass，removeclass

while ( (classname = classnames[ i++]) )  

else
}

jQuery 2 0 3 原始碼分析 資料快取

var aa1 aaron var aa2 aaron 覆蓋 aa1.data a 1111 結果2222222 aa2.data a 2222 結果2222222 console.log aa1.data a console.log aa2.data a 不覆蓋 data aa1,b 1111 d...

jQuery 2 0 3 整體架構

示例 var jquery function jquery.fn jquery.prototype name function age 20 原型傳遞 jquery.fn.init.prototype jquery.fn 因為是引用傳遞，所以不用擔心迴圈引用的效能問題。示例 jquery.proto...

jQuery原始碼分析

工具 版本說明 版本號備註 jquery 2.1.1 sublime 3jquery function selector,context jquery.fn jquery.prototype 快速匹配正則 不加g 不光匹配整體項還會匹配到子項 rquickexpr s w w w init jque...