前端 jQuery選擇器 的實現原理

2022-03-20 18:35:32 字數 910 閱讀 5855

今天三七互娛技術面試的時候面試官問了我這個問題,當時一臉懵逼,於是好好總結一下。

當我們使用jquery選擇器的時候,$(s).回預設去執行jquery內部封裝好的乙個init的建構函式

每次申明乙個jquery物件的時候,返回的是jquery.prototype.init物件。

這個init不是jquery.fn上的方法,而是內部原始碼的乙個函式。

這個函式是幹什麼用的呢?

當我們使用選擇器的時候$(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');這兩種寫法的執行結果都是一樣的。

都是先去查詢執行init,找到id了,立刻返回return。 然後再去執行find()函式方法。

find也就是到當前dom物件下去查詢選擇器。

但是如果直接$('.classname')的話, 這樣的是去執行init函式,然後到全域性全文裡,全部的dom物件乙個個查詢遍歷。

效率相比前面的低很多。

就是說第一層選擇最好是id,而是簡單選擇器,目的就是定義範圍,提高速度。

前端 jQuery選擇器

jquery selectorstitle src script body header container style head jqueryh1 header container heading1 heading oneh1 para1 hellop class heading2 heading...

前端 jQuery選擇器

jquery 使用 css 選擇器來選取 html 元素。p 選取元素。p.intro 選取所有class intro 的元素。p demo 選取所有id demo 的元素。jquery 使用 xpath 表示式來選擇帶有給定屬性的元素。href 選取所有帶有href屬性的元素。href 選取所有帶...

初識前端 jQuery的選擇器

選擇器方法 說明id選擇器 id屬性值 獲取id屬性為指定值的元素 如果出現同名id屬性,只會獲取第乙個 元素選擇器 標籤名 元素名 獲取指定標籤名的所有元素 類選擇器 class屬性值 獲取class屬性為指定值的所有元素 通用選擇器 獲取頁面中的所有元素 屬性選擇器 屬性名 屬性值 獲取設定過指...