JQuery選取器$()的工作原理淺析

標籤：http   使用   io   ar   div   cti   代碼   html   amp   

每次申明一個jQuery對象的時候，返回的是jQuery.prototype.init對象，很多人就會不明白，init明明是jQuery.fn的方法啊，實際上這裡不是方法，而是init的建構函式，因為js的prototype對象可以實現繼承，加上js的對象只是引用不會是拷貝，new jQuery,new jQuery.fn和new jQuery.fn.init的子物件是一樣的，只是有沒有執行到init的不同。

當我們使用選取器的時候$(selector,content)，就會執行init(selectot,content)，我們看看inti中是怎樣執行的：永盈會娛樂城

 

01	if ( typeof selector == "string" )

02

{

03	//正則匹配，看是不是HTML代碼或者是#id

04	var match = quickExpr.exec( selector );

05	//沒有作為待尋找的 DOM 元素集、文檔或 jQuery 對象。

06	//selector是#id的形式

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

08

{

09	// HANDLE: $(html) -> $(array)

10	//HTML代碼,調用clean補全HTML代碼

11	if ( match[1] ){

12	selector = jQuery.clean( [ match[1] ], context );

13

}

14	// 是: $("#id")

15

else {

16	//判斷id的Dom是不是載入完成

17	var elem = document.getElementById( match[3] );

18	if ( elem ){

19	if ( elem.id != match[3] )

20	return jQuery().find( selector );

21	return jQuery( elem );//執行完畢return

22

}

23	selector = [];

24

}

25	//非id的形式.在context中或者是全文尋找

26

}

27

else{

28	return jQuery( context ).find( selector );

29

}

30

}

這裡就說明只有選取器寫成$(‘#id‘)的時候最快，相當於執行了一次getElementById，後邊的程式就不用再執行了。當然往往我們需要的選取器並不是這麼簡單，比如我們需要id下的CSS為className， 有這樣的寫法$(‘#id.className‘)和$(‘#id‘).find(‘.className‘);這兩種寫法的執行結果都是一樣的，比如<div id=”id”><span class=”className”></span></div>，返回的肯定都是<span class=”className”></span>，但是執行的效率是完全不一樣的。

在分析一下上邊的代碼，如果不是$(‘#id‘)這樣的簡單選取器的話，都會執行find函數，那我們再看看find到底是做用的：

 

01	find: function( selector ) {

02	//在當前的對象中尋找

03	var elems = jQuery.map(this, function(elem){

04	return jQuery.find( selector, elem );

05

});

06	//下邊的代碼可以忽略，只是做一些處理

07	//這裡應用了js的正則對象的靜態方法test

08	//indexOf("..")需要瞭解一下xpath的文法,就是判斷selector中包含父節點的寫法

09	//本意就是過濾數組的重複元素

10	return this.pushStack( /[^+>] [^+>]/.test( selector ) || selector.indexOf("..") > -1 ?

11	jQuery.unique( elems ) :

12

elems );

13

}

如果這樣寫$(‘#id .className‘)，就會執行到擴充的find(‘#id .className‘,document)，因為當前的this是document的jQuery數組，那我們在看看擴充的find他的實現，代碼比較 多，就不列出來，總之就是從第二個參數傳遞進行的dom第一個子節點開始找，遇見#比對id，遇見.比對ClassName，還有：<+-等處理。 那我們要最佳化，是不是就要想辦法讓第二個參數context的範圍最小，那樣遍曆是不是就很少了？

如果我們這樣寫$(‘#id‘).find(‘.className‘)，那程式只這樣執行 的，第一次init的時候執行一步getElementById，就return了，接著執行 find(‘.className‘,divDocument)，divDocument就是我們第一次選擇的是div標籤，如果document下有很 多dom對象的時候，這次只遍曆divDocument是不是少了很多次，而且在第一次選擇id的速度也要比遍曆快的多。

現在大家應該是明白了吧。就是說第一層選擇最好是ID，而是簡單選取器，目的就是定義範圍，提高速度。

JQuery選取器$()的工作原理淺析