jQuery之元素的遍历和元素的过滤

╰+哭是因爲堅強的太久メ 2022-06-13 05:56 240阅读 0赞

jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。

**向下遍历方法**

>  *  .children() 获得匹配元素集合中每个元素的所有子元素；
>  *  .find() 获得当前匹配元素集合中每个元素的后代，由选择器进行筛选；

style.css 设置样式

#div1{ width:500px; height:200px; border:3px solid fuchsia; }
    #div2{ width:400px; height: 150px; margin-top:10px; margin-left:10px; border:3px solid fuchsia; }
    p{ margin-left:10px; margin-top:10px; width:150px; height:80px; border:3px solid fuchsia; }

TraversingDown.html

<div id="div1">div1
            <div id="div2">div2
                <p>
                    <a>
                        hello
                    </a>
                </p>
            </div>
        </div>

TraversingDown.js

/* 向下遍历的方法 * children * find*/
    $(document).ready(function () { 
       $("#div1").children("p").css({   //#div2是可选参数,只能是下一级，不能越级
           border:"3px solid red"
       });
    
        // $("#div1").find("a").css({ //p是必选参数，可以是任一层级
        // border:"3px solid red"
        // });
    });

**向上遍历方法**

>  *  .parent() 获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。
>  *  .parents() 获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）。
>  *  .parentsUntil() 获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止。

TraversingUp.html

<div id="div1">div1
        <div id="div2">div2
            <p>
                <a>
                    hello
                </a>
            </p>
        </div>
    </div>

TraversingUp.js

/* * 向上遍历的方法 * parent() * parents() * parentsUntil() * */
    $(document).ready(function () {
      // $("a").parent().css({border:"3px solid red"})    //只能指向向上一级的父级元素；
     // $("a").parents().css({border:"3px solid red"})    //向上遍历所有的父级元素，也可设置参数指定；
      $("a").parentsUntil("#div1").css({border:"3px solid red"})    //指定区间；
    });

**同级遍历**

>  *  siblings() 获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。
>  *  next() 获得匹配元素集合中每个元素紧邻的同辈元素。
>  *  nextAll() 获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。
>  *  nextUntil() 获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。
>  *  prev() 获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。
>  *  prevAll()获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。
>  *  prevUntil()获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止。

**过滤**

>  *  first()将匹配元素集合缩减为集合中的第一个元素。
>  *  not()从匹配元素集合中删除元素。
>  *  last()将匹配元素集合缩减为集合中的最后一个元素。
>  *  filter()将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。
>  *  eq() 将匹配元素集合缩减为位于指定索引的新元素。

<table> 
 <thead> 
  <tr> 
   <th>函数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>.add()</td> 
   <td>将元素添加到匹配元素的集合中。</td> 
  </tr> 
  <tr> 
   <td>.andSelf()</td> 
   <td>把堆栈中之前的元素集添加到当前集合中。</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>对 jQuery 对象进行迭代，为每个匹配元素执行函数。</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>.is()</td> 
   <td>根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回 true。</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>