萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS選擇器是什麼呢

CSS選擇器是什麼呢

我們為大家收集整理了關於CSS選擇器是什麼,以方便大家參考。自從JQuery實現了Selector後,貌似其他一些JavaScript框架也開始向Selector靠攏,相繼推出了自己的CSS選擇器, 考慮到css選擇器確實強大,所以,在easyUI中也添加了一個自己的cssSelector方法:easyUI.cssSelector('css選 擇器',dom范圍)

CSS選擇器實現原理:

一、解析

1、格式化數據,將css選擇器轉換成一種便於後面進行操作的格式,這一步很重要,這是數據結構部分,後面的實現都將以此為依據。

以下面數據為例:

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

首先,捕獲形如 [ 屬性 = 值 ] 的數據,將"="兩邊的空格去掉,然後將“值”裡的空格替換為一個不太可能會出現的臨時字串,如0x20156

然後,在+、:、>、[ 符號前加空格

接著,將#、.、+、:、]、>後的空格去掉

最好將單引號和雙引號也都去掉

做完上述替換操作後,變可得到形如下面的數據:

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

2、將格式化後的數據轉換成這樣的偽代碼:取節點函數('css選擇符',上一次操作的結果),以空格為分隔:

取節點函數('#a',上一次操作的結果)

取節點函數('b.c',上一次操作的結果)

取節點函數('.d',上一次操作的結果)

取節點函數('+e',上一次操作的結果)

取節點函數(':first-child',上一次操作的結果)

取節點函數('>f',上一次操作的結果)

取節點函數('[data=hello0xdh20156world!]',上一次操作的結果)

3、將css選擇器解析成具體的取節點函數,如:

#a應當解析成:document.getElementById('a')

二、編寫取節點函數,將偽代碼實現

在easyUI.cssSelector的實現中采用的是eval的方式,目前該方法尚未完全支持CSS2選擇器,還在測試階段!

希望大家可以學會CSS選擇器是什麼.想了解更多精彩內容,請關注我們的網站!

相關推薦:

css樣式命名規范的方法是什麼 

copyright © 萬盛學電腦網 all rights reserved