2.选择元素 - 自定义过滤器《jquery实战》

96
大捕猎店
2017.04.24 23:45* 字数 779
这里是选择器

2.5.6 自定义过滤器

jQuery 中有两种方法创建自定义的过滤器。第一种比较简单,但是不鼓励,从 jQuery 1.8 开始已经被第二种方法取代。记住,使用新方法时,你自定义的过滤器在 jQuery 1.8 之前的版本不可用。

假设一个编程技术游戏。该游戏很多级别,可以区分不同的难度,用户可以获取分数,可以获取不同的编程技能。

<ul class="levels">
     <li data-level="1" data-points="1" data-technologies="javascript node grunt">Level 1</li>
     <li data-level="2" data-points="10" data-technologies="jquery requirejs">Level 2</li>
     <li data-level="3" data-points="100" data-technologies="php composer">Level 3</li>
     <li data-level="4" data-points="1000" data-technologies="javascript jquery backbone">Level 4</li>
</ul>

假如经常要选择数据级别(data-level)大于2,获取的数据分数(data-points)大于100的游戏,且包含 jQuery 技术的(data-technologies)。但是如何使用选择器进行打两的对比呢?事实上,不可以。为了完成这个任务,必须初始化集合,然后获取需要的元素:

//li[data-technologies~="jquery"] 相当于 li[data-technologies*="jquery"]
var $levels = $('.levels li[data-technologies~="jquery"]');
    var mathchedLevels = [];
    for (var i = 0; i < $levels.length; i++) {
        if ($levels[i].getAttribute('data-level') > 2 && 
            $levels[i].getAttribute('data-points') > 100)
            mathchedLevels.push($levels[i]);
    };

创建自定义过滤器可以不用每次重复:

$.expr[':'].requiredLevel = $.expr.createPseudo(function(filterParam) {
        return function(element, context, isXml) {
            return element.getAttribute('data-level') > 2 && 
                    element.getAttribute('data-points') > 100;
        };
    });

过滤器只是一个添加了属性:的函数,它属于jQuery的 expr 属性。它是一个称为“冒号(colon)”的属性。:属性是一个包含jQuery原声过滤器的属性,可以使用它添加自己的代码。

你可以调用自定义过滤器requiredLevel,而不是直接传递这个函数。

$('.levels li:requiredLevel')

也可以使用称为 createPseudo 的jQuery工具(它属于底层的Sizzle选择器引擎)。

对于 createPseudo() 函数,可以传递匿名方法,声明一个参数叫 filterParam。filter Param标识过滤器参数,这个参数也可以另外起名字。它是一个可选参数,与 :eq()nth-child() 类似。在匿名函数内部,可以创建另外一个匿名函数,用来执行特定的过滤器工作。在函数内,jQuery 传递要处理的元素(element参数),从这些 Dom Element 或 Dom Document 对象(上下文参数)里进行查询。Boolean 类型的参数勇于指定是不是处理 XML文档(isXML参数)。在最内层的函数里,可以编写代码来测试元素是否被保留。

:属性自定义过滤器

前面一个例子引入了参数filterParam,可以向自定义过滤器传递参数。因为需求是固定的,所以没有使用它。现在来看看使用它帮助我们完成工作。

假设要根据提供的分数来查找特定的级别,比如“选择分数大于X的所有级别”。这是一个要使用参数传递给自定义伪选择器的好机会,基于现在的需求。

$.expr[':'].pointsHigherThan = $.expr.createPseudo(function (filterParam) {
            var points = parseInt(filterParam, 10);//缓存的参数,可以在函数闭包内访问
            return function (element, context, isXml) {
               return element.getAttribute('data-points') > points;
            };
         });

这里使用的是 createPseudo() 函数,但调用的是 pointsHigherThan 过滤器、在声明第二个函数前,需要在变量 points 中保存参数。所以,它可以在闭包里访问。此时,可以通过存储的变量来使用给定的参数。

createPseudo()函数传参

看看允许你获取50分以上的级别。

var $higherPointsLevels = $('.levels li:pointsHigherThan(50)');
JQuery
Web note ad 1