码迷,mamicode.com
首页 > Web开发 > 详细

jQuery - 自定义伪类 [:pseudoclass]

时间:2015-12-23 10:52:59      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:

有两种创建伪类的方法,

第一种

$.extend( $.expr[‘:‘],  {
  // 自定义的伪类名称:group
  group: function(element, index, matches, set) {
    var num = parseInt(matches[3], 10);

    if(isNaN(num) {
      return false;
    }

    return index % (num * 2) < num;
  }
});

1)、element,当前的 DOM 元素。

2)、index,当前 DOM 元素在结果集中的索引

3)、matches,数组,包含用于解析这个选择符的正则表达式的解析结果。

  一般来说,matches[3] 是这个数组中唯一有用的值;假如有一个选择符的形式为":groub(b)",

  则 matches[3] 中的值就是 b,也就是括号中的文本。

4)、set,匹配到当前元素的整个 DOM 元素集合

第二种, 

$.expr[‘:‘].pointsHigherThan = $.expr.createPseudo(function(filterParam) {
  var points = parseInt(filterParam, 10);
    return function(element, context, isXml) {
        return element.getAttribute(‘data-points‘) > points;
    }    
}

    分为三个步骤:

    第一步,给自定义过滤器起一个名字,比如 “pointsHigherThan”

    第二步,使用 createPseudo(filterParam) 函数创建过滤器对应的匿名函数,filterParam 参数的名字可随便起,
        这个参数是一个传给过滤器函数的可选参数。类似于传给过滤器 :eq(n) 的参数 n。

    第三步,在过滤器函数中再返回另外一个匿名函数,在这个函数内部编写过滤逻辑代码,最后返回 boolean 值表示是否匹配?

        jQuery 传递给此匿名函数三个参数,

        element 参数,是一个 DOMElement 元素,一次传递一个。

        context 参数,匹配元素的上下文参数

        isXML 参数,确定当前操作是在 XML 文档中吗?

    示例如下:$(‘.levels li:pointsHeighThan(20)‘);

 

[示例]:

  $("tr:group(3)").addClass(‘alt‘);

 

jQuery - 自定义伪类 [:pseudoclass]

标签:

原文地址:http://www.cnblogs.com/bylion/p/5068992.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!