自從JQuery實(shí)現(xiàn)了Selector后，貌似其他一些JavaScript框架也開(kāi)始向Selector靠攏，相繼推出了自己的CSS選擇器， 考慮到css選擇器確實(shí)強(qiáng)大，所以，在easyUI中也添加了一個(gè)自己的cssSelector方法：easyUI.cssSelector('css選 擇器',dom范圍)

CSS選擇器實(shí)現(xiàn)原理：
 
一、解析

1、格式化數(shù)據(jù)，將css選擇器轉(zhuǎn)換成一種便于后面進(jìn)行操作的格式，這一步很重要，這是數(shù)據(jù)結(jié)構(gòu)部分，后面的實(shí)現(xiàn)都將以此為依據(jù)。

以下面數(shù)據(jù)為例：

#a b.c .d + e:first-child > f[data = "hello world!"]

首先，捕獲形如 [ 屬性 = 值 ] 的數(shù)據(jù)，將"="兩邊的空格去掉，然后將“值”里的空格替換為一個(gè)不太可能會(huì)出現(xiàn)的臨時(shí)字串，如0x20156

然后，在+、：、>、[ 符號(hào)前加空格

接著，將#、.、+、:、]、>后的空格去掉

最好將單引號(hào)和雙引號(hào)也都去掉

做完上述替換操作后，變可得到形如下面的數(shù)據(jù)：

#a b.c .d +e :first-child >f [data=hello0xdh20156world!]

2、將格式化后的數(shù)據(jù)轉(zhuǎn)換成這樣的偽代碼：取節(jié)點(diǎn)函數(shù)('css選擇符',上一次操作的結(jié)果)，以空格為分隔：

取節(jié)點(diǎn)函數(shù)('#a',上一次操作的結(jié)果)

取節(jié)點(diǎn)函數(shù)('b.c',上一次操作的結(jié)果)

取節(jié)點(diǎn)函數(shù)('.d',上一次操作的結(jié)果)

取節(jié)點(diǎn)函數(shù)('+e',上一次操作的結(jié)果)

取節(jié)點(diǎn)函數(shù)(':first-child',上一次操作的結(jié)果)

取節(jié)點(diǎn)函數(shù)('>f',上一次操作的結(jié)果)

取節(jié)點(diǎn)函數(shù)('[data=hello0xdh20156world!]',上一次操作的結(jié)果)

3、將css選擇器解析成具體的取節(jié)點(diǎn)函數(shù)，如：

#a應(yīng)當(dāng)解析成：document.getElementById('a')

E#a應(yīng)當(dāng)解析成：document.getElementsByTagName('E')，然后遍歷id=a的

之前進(jìn)行過(guò)轉(zhuǎn)換的0x20156記得重新轉(zhuǎn)換為空格。

更多css Selectors的解釋請(qǐng)參見(jiàn)：

http://www.w3.org/TR/CSS2/selector.html

二、編寫(xiě)取節(jié)點(diǎn)函數(shù)，將偽代碼實(shí)現(xiàn)

在easyUI.cssSelector的實(shí)現(xiàn)中采用的是eval的方式，目前該方法尚未完全支持CSS2選擇器，還在測(cè)試階段！

演示：

easyUI Css Selector測(cè)試地址：http://www.jslab.org.cn/?tag=cssSelector

原文地址：http://www.v-ec.com/dh20156/article.asp?id=262

• css