jQuery原始碼學習(2) 選擇器初窺

2022-03-30 19:22:51 字數 2107 閱讀 1300

jquery選擇器可以依照傳入資料的型別分為五大類:

下面我們來看一下jquery建構函式**(jquery-2.2.2第2832行起)的架構:

jquery.fn.init = function

(selector, context)

if(typeof selector == "string")

if(match && (match[1] || !context))

else

} //一些其他的不常見情況

else

return jquery.makearray(selector, this

);}

可以發現jq將**依照selector的型別分為了幾個部分。下面我們來依次分析這幾部分的**。

此段完整**如下:

//

handle: $(""), $(null), $(undefined), $(false)

if ( !selector )

此段完整**如下:

if ( selector[ 0 ] === "<" &&selector[ selector.length - 1 ] === ">" &&selector.length >= 3)  

else

//

匹配html標籤或#id

rquickexpr = /^(?:\s*(<[\w\w]+>)[^>]*|#([\w-]*))$/,

通過分析rquickexpr正規表示式,我們可以得出在selector分別為以下幾種值時返回值match的結構:

1. selector = ""

match = [null, "", null]

2. selector = "content

"

match = [null, "content

", null]

3. selector = "

content"

match = ["

content", "

", null]

4. selector = #id

match = [#id, null, #id]

傳入標籤時:

此段完整**如下:

//

如果是html標籤

if ( match[ 1] ) else}}

return

this

; }

//

匹配單標籤

var rsingletag = ( /^<([\w-]+)\s*\/?>(?:<\/\1>|)$/ );

關鍵位置的語意都已在注釋中講解過了,下面主要介紹一下$.parsehtml和$.merge這兩個方法在其中的應用:

jquery.parsehtml( data [, context ] [, keepscripts ] )

jquery.merge(first, second)

我們經常用$.merge來進行陣列的合併。在本例中需要強調的一點是,$.merge被用來將乙個陣列合併到類陣列物件中。就像下面這樣:

var obj = ;

var arr = ["from", "arr"];

console.log($.merge(obj, arr));

//object

傳入id時:

//

handle: $(#id)

else

this.context =document;

this.selector =selector;

return

this

;}

//

處理形如$(".class"), $("ul li+p")等等

if ( !context ||context.jquery ) else

此處複雜選擇器全部借助$().find()方法實現,使用了sizzle引擎,我們稍後再進行介紹。

jquery原始碼解析之選擇器實現

為什麼 取得的物件要設計成陣列的形式?jquery內部採用了一種 類陣列物件 的方式作為儲存結構,既可以像物件一樣處理jquery操作,也可以像陣列一樣使用push pop shift sort each map等類陣列的方法操作jquery物件。2.sizzle選擇器 支援九種方式的處理 1.do...

jQuery學習筆記2 選擇器

1 簡單選擇器 box p css color red 直接相鄰兒子p標籤 返回選擇器選擇元素個數方法 length屬性或size 方法。jquery具有容錯功能 if document.getelementbyid pox 等效於if pox size 0 也可以轉換為dom物件方式來判斷,有值時...

JQuery學習 2 選擇器 1

通過標籤名,屬性名或內容對dom元素進行選擇,沒有瀏覽器的相容問題 選擇器型別 基本選擇器 層次選擇器 過濾選擇器 表單選擇器 基本選擇器 jquery中使用最頻繁的選擇器 使用jquery mydiv css background color red 使用js document.getelemen...