JQuery選擇器是如何工作的

2022-05-18 10:56:05 字數 1607 閱讀 6663

每次申明乙個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中是怎樣執行的:

if ( typeof selector == "string" )

// 是: $("#id")

else

selector = ;

} //非id的形式.在context中或者是全文查詢

} else

}

這裡就說明只有選擇器寫成$(『#id』)的時候最快,相當於執行了一次getelementbyid,後邊的程式就不用再執行了。當然往往我們需要的選擇器並不是這麼簡單,比如我們需要id下的css為classname, 有這樣的寫法$(『#id.classname』)和$(『#id』).find(『.classname』);這兩種寫法的執行結果都是一樣的,比如

,返回的肯定都是,但是執行的效率是完全不一樣的。

在分析一下上邊的**,如果不是$(『#id』)這樣的簡單選擇器的話,都會執行find函式,那我們再看看find到底是做用的:

find: function( selector ) );

//下邊的**可以忽略,只是做一些處理

//這裡應用了js的正則物件的靜態方法test

//indexof("..")需要了解一下xpath的語法,就是判斷selector中包含父節點的寫法

//本意就是過濾陣列的重複元素

return this.pushstack( /[^+>] [^+>]/.test( selector ) || selector.indexof("..") > -1 ?

jquery.unique( elems ) :

elems );

}

如果這樣寫$(『#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 選擇器 簡單的選擇器

1.3簡單的偽類選擇器 你們好你們好 你們好你們好 你們好你們好 1.3.1特定位置選擇器 主要包括 first last,eq index 3中位置 p first css color blue 匹配第乙個p標籤 p eq 3 css background yellow 匹配第4個p標籤 p la...

JQuery選擇器 選擇器簡介

在開始學習jquery選擇器之前,有必要了解一下css 層疊樣式表 技術。css是一項出色的技術,它使得網頁的結構和表現樣式完全分離。利用css選擇器能夠輕鬆的對某個元素新增樣式而不改變html結構,只需通過新增不同的css規則,就可以得到各種不同樣式的網頁。常用的css選擇器分類如下表 選擇器語法...

Jquery選擇器 基本選擇器

jquery作為我們常用前端工具之一,實際專案中常用的的選擇器有id選擇器 id 元素選擇器 element 樣式選擇器 class 概述 根據給定的id匹配乙個元素。使用任何的元字元 如 作為名稱的文字部分,它必須被兩個反斜槓轉義 引數 id,用於搜尋的,通過元素的 id 屬性中給定的值。示例 查...