CSS選取器- easyUI.cssSelector更新

來源:互聯網
上載者:User
  自從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')
E#a應當解析成:document.getElementsByTagName('E'),然後遍曆id=a的
之前進行過轉換的0x20156記得重新轉換為空白格。
更多css Selectors的解釋請參見:
http://www.w3.org/TR/CSS2/selector.html
二、編寫取節點函數,將虛擬碼實現
在easyUI.cssSelector的實現中採用的是eval的方式,目前該方法尚未完全支援CSS2選取器,還在測試階段!
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.