jQuery 1.8版本后, 可以通過$ 的createPseudo()方法自定義選擇器,滿足不同的需求,本文來自<jquery in action>
<ul class="levels"><li data-level="1" data-points="1" data-technologies="javascrip grunt node">level 1</li><li data-level="2" data-points="10" data-technologies="php composer">level 2</li><li data-level="3" data-points="100" data-technologies="jquery requirejs">level 3</li><li data-level="4" data-points="1000" data-technologies="javascript jquery backbone">level 4</li> </ul>
1.選擇等級高于2的, 分數高于100的li
$.expr[":"].requireLevel = $.expr.createPseudo(function(param) {return function(element, context, isXML) {return element.getAttribute("data-level") > 2 && element.getAttribute("data-points") > 100;} })
$("ul li:requireLevel(2, 100)").css({"color": "aqua","background": "yellow" });
?
2.選擇分數高于50的
$.expr[":"].highPoint = $.expr.createPseudo(function(param) {var points = parseInt(param, 10); //緩存參數,以便下面閉包環境中能使用return function(element, context, isXML) {return element.getAttribute("data-points") > points;} })
$("ul li:highPoint(50)").css({ "fontSize": "1.4em" });
?
3.幾個選擇器
1 選擇所有沒有子節點,在文檔中位置為偶數,并且不包含wrapper類名的所有div
$("div:empty:even:not(.wrap)")
2 選擇form中第一個元素是input,類型為password,并且包含required特性 的 input
$("input[required]:password:first-child", "form")
3 選擇所有的a, p,其祖先元素為div
$("div a, div p") 或者 $("a, p", "div")
4 選擇元素只包含數字,字符, 或下劃線(使用自定義選擇器)
$.expr[":"].onlyText = $.expr.createPseudo(function (filterParam) {
return function(element, context, isXML) {
return element.innerHTML.match("/^\w+$/");
}
});
?