當我們洋洋得意的使用jquery
強大的選擇器功能時有沒有在意過
jquery
的選擇效能問題呢，其實要想高效的使用
jquery
選擇器，了解其實現流程是很有必要的，那麼這篇文章我就簡單的講講其實現流程，相信會為讀者的
jquery
優化開發提供一些小的建議。
我們知道jquery
的$()
函式可以傳很多種引數（
document
、string、fn
、array
、number
），那麼
jquery
的init
方法就會根據你傳參的型別的不同進入不同的流程。其他的我們今天就不多說了，我們重點講一下對
string
型別的處理，因為只有它才會觸發
jquery
的選擇器功能。
1、首先是使用正規表示式檢查是不是建立
dom的操作，例如$(「
」)，就是要建立
div了；
2、否則就是選擇操作，然後會判斷是不是簡單的
id選擇，當然這一步也是正則匹配，
jquery
在這裡會毫不猶豫的呼叫
document.getelementbyid
，無疑，這是最快的選擇了；
3、最後就是直接進入
jquery.fn.find()
方法，這裡就是
jquery
所引用的
sizzle
選擇器放大光芒的地方了。
從上面我們可以看出來，jquery
選擇器只是對簡單的
id選擇開了小灶，其他的
css選擇很大一部分需要借助於
sizzle
，所以說，這裡總結一點，
簡單的id
選擇是jquery
中最快的了。
有的人就說了，我不可能都用id
選擇器呀，別急，咱們再看看
sizzle
強大的選擇功能吧。
sizzle
是jquery
從1.3
版本開始引入的選擇引擎。我們一般實現的選擇的選擇器模式（也包括
jquery 1.2
）都是left to right
模式，而
sizzle
卻別出新格，使用了
right to left
（以下我們簡稱
rtl例 1：$(
「div a」)
一般的選擇流程（ltr
）：、選擇頁面中所有的div
‚、選擇div
下的所有a標籤
ƒ、合併結果集
，返回結果集
sizzle的選擇流程（
rtl）：
、選擇頁面中所有的a標籤‚
、判斷a
標籤的父節點是否為
div標籤，是則
push
，否則shift
ƒ、返回結果集
有沒有發現，rtl
的選擇模式其實是少了乙個合併操作，不要小看這一步，其實節省了很多時間，這就是
sizzle
能夠高效的選擇結果集的訣竅之一，其實從
sizzle
的這一點就給了我們乙個高效選擇的建議，
多使用right to left
的選擇模式。
下面咱們看一下這麼乙個選擇：$('#test span')
，相信很多人都是用過類似這種的選擇模式，那麼其實現流程呢？
jquery
是通過$().find()
方法啟用
sizzle
的，上面寫的這種模式會有乙個函式判斷啟用
find
，然後才呼叫
sizzle
，那麼咱們再看一看另外一種相同的選擇：$(「
#test
」).find(
「span
」)，這種方法則會跳過
find
函式判斷，直接啟用
sizzle
，這一點改變，執行效率能夠提公升
8倍多，而且選擇結果相同，大家可以使用
firebug
測試一下喲（使用
console.profile("
效能1")
），這就給了我們另乙個建議，
多使用find
方法代替
css層級選擇。
咱們再看乙個選擇方法：$('span:eq(0)')
，通過firebug
可以看到，這個選擇方法呼叫了
34次函式，而結果相同的
$('span').first()
卻只呼叫了
14次，執行時間前者是後者的將近
20倍，過濾函式的優化效應可見一斑呀。
sizzle
在這裡有乙個判斷，如果存在位置資訊（例如
eq,first
等）就會執行
ltr選擇模式，遞迴呼叫
sizzle
，大大降低執行效率，所以這裡我建議，
多使用過濾選擇器，可以有效提高執行速度。
這裡就簡單的介紹到這裡，其實我感覺只要能夠做到上面的幾點就能很好地提高jquery
的選擇速度了。
個人整理，歡迎評錯。
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 屬性中給定的值。示例 查...