jquery 父级元素选择器 jquery 父节点选择器

转载

蓝色忧郁花 2023-11-24 20:25:20

文章标签 jquery 父级元素选择器 jQuery 选择器字符串 文章分类 jQuery 前端开发

一、查找父节点

1、parent([expr])

取得一个包含着所有匹配元素的唯一父元素的元素集合

案例无参

<ul>
     <li id="li1"><p id="p1"></p></li>
     <li id="li2"></li>
     <li id="li3"></li>
     <li id="li4"><p id="p2"></p></li>
     <li id="li5"></li>
</ul>
  <script>
             $(function() {
                 var li2Parent = $("#li2").parent();
                console.log(li2Parent);
                console.log($("ul")===li2Parent);
            })
   </script>

jquery 父级元素选择器 jquery 父节点选择器_jquery 父级元素选择器

案例有参

<script>
             $(function() {
                 var bodyParent = $("#body").parent();
                console.log(bodyParent);
                console.log($("body")===bodyParent);
            })
   </script>

jquery 父级元素选择器 jquery 父节点选择器_jquery 父级元素选择器_02

2、parents([expr])

取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。

案例无参

<ul>
     <li id="li1"><p id="p1"></p></li>
     <li id="li2"></li>
     <li id="li3"></li>
     <li id="li4"><p id="p2"></p></li>
     <li id="li5"></li>
</ul>
<script>
        $(function() {
                console.log($("#li2").parents());
            })
</script>

jquery 父级元素选择器 jquery 父节点选择器_jquery 父级元素选择器_03

案例有参

<script>
             $(function() {
                console.log($("#li2").parents("body"));
            })
   </script>

jquery 父级元素选择器 jquery 父节点选择器_jquery 父级元素选择器_04

二、查找兄弟节点

1、next([expr])

取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。

案例无参

<ul>
     <li id="li1"><p id="p1"></p></li>
     <li id="li2"></li>
     <li id="li3"></li>
     <li id="li4"></li>
     <li id="li5"></li>
</ul>
<script>
     $(function() {
                console.log($("#li2").next());
      })
</script>

jquery 父级元素选择器 jquery 父节点选择器_jQuery_05

如果节点是多个，那么都匹配

<script>
      $(function() {
           console.log($("li").next());
      })
</script>

jquery 父级元素选择器 jquery 父节点选择器_选择器_06

案例有参

<ul>
     <li id="li1"><p id="p1"></p></li>
     <li id="li2"></li>
     <li id="li3"></li>
     <li id="li4"></li>
     <li id="li5"></li>
</ul>
<script>
       $(function() {
            console.log($("#li1").next("p"));
       })
</script>

jquery 父级元素选择器 jquery 父节点选择器_jquery 父级元素选择器_07

2、nextAll([expr])

查找当前元素之后所有的同辈元素。

案例无参

<ul>
     <li id="li1"><p id="p1"></p></li>
     <li id="li2"></li>
     <li id="li3"></li>
     <li id="li4"><p id="p2"></p></li>
     <li id="li5"></li>
</ul>
<script>
      $(function() {
             console.log($("#li2").nextAll());
      })
</script>

jquery 父级元素选择器 jquery 父节点选择器_jquery 父级元素选择器_08

案例有参

<ul>
     <li id="li1"><p id="p1"></p></li>
     <li id="li2"></li>
     <li id="li3"></li>
     <li id="li4"><p id="p2"></p></li>
     <li id="li5"></li>
</ul>
<script>
      $(function() {
          console.log($("#li2").nextAll("#li4"));
       })
</script>

jquery 父级元素选择器 jquery 父节点选择器_jquery 父级元素选择器_09

3、prev([expr])

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。

案例无参

<ul>
     <li id="li1"><p id="p1"></p></li>
     <li id="li2"></li>
     <li id="li3"></li>
     <li id="li4"><p id="p2"></p></li>
     <li id="li5"></li>
</ul>
<script>
    $(function() {
         console.log($("#li2").prev());
     })
</script>

jquery 父级元素选择器 jquery 父节点选择器_jquery 父级元素选择器_10

