JQuery中的遍历-元素查找

╰半夏微凉° 2022-11-26 15:58 173阅读 0赞

#### JQuery遍历概念 ####

jQuery 遍历，可以理解为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。

#### 废话不多说先上方法 ####

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>add()</td> 
   <td>把元素添加到匹配元素的集合中</td> 
  </tr> 
  <tr> 
   <td>addBack()</td> 
   <td>把之前的元素集添加到当前集合中</td> 
  </tr> 
  <tr> 
   <td>andSelf()</td> 
   <td>在版本 1.8 中被废弃。addBack()的别名</td> 
  </tr> 
  <tr> 
   <td>children()</td> 
   <td>返回被选元素的所有直接子元素</td> 
  </tr> 
  <tr> 
   <td>closest()</td> 
   <td>返回被选元素的第一个祖先元素</td> 
  </tr> 
  <tr> 
   <td>contents()</td> 
   <td>返回被选元素的所有直接子元素（包含文本和注释节点）</td> 
  </tr> 
  <tr> 
   <td>each()</td> 
   <td>为每个匹配元素执行函数</td> 
  </tr> 
  <tr> 
   <td>end()</td> 
   <td>结束当前链中最近的一次筛选操作，并把匹配元素集合返回到前一次的状态</td> 
  </tr> 
  <tr> 
   <td>eq()</td> 
   <td>返回带有被选元素的指定索引号的元素</td> 
  </tr> 
  <tr> 
   <td>filter()</td> 
   <td>把匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素</td> 
  </tr> 
  <tr> 
   <td>find()</td> 
   <td>返回被选元素的后代元素</td> 
  </tr> 
  <tr> 
   <td>first()</td> 
   <td>返回被选元素的第一个元素</td> 
  </tr> 
  <tr> 
   <td>has()</td> 
   <td>返回拥有一个或多个元素在其内的所有元素</td> 
  </tr> 
  <tr> 
   <td>last()</td> 
   <td>返回被选元素的最后一个元素</td> 
  </tr> 
  <tr> 
   <td>map()</td> 
   <td>把当前匹配集合中的每个元素传递给函数，产生包含返回值的新jQuery 对象</td> 
  </tr> 
  <tr> 
   <td>next()</td> 
   <td>返回被选元素的后一个同级元素</td> 
  </tr> 
  <tr> 
   <td>nextAll()</td> 
   <td>返回被选元素之后的所有同级元素</td> 
  </tr> 
  <tr> 
   <td>nextUntil()</td> 
   <td>返回介于两个给定参数之间的每个元素之后的所有同级元素</td> 
  </tr> 
  <tr> 
   <td>not()</td> 
   <td>从匹配元素集合中移除元素</td> 
  </tr> 
  <tr> 
   <td>offsetParent()</td> 
   <td>返回第一个定位的父元素</td> 
  </tr> 
  <tr> 
   <td>parent()</td> 
   <td>返回被选元素的直接父元素</td> 
  </tr> 
  <tr> 
   <td>parents()</td> 
   <td>返回被选元素的所有祖先元素</td> 
  </tr> 
  <tr> 
   <td>parentsUntil()</td> 
   <td>返回介于两个给定参数之间的所有祖先元素</td> 
  </tr> 
  <tr> 
   <td>prev()</td> 
   <td>返回被选元素的前一个同级元素</td> 
  </tr> 
  <tr> 
   <td>prevAll()</td> 
   <td>返回被选元素之前的所有同级元素</td> 
  </tr> 
  <tr> 
   <td>prevUntil()</td> 
   <td>返回介于两个给定参数之间的每个元素之前的所有同级元素</td> 
  </tr> 
  <tr> 
   <td>siblings()</td> 
   <td>返回被选元素的所有同级元素</td> 
  </tr> 
  <tr> 
   <td>slice()</td> 
   <td>把匹配元素集合缩减为指定范围的子集</td> 
  </tr> 
 </tbody> 
</table>

#### 遍历详解 ####

##### 1.向上遍历 #####

**-parent()**  
返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。  
**-parents()**  
返回被选元素的所有祖先元素，它一路向上直到文档的根元素。  
parents()方法可直接指定父元素  
eg：  
返回所有 span 元素的所有祖先，并且它是 ul 元素：

$("span").parents("ul");

**-parentsUntil()**  
返回介于两个给定元素之间的所有祖先元素。

##### 2.向下遍历 #####

**-children()**  
返回被选元素的所有直接子元素。 该方法只会向下一级对 DOM 树进行遍历。  
**-find()**  
返回被选元素的后代元素，一路向下直到最后一个后代。  
eg：  
返回div所有后代

$("div").find("*");

##### 3.水平遍历 #####

**-siblings()**  
返回被选元素的所有同胞元素。  
**-next()**  
返回被选元素的下一个同胞元素。  
**-nextAll()**  
返回被选元素的所有跟随的同胞元素。  
**-nextUntil()**  
方法返回介于两个给定参数之间的所有跟随的同胞元素。$(“”)以后的所有的同辈元素，直到…之前的元素，不包括匹配的元素本身。  
**-prev(), prevAll() & prevUntil()**  
prev(),prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

##### 4.过滤 #####

**-first()**  
返回被选元素的首个元素。  
**-last()**  
返回被选元素的最后一个元素。  
**-eq()**  
返回被选元素中带有指定索引号的元素。  
**-filter()**  
允许规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。  
eg：

$(".parent div").filter(":odd").css("color","red");

**-not()**  
返回不匹配标准的所有元素。not() 方法与 filter() 相反。

##### 5.get方法与eq方法 #####

get(index) 方法获得由选择器指定的 DOM 元素  
下标是从0开始，index可选。  
通过 index 规定获取哪个匹配元素  
eg：  
取得 所有p标签中第一个p标签的内容

$("button").click(function(){ 
    	x=$("p").get(0);
    	Alert(x. innerHTML); 
     });

index()方法查找元素

$("p").click(function(){
    	alert($(this).index())；
     })

***get()和eq()方法两者区别***  
eq返回的是一个jquery对象 ，可以继续调用jquery其他方法，  
get返回的是一个html 对象数组，不能调用jQuery的其他方法  
**-jQuery each()**  
可以遍历指定的元素集合，通过回调函数返回遍历元素的序列号

$(selector).each(function(index){})
    $.each($(selector),function(){})