easyUI.cssSelector更新的方法

歡迎大家在這裡學習easyUI.cssSelector更新!下面是我們給大家整理出來的精彩內容。希望大家在這裡學習!

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')

E#a應當解析成：document.getElementsByTagName('E')，然後遍歷id=a的

之前進行過轉換的0x20156記得重新轉換為空格。

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

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

好了，easyUI.cssSelector更新內容就給大家介紹到這裡了。希望大家繼續關注我們的網站!

相關推薦：

自動按時段切換網頁的CSS風格的方法