案例有参

<script>
         $(function() {
                     console.log($("#li2").prev("p"));
         })
 </script>

4、prevAll([expr])

查找当前元素之前所有的同辈元素可以用表达式过滤。

案例无参

<ul>
     <li id="li1"><p id="p1"></p></li>
     <li id="li2"></li>
     <li id="li3"></li>
     <li id="li4"><p id="p2"></p></li>
     <li id="li5"></li>
</ul>
<script>
        $(function() {
               console.log($("#li4").prevAll());
        })
</script>

jquery 父级元素选择器 jquery 父节点选择器_jQuery_11

案例有参

<script>
       $(function() {
                console.log($("#li4").prevAll("#li2"));
        })
</script>

5、siblings([expr])

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。参数

案例无参

<ul>
     <li id="li1"><p id="p1"></p></li>
     <li id="li2"></li>
     <li id="li3"></li>
     <li id="li4"><p id="p2"></p></li>
     <li id="li5"></li>
</ul>
<script>
    $(function() {
           console.log($("#li4").siblings());
    })
</script>

jquery 父级元素选择器 jquery 父节点选择器_jQuery_12

案例有参

<script>
      $(function() {
           console.log($("#li4").siblings("#li1"));
      })
</script>

jquery 父级元素选择器 jquery 父节点选择器_选择器_13

三、查找子节点

1、children([expr])

取得一个包含匹配的元素集合中每一个元素的所有直系子元素的元素集合。
可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。

案例：无参时表示所有子元素的元素集合。

<ul>
     <li id="li1"><p id="p1"></p></li>
     <li id="li2"></li>
     <li id="li3"></li>
     <li id="li4"></li>
     <li id="li5"></li>
</ul>
<script>
    $(function() {
        console.log($("ul").children());
    })
</script>

jquery 父级元素选择器 jquery 父节点选择器_字符串_14

有参时，过滤子元素

<ul>
     <li id="li1"><p id="p1"></p></li>
     <li id="li2"></li>
     <li id="li3"></li>
     <li id="li4"></li>
     <li id="li5"></li>
</ul>
<script>
   $(document).ready(function() {
          console.log($("ul").children("#li3"));
   })
</script>

2、find(expr|obj|ele)

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的所有后代元素的好方法。

参数expr，用于查找的表达式

<ul>
     <li id="li1"><p id="p1"></p></li>
     <li id="li2"></li>
     <li id="li3"></li>
     <li id="li4"></li>
     <li id="li5"></li>
</ul>
<script>
     $(function() {
          console.log($("ul").find("p"));
     })
</script>

jquery 父级元素选择器 jquery 父节点选择器_选择器_15

参数obj，一个用于匹配元素的jQuery对象

<script>
   $(function() {
            console.log($("ul").find($("p")));
        })
</script>

jquery 父级元素选择器 jquery 父节点选择器_jQuery_16

参数ele，一个DOM元素

<script>
        $(function() {
            console.log($("ul").find(document.getElementById("p1")));
        })
</script>

jquery 父级元素选择器 jquery 父节点选择器_选择器_17

四、过滤

1、eq(index|-index)

获取当前链式操作中第N个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个
参数index 一个整数，指示元素基于0的位置,这个元素的位置是从0算起。参数-index
一个整数，指示元素的位置，从集合中的最后一个元素开始倒数。(-1算起)

案例参数为index

<ul>
     <li id="li1"><p id="p1"></p></li>
     <li id="li2"></li>
     <li id="li3"></li>
     <li id="li4"><p id="p2"></p></li>
     <li id="li5"></li>
</ul>
<script>
    $(function() {
         console.log($("[id]").eq(1));
     })
</script>

jquery 父级元素选择器 jquery 父节点选择器_jquery 父级元素选择器_18

案例参数为-index

<ul>
     <li id="li1"><p id="p1"></p></li>
     <li id="li2"></li>
     <li id="li3"></li>
     <li id="li4"><p id="p2"></p></li>
     <li id="li5"></li>
</ul>
<script>
      $(function() {
           console.log($("[id]").eq(-1));
      })
</script>

