是否有适用于JavaScript的CSS3选择器解析器?

时间:2010-10-23 03:20:23

标签: javascript css-selectors

任何人都知道将解析CSS3选择器的片段:

"form#network_template[method='put'][action='#form_{keyname}']"

到此:

{
  tag: "form",
  id: "network_template",
  method: "put",
  action: "#form_{keyname}"
}

或者这个:

<form id="network_template" method="put" action="#form_{keyname}">

2 个答案:

答案 0 :(得分:5)

假设您打算在标题中要求CSS3选择器解析器,Mootools中使用的Slick可以完成这项工作;来自github页面:

Slick.parse("h1, h2, ul > li, .things")

{
"raw": "h1, h2, ul > li, .things",
"expressions": [
    [{ "combinator":" ", "tag": "h1" }],
    [{ "combinator":" ", "tag": "h2" }],
    [{ "combinator":" ", "tag": "ul" }, { "combinator": ">", "tag": "li" }],
    [{ "combinator":" ", "tag": "*", "classList": ["things"], "classes": [{"value": "things", "regexp":RegExp }] }]
]
}

Mootools还可以直接从选择器创建具有适当属性的元素。

答案 1 :(得分:2)

Sizzle在jQuery下面使用。还有Peppy。较新的版本至少有一些CSS3选择器支持。 YMMV。

谷歌搜索揭示了有趣的线索。