jQuery层级选择器_动力节点节点Java学院整理

jQuery 前端之家
前端之家收集整理的这篇文章主要介绍了jQuery层级选择器_动力节点节点Java学院整理，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_4030@因为DOM的结构就是层级结构，所以我们经常要根据层级关系进行选择。


@H403_0@

层级选择器（Descendant Selector）

@H_403_0@如果两个DOM元素具有层级关系，就可以用$('ancestor descendant')来选择，层级之间用空格隔开。例如：

    • @H_403_0@要选出JavaScript，可以用层级选择器：

    ] $('div.testing li.lang-javascript'); // [
  • ]
    • @H_403_0@因为
    和
      都是
    • 的祖先节点，所以上面两种方式都可以选出相应的
    • 节点。 要选择所有的
    • 节点，用：

      @H_403_0@这种层级选择器相比单个的选择器好处在于，它缩小了选择范围，因为首先要定位父节点，才能选择相应的子节点，这样避免了页面其他不相关的元素。

      @H_403_0@例如：

      @H_403_0@就把选择范围限定在name属性为upload的表单里。如果页面有很多表单，其他表单的不会被选择。 多层选择也是允许的：

      403_0@包含的
      @H_403_0@

      子选择器（Child Selector）

      @H_403_0@子选择器$('parent>child')类似层级选择器，但是限定了层级关系必须是父子关系，就是节点必须是节点的直属子节点。还是以上面的例子：

      li.lang-javascript'); // 可以选出[
    • ] $('div.testing>li.lang-javascript'); // [],无法选出，因为
      和
    • 不构成父子关系
    @H_403_0@

    过滤器（Filter）

    @H_403_0@过滤器一般不单独使用，它通常附加在选择器上，帮助我们更精确地定位元素。观察过滤器的效果：

    $('ul.lang li:first-child'); // 仅选出JavaScript
    $('ul.lang li:last-child'); // 仅选出Lua
    $('ul.lang li:nth-child(2)'); // 选出第N个元素，N从1开始
    $('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素
    $('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素

    @H_403_0@

    表单相关

    @H_403_0@针对表单元素，jQuery还有一组特殊的选择器：

    @H_403_0@:input：可以选择，