jQuery - DOM 遍历

太过爱你忘了你带给我的痛 2022-05-30 05:35 229阅读 0赞

## jQuery DOM 过滤方法 ##

下表列出了有用的方法，你可以用它来从 DOM 元素列表中过滤掉各种元素 ——

<table> 
 <tbody> 
 <tr> 
 <th>序号</th> 
 <th>方法 &amp; 描述</th> 
 </tr> 
 <tr> 
 <td>1</td> 
 <td>eq( index )将一个匹配的元素集合减小为一个单个的元素。</td> 
 </tr> 
 <tr> 
 <td>2</td> 
 <td>filter( selector )从匹配的元素集合中删除与指定的选择器不匹配的元素。</td> 
 </tr> 
 <tr> 
 <td>3</td> 
 <td>filter( fn )从匹配的元素集合中删除与指定的函数不匹配的元素。</td> 
 </tr> 
 <tr> 
 <td>4</td> 
 <td>is( selector )检查表达式的当前选择，如果选项中至少有一个元素符合给定的选择器，那么返回 true。</td> 
 </tr> 
 <tr> 
 <td>5</td> 
 <td>map( callback )将 jQuery 对象中的一组元素转换成 jQuery 数组中的另一组值(该数组可能包含也可能不包含元素)。</td> 
 </tr> 
 <tr> 
 <td>6</td> 
 <td>not( selector )从可匹配元素的集合中删除与指定的选择器相匹配的元素。</td> 
 </tr> 
 <tr> 
 <td>7</td> 
 <td>slice( start, [end] )选取可匹配元素的子集。</td> 
 </tr> 
 </tbody> 
</table>

## JQuery DOM 遍历方法 ##

下表列出了其他有用的方法，你可以在 DOM 中使用，用于定位各种元素 ——

<table> 
 <tbody> 
 <tr> 
 <th>序号</th> 
 <th>方法 &amp; 描述</th> 
 </tr> 
 <tr> 
 <td>1</td> 
 <td>add( selector )在匹配的元素集合中添加更多的与给定的选择器相匹配的元素。</td> 
 </tr> 
 <tr> 
 <td>2</td> 
 <td>andSelf( )将先前的选择添加到当前的选择中。</td> 
 </tr> 
 <tr> 
 <td>3</td> 
 <td>children( [selector])获取一个元素集合，包含每个可匹配元素集合的唯一的直接的全部孩子元素。</td> 
 </tr> 
 <tr> 
 <td>4</td> 
 <td>closest( selector )获取一个元素集合，包含与指定的选择器相匹配的最近的父亲元素，包括起始元素。</td> 
 </tr> 
 <tr> 
 <td>5</td> 
 <td>contents( )在匹配的元素(包括文本节点)中找到所有的孩子节点，如果元素是一个 iframe，那么在内容文档中找到所有的孩子节点。</td> 
 </tr> 
 <tr> 
 <td>6</td> 
 <td>end( )恢复最近的'破坏性'操作，将匹配的元素集合设置为它之前的状态。</td> 
 </tr> 
 <tr> 
 <td>7</td> 
 <td>find( selector )搜索与指定的选择器匹配的后代元素。</td> 
 </tr> 
 <tr> 
 <td>8</td> 
 <td>next( [selector] )获取一个元素集合，包含给定元素集合的唯一的下一个兄弟元素。</td> 
 </tr> 
 <tr> 
 <td>9</td> 
 <td>nextAll( [selector] )找到当前元素之后的所有兄弟元素。</td> 
 </tr> 
 <tr> 
 <td>10</td> 
 <td>offsetParent( )返回一个 jQuery 集合以及第一个匹配元素的父亲的定位。</td> 
 </tr> 
 <tr> 
 <td>11</td> 
 <td>parent( [selector] )获取一个元素的直接父亲。如果在一组元素中调用，父元素会返回一组它们唯一直接父亲元素的集合。</td> 
 </tr> 
 <tr> 
 <td>12</td> 
 <td>parents( [selector] )得到一个元素集合，包含匹配元素集合的唯一的祖先元素(根元素除外)。</td> 
 </tr> 
 <tr> 
 <td>13</td> 
 <td>prev( [selector] )得到一个元素集合，包含匹配元素集合的唯一的先前的兄弟元素。</td> 
 </tr> 
 <tr> 
 <td>14</td> 
 <td>prevAll( [selector] )找到当前元素之前的所有兄弟元素。</td> 
 </tr> 
 <tr> 
 <td>15</td> 
 <td>siblings( [selector] )获取一个元素集合，包含每个可匹配元素集合的全部唯一的兄弟元素。</td> 
 </tr> 
 </tbody> 
</table>