jquery 父级元素选择器 jquery 父节点选择器_选择器_19

2、first()

获取第一个元素

<ul>
     <li id="li1"><p id="p1"></p></li>
     <li id="li2"></li>
     <li id="li3"></li>
     <li id="li4"><p id="p2"></p></li>
     <li id="li5"></li>
</ul>
<script>
       $(function() {
            console.log($("[id]").first());
        })
</script>

3、last()

获取最后个元素

<ul>
     <li id="li1"><p id="p1"></p></li>
     <li id="li2"></li>
     <li id="li3"></li>
     <li id="li4"><p id="p2"></p></li>
     <li id="li5"></li>
</ul>
<script>
       $(function() {
             console.log($("[id]").last());
        })
</script>

4、filter(expr|obj|ele|fn)

筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式
参数expr 字符串值，包含供匹配当前元素集合的选择器表达式。参数 obj 现有的jQuery对象，以匹配当前的元素。参数ele
一个用于匹配元素的DOM元素。参数fn
一个函数用来作为测试元素的集合。它接受一个参数index，这是元素在jQuery集合的索引。在函数， this指的是当前的DOM元素。

案例参数expr

<ul>
     <li id="li1" ><p id="p1"></p></li>
     <li id="li2" class="c2"></li>
     <li id="li3"></li>
     <li id="li4"><p id="p2"></p></li>
     <li id="li5"></li>
</ul>
<script>
        $(function() {
             console.log($("[id]").filter("p"));
       })
</script>

jquery 父级元素选择器 jquery 父节点选择器_jQuery_20

案例参数 obj

<script>
         $(function() {            
              console.log($("[id]").filter($("p")));
         })
 </script>

案例参数ele

<script>
      $(function() { 
                     console.log($("[id]").filter(document.getElementsByTagName("p")));
        })
</script>

5、map(callback)

将一组元素转换成其他数组（不论是否是元素数组）
你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用’$.map()'来方便的建立。
参数callback：给每个元素执行的函数

<form>
     <input type="text" name="name" value="John" />
     <input type="text" name="password" value="password" />
     <input type="text" name="url" value="http://ejohn.org/" />
</form>
<script>
     $(function() {
         var $temp = $("input").map(function() {
                         return $(this).val();
                     })
         console.log($temp);                            
      })
</script>

jquery 父级元素选择器 jquery 父节点选择器_jQuery_21

6、has(expr|ele)

保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.has()方法将会从给定的jQuery对象中重新创建一组匹配的对象。提供的选择器会一一测试原先那些对象的后代，含有匹配后代的对象将得以保留。
参数expr：一个选择器字符串。参数element：一个DOM元素

<div id="box1">
     <p></p>
</div>
           
<div id="box2"></div>

<script>
   $(function(){
       console.log($("div").has("p"));
   })
</script>

jquery 父级元素选择器 jquery 父节点选择器_字符串_22

7、not(expr|ele|fn)

从匹配元素的集合中删除与指定表达式匹配的元素参数expr：一个选择器字符串。参数ele：一个DOM元素
fn：一个用来检查集合中每个元素的函数。this是当前的元素。格式是function(index)

<ul>
  <li id="li1"></li>
  <li id="li2"></li>
  <li id="li3"></li>
  <li id="li4"></li>
  <li id="li5"></li>
</ul>

<script>
    $(function(){
        console.log($("li[id]").not("#li2"));
    })
</script>

jquery 父级元素选择器 jquery 父节点选择器_jQuery_23

8、slice(start, [end])

选取一个匹配的子集
参数start 开始选取子集的位置。第一个元素是0.如果是负数，则可以从集合的尾部开始选起。参数end
结束选取自己的位置，如果不指定，则就是本身的结尾。

<ul>
     <li id="li1" ><p id="p1"></p></li>
     <li id="li2" class="c2"></li>
     <li id="li3"></li>
     <li id="li4"><p id="p2"></p></li>
     <li id="li5"></li>
</ul>
 <script>
       $(function() {                     
           console.log($("li").slice(1,3));           
       })
</script>

