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...