转载于[https://www.w3cschool.cn/jquery/3rfw1jop.html][https_www.w3cschool.cn_jquery_3rfw1jop.html]

## jQuery 遍历方法 ##

下面的表格列出了所有的jQuery遍历方法。

<table> 
 <tbody> 
 <tr> 
 <th align="left">方法</th> 
 <th align="left">描述</th> 
 </tr> 
 <tr> 
 <td><a href="https://www.w3cschool.cn/jquery/traversing-add.html" rel="nofollow">add()</a></td> 
 <td>把元素添加到匹配元素的集合中</td> 
 </tr> 
 <tr> 
 <td>addBack()</td> 
 <td>把之前的元素集添加到当前集合中</td> 
 </tr> 
 <tr> 
 <td>andSelf()</td> 
 <td>在版本 1.8 中被废弃。addBack() 的别名</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.w3cschool.cn/jquery/traversing-children.html" rel="nofollow">children()</a></td> 
 <td>返回被选元素的所有直接子元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.w3cschool.cn/jquery/traversing-closest.html" rel="nofollow">closest()</a></td> 
 <td>返回被选元素的第一个祖先元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.w3cschool.cn/jquery/traversing-contents.html" rel="nofollow">contents()</a></td> 
 <td>返回被选元素的所有直接子元素（包含文本和注释节点）</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.w3cschool.cn/jquery/traversing-each.html" rel="nofollow">each()</a></td> 
 <td>为每个匹配元素执行函数</td> 
 </tr> 
 <tr> 
 <td>end()</td> 
 <td>结束当前链中最近的一次筛选操作，并把匹配元素集合返回到前一次的状态</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.w3cschool.cn/jquery/traversing-eq.html" rel="nofollow">eq()</a></td> 
 <td>返回带有被选元素的指定索引号的元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.w3cschool.cn/jquery/traversing-filter.html" rel="nofollow">filter()</a></td> 
 <td>把匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.w3cschool.cn/jquery/traversing-find.html" rel="nofollow">find()</a></td> 
 <td>返回被选元素的后代元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.w3cschool.cn/jquery/traversing-first.html" rel="nofollow">first()</a></td> 
 <td>返回被选元素的第一个元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.w3cschool.cn/jquery/traversing-has.html" rel="nofollow">has()</a></td> 
 <td>返回拥有一个或多个元素在其内的所有元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.w3cschool.cn/jquery/traversing-is.html" rel="nofollow">is()</a></td> 
 <td>根据选择器/元素/jQuery 对象检查匹配元素集合，如果存在至少一个匹配元素，则返回 true</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.w3cschool.cn/jquery/traversing-last.html" rel="nofollow">last()</a></td> 
 <td>返回被选元素的最后一个元素</td> 
 </tr> 
 <tr> 
 <td>map()</td> 
 <td>把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.w3cschool.cn/jquery/traversing-next.html" rel="nofollow">next()</a></td> 
 <td>返回被选元素的后一个同级元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.w3cschool.cn/jquery/traversing-nextall.html" rel="nofollow">nextAll()</a></td> 
 <td>返回被选元素之后的所有同级元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.w3cschool.cn/jquery/traversing-nextuntil.html" rel="nofollow">nextUntil()</a></td> 
 <td>返回介于两个给定参数之间的每个元素之后的所有同级元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.w3cschool.cn/jquery/traversing-not.html" rel="nofollow">not()</a></td> 
 <td>从匹配元素集合中移除元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.w3cschool.cn/jquery/traversing-offsetparent.html" rel="nofollow">offsetParent()</a></td> 
 <td>返回第一个定位的父元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.w3cschool.cn/jquery/traversing-parent.html" rel="nofollow">parent()</a></td> 
 <td>返回被选元素的直接父元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.w3cschool.cn/jquery/traversing-parents.html" rel="nofollow">parents()</a></td> 
 <td>返回被选元素的所有祖先元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.w3cschool.cn/jquery/traversing-parentsuntil.html" rel="nofollow">parentsUntil()</a></td> 
 <td>返回介于两个给定参数之间的所有祖先元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.w3cschool.cn/jquery/traversing-prev.html" rel="nofollow">prev()</a></td> 
 <td>返回被选元素的前一个同级元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.w3cschool.cn/jquery/traversing-prevall.html" rel="nofollow">prevAll()</a></td> 
 <td>返回被选元素之前的所有同级元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.w3cschool.cn/jquery/traversing-prevuntil.html" rel="nofollow">prevUntil()</a></td> 
 <td>返回介于两个给定参数之间的每个元素之前的所有同级元素</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.w3cschool.cn/jquery/traversing-siblings.html" rel="nofollow">siblings()</a></td> 
 <td>返回被选元素的所有同级元素 Returns all sibling elements of the selected element</td> 
 </tr> 
 <tr> 
 <td><a href="https://www.w3cschool.cn/jquery/traversing-slice.html" rel="nofollow">slice()</a></td> 
 <td>把匹配元素集合缩减为指定范围的子集</td> 
 </tr> 
 </tbody> 
</table>

转载于[https://www.w3cschool.cn/jquery/jquery-ref-traversing.html][https_www.w3cschool.cn_jquery_jquery-ref-traversing.html]

[https_www.w3cschool.cn_jquery_3rfw1jop.html]: https://www.w3cschool.cn/jquery/3rfw1jop.html
[https_www.w3cschool.cn_jquery_jquery-ref-traversing.html]: https://www.w3cschool.cn/jquery/jquery-ref-traversing.html