jquery 父级元素选择器 jquery 父节点选择器_jquery 父级元素选择器_24

五、串联

1、add(expr|ele|h|obj[,c])

把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。 jQuery 1.4 中，
.add()方法返回的结果将始终以元素在HTML文档中出现的顺序来排序，而不再是简单的添加。 jQuery 1.9 中，
.add()方法返回的结果总是按照节点在document（文档）中的顺序排列。在1.9之前，如果上下文或输入的集合中任何一个以脱离文档的节点（未在文档中）开始，使用.add()方法节点不会按照document（文档）中的顺序排序。现在，返回的节点按照文档中的顺序排序，并且脱离文档的节点被放置在集合的末尾。
参数expr：一个用于匹配元素的选择器字符串。参数ele：一个DOM元素。参数h：HTML片段添加到匹配的元素。
参数obj：一个jqeruy对象增加到匹配的元素参数c : 作为待查找的 DOM 元素集、文档或 jQuery 对象。

<p>Hello</p>
<span>Hello Again</span>
<script>
   $(document).ready(function() {
       var $temp = $("p").add("span");
       console.log($temp);  
    })
</script>

jquery 父级元素选择器 jquery 父节点选择器_jquery 父级元素选择器_25

2、addBack()

添加堆栈中元素集合到当前集合，一个选择性的过滤选择器。如上所述在讨论中的.end()，
jQuery对象维护一个堆栈内部来跟踪匹配的元素集合的变化。当一个DOM遍历方法被调用时，新的元素集合推入到堆栈中。
如果还需要包含先前的元素集合，.addBack() 可以提供帮助。考虑一个页面，一个简单的列表就可以了

<ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li class="third-item">list item 3</li>
        <li id="li4">list item 4</li>
        <li id="li5">list item 5</li>
     </ul>
     <script>
            $(function() {  
                  var $temp = $('li.third-item').nextAll();
                        console.log($temp);
                          
             })
     </script>

jquery 父级元素选择器 jquery 父节点选择器_jQuery_26

<script>
       $(function() {  
                var $temp = $('li.third-item').nextAll().addBack();
                    console.log($temp);                      
       })
     </script>

jquery 父级元素选择器 jquery 父节点选择器_jquery 父级元素选择器_27

首先，初始选择位于第3项，初始化堆栈集合只包含这项。调用.nextAll() 后将第4和第5项推入堆栈。最后，调用.addBack() 合并这两个组元素在一起，创建一个jQuery对象，指向所有三个项元素（按照文档中的顺序）：{[<li.third-item>,

,
]}

3、contents()

查找匹配元素内部所有的子节点（包括文本节点，空白也是节点）。如果元素是一个iframe，则查找文档内容

<div>
     <section><p id="p1">段落1</p></section>
     <p id="p2">段落2<p>
</div>
<script>
     $(function() {
           var $temp = $('div').contents();
             console.log($temp);                      
     })
</script>

jquery 父级元素选择器 jquery 父节点选择器_jquery 父级元素选择器_28

<div>
        <section>
            <p id="p1">段落1</p>
        </section>
        <p id="p2">段落2<p>
  </div>
<script>
$(function() {
   var $temp = $('div').contents();
   console.log($temp);                      
})
</script>

jquery 父级元素选择器 jquery 父节点选择器_jQuery_29

4、end()

回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。
如果之前没有破坏性操作，则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。这包括在 Traversing
中任何返回一个jQuery对象的函数–‘add’, ‘andSelf’, ‘children’, ‘filter’, ‘find’,
‘map’, ‘next’, ‘nextAll’, ‘not’, ‘parent’, ‘parents’, ‘prev’,
‘prevAll’, ‘siblings’ and ‘slice’–再加上 Manipulation 中的 ‘clone’。

<ul>
     <li id="li1" ><p id="p1"></p></li>
     <li id="li2" class="c2"></li>
     <li id="li3"></li>
     <li id="li4"><p id="p2"></p></li>
     <li id="li5"></li>
</ul>
<script>
      $(function() {
           console.log($("ul").children().end());
       })
</script>

jquery 父级元素选择器 jquery 父节点选择器_字符串_30