jquery学习笔记3 jq遍历

Posted 2020-08-27

遍历方式：向上（父级元素）  向下（子元素）    水平（同胞元素）

一、向上遍历

• parent()　　      向上一级   放回被选元素的直接父元素
• parents()          返回被选元素的所有祖先元素    一路向上遍历（父级以及父级的父级等）
• parentsUntil()    返回被选元素与括号内给定元素之间的所有祖先元素

$(document).ready(function(){
  $("span").parentsUntil("div");
});

　　

二、向下遍历

• children()            返回被选元素的所有直接子元素
• find()                  返回被选元素的后代元素  一路向下直到最后一个

$(document).ready(function(){
  $("div").find("span");
});

　　

$(document).ready(function(){
  $("div").find("*");
});

　　

三、水平遍历

1、siblings()       返回被选元素的所有同胞元素

 

2、next（）　　　　返回被选元素的下一份同胞元素

 

3、nextAll（）　　　　返回同胞元素的所有跟随的同胞元素

 

4、nextUntil()　　　　返回介于两个给定参数（之后）之间的所有的同胞元素

 

5、prev()　　　　　　返回被选元素的上一个同胞元素

 

6、prevAll()　　　　　返回被选元素之前的所有同胞元素　　　　　

 

7、prevUntil()　　　　　　返回同胞元素与给定的元素（之前）之间的所有同胞元素

 

四、过滤

1、first() 方法      返回被选元素的首个元素

eg:

$(document).ready(function(){
  $("div p").first();           //div的首个p元素
});

2、last()方法     返回被选元素的最后一个元素

eg：同上；

 

3、eq（）方法　　返回被选元素带有指定索引的元素

$(document).ready(function(){
  $("p").eq(1);             // 表示选取第二个p元素（索引从零开始）       
});        

　　

4、filter() 方法　　　　返回满足限制条件的元素

eg：

$(document).ready(function(){
  $("p").filter(".intro");   //返回类名为intro的所有p元素
});

　　

5、not（）方法　　    返回排除了不匹配标准的所有元素

$(document).ready(function(){
  $("p").not(".intro");      //返回除了类名有intro之外的，所有p元素
});