jQuery in action 3rd - Selecting elements

时间:2023-03-09 03:10:47
jQuery in action 3rd - Selecting elements

jQuery(selector) / $(selector)

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

   jQuery in action 3rd - Selecting elements

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

  jQuery in action 3rd - Selecting elements

jQuery 支持的 CSS 属性选择器

  jQuery in action 3rd - Selecting elements

 jQuery 的过滤器 filter

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

  1)位置过滤器

    jQuery in action 3rd - Selecting elements

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

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

  2)child filters

    jQuery in action 3rd - Selecting elements

    注意,: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')。

    jQuery in action 3rd - Selecting elements

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

  4)content filter

    jQuery in action 3rd - Selecting elements

  5)其他过滤器

    jQuery in action 3rd - Selecting elements

    示例:$('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)');