jQuery in action 3rd - Selecting elements

jQuery(selector) / $(selector)

selector 选择器有多种形式，下面是 #ID，.class，element

　　　

jQuery 支持的 CSS 层级关系选择器

　　

jQuery 支持的 CSS 属性选择器

　　

 jQuery 的过滤器 filter

　　过滤器的写法以冒号 “:filter” 开头，用于过滤 $() 返回对象中的数据，以达到精确查找的目的。

　　1）位置过滤器

　　　　

　　　　注意，n（索引号） 从 0 开始，与 CSS 中（索引号从 1 开始）的功能不一致。
　　　　　　比如 “:even” 过滤器，认为第一个匹配的 DOM 元素的索引号为 0 ，而 CSS 中的 "even" 认为第一个匹配的 DOM 元素
　　　　　　索引号为 1。所以，在给 table 行 tr 设置交替背景颜色时要小心。

　　　　注意，可以给 :eq(n) ，:gt(n)，:lt(n)，的 n 传递一个负数，表示从最后一个元素开始，进行倒序匹配。

　　2）child filters

　　　　

　　　　注意，:nth-child() 与 :eq() 不同，经常容易混淆。

　　　　　　使用  :nth-child()  匹配查找时，不管上下文中包含的子元素类型是啥，都要计算，都占一个索引号位置。

　　　　　　使用 :eq() 匹配查找时，不管上下文中 selector 类型元素的前面和后面有多少其他类型的兄弟元素，它都一概忽略，

　　　　　　　　只计算 selector 类型元素的索引号。

　　　　　　再注意， :nth-child() 是按照 CSS 规范实现的，所以它的索引号是从 1 开始的，而不是 0

　　3）Form filter

　　　　一般情况下，可以写成 $('input[type="checkbox"][checked]')，

　　　　CSS 提供了一些伪类，那么可以写成 $('input[type="checkbox"]:checked')，

　　　　jQuery 提供了更为方便的一些自定义过滤器，那么可以写成 $('input:checkbox:checked')。

　　　　

　　　　可以组合 CSS 过滤器以及 jQuery 自定义过滤器，例如： $('input:checkbox:checked:enabled');

　　4）content filter

　　　　

　　5）其他过滤器

　　　　

　　　　示例：$('input:not(:checkbox)')、$(':not(img[src*="dog"])')、$('em:lang(zh-CN)')

　　　　提示：jQuery 3 修改了 :visible 和 :hidden 的意思，

　　　　　　:visible，匹配任何 layout boxes，即使它们的高度和宽度为0。比如 br 元素以及没有内容的 inline 元素。

　　　6）创建自定义过滤器　

$.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)');