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

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 中保存参数。所以，它可以在闭包里访问。此时，可以通过存储的变量来使用给定的参数。

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

var $higherPointsLevels = $('.levels li:pointsHigherThan(50)');