jQuery自定义选择器

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+$/");
　　　　　　}　
 　　});

 

转载于:https://www.cnblogs.com/JamesSawyer/p/5739887.html