天天看點

jquery中的周遊詳解

1、周遊

2、向上周遊dom樹

3、向下周遊dom樹

4、在dom樹中水準周遊

5、過濾

1、周遊 我了解的周遊就是 根據一個結構中的一個點就可以找到整個結構的所有的東西。

2、向上周遊dom樹

  1. parent()
  2. parents()
  3. parentsUnit()

parent()隻會傳回被選擇元素的直接父元素

parents() 方法傳回被選擇元素所有祖先元素,它一路上直到文檔的跟元素

<html>

您也可以使用可選參數來過濾對祖先元素的搜尋。

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

parentsUntil() 方法傳回介于兩個給定元素之間的所有祖先元素。

$("span").parentsUntil("div");
           

3、向下周遊dom樹

children()

find()

  1. children() 方法傳回被選元素的所有直接子元素。

    該方法隻會向下一級對 DOM 樹進行周遊。

$("div").children();
           

您也可以使用可選參數來過濾對子元素的搜尋。

下面的例子傳回類名為 “1” 的所有

<p>

元素,并且它們是

<div>

的直接子元素:

$("div").children("p.1");
           
  1. find()方法傳回被選元素的後代元素,一路向下直到最後一個後代。

下面的例子傳回屬于

<div>

後代的所有

<span>

元素:

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

下面的例子傳回

<div>

的所有後代:

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

4、在dom樹種水準周遊

有許多有用的方法讓我們在dom樹進行水準周遊

siblings()

next()

nextAll()

nextUntil()

prev()

prevAll()

prevUntil()

  1. siblings() 方法傳回被選元素的所有同胞元素。
$("h2").siblings();
 $("h2").siblings("p");//可以有參數
           
  1. next() 方法傳回被選元素的下一個同胞元素。

    該方法隻傳回一個元素。

  2. nextAll()方法傳回被選元素的所有跟随的同胞元素。
  3. nextUntil() 方法傳回介于兩個給定參數之間的所有跟随的同胞元素。
  4. prev() 同級前一個
  5. prevAll() 同級前所有
  6. prevUntil() 同意到兩個 之間所有元素

5、過濾

縮小搜尋元素的範圍,三個最基本的過濾方法是:first(), last() 和 eq(),它們允許您基于其在一組元素中的位置來選擇一個特定的元素。其他過濾方法,比如 filter() 和 not() 允許您選取比對或不比對某項指定标準的元素。

  1. first() 方法傳回被選元素的首個元素。下面的例子選取首個

    <div>

    元素内部的第一個

    <p>

    元素:
$("div p").first();
           
  1. last() 方法傳回被選元素的最後一個元素。下面的例子選擇最後一個

    <div>

    元素中的最後一個

    <p>

    元素:
$("div p").last();
           
  1. eq() 方法傳回被選元素中帶有指定索引号的元素。索引号從 0 開始,是以首個元素的索引号是 0 而不是 1。下面的例子選取第二個

    <p>

    元素(索引号 1):

    $(“p”).eq(1);

  2. filter() 方法允許您規定一個标準。不比對這個标準的元素會被從集合中删除,比對的元素會被傳回。下面的例子傳回帶有類名 “url” 的所有

    <p>

    元素:
$("p").filter(".url");
           
  1. not() 方法傳回不比對标準的所有元素。提示:not() 方法與 filter() 相反。下面的例子傳回不帶有類名 “url” 的所有

    <p>

    元素:
$("p").not(".url");
           

繼續閱讀