這篇文章主要介紹了jQuery獲取父元素節(jié)點(diǎn)、子元素節(jié)點(diǎn)及兄弟元素節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式總結(jié)分析了jQuery節(jié)點(diǎn)操作的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery獲取父元素節(jié)點(diǎn)、子元素節(jié)點(diǎn)及兄弟元素節(jié)點(diǎn)的方法。分享給大家供大家參考，具體如下：

先來(lái)看這段html代碼，整個(gè)取節(jié)點(diǎn)（父、子、兄弟等）的方法都是圍繞這段代碼來(lái)的：

<ul class="par">

  <li id="firstli">

    <h3 class="title">條目一</h3>

    <ul class="par">

      <li id="dwtedx">第一項(xiàng)</li>

      <li>第二項(xiàng)</li>

    </ul>

  </li>

</ul>

JQUERY 父節(jié)點(diǎn)的獲?。?/P>

jquery獲取父元素方法比較多、比如parent()、parents()、closest()、find,first-child這些都能幫你實(shí)現(xiàn)查找父節(jié)點(diǎn)、子節(jié)點(diǎn)、兄弟節(jié)點(diǎn)

如我們利用parent()來(lái)獲取父節(jié)點(diǎn)

$("#dwtedx").parent().parent();//取得id為firstli的li節(jié)點(diǎn)

$("#dwtedx").parent().parent(".par");//取得最上面的ul節(jié)點(diǎn)

$("#dwtedx").parent(".par");

//取得向上第一層的ul節(jié)點(diǎn) 以上是通過(guò)parent的方式來(lái)獲取父節(jié)點(diǎn)的、大家可以根據(jù)自己項(xiàng)目需要來(lái)選擇方法哈

下面、我們主要來(lái)講一下 parents() 和 closest() 兩個(gè)方法的區(qū)別

1、closest從當(dāng)前元素開始匹配尋找、parents從父元素開始匹配尋找

2、closest逐級(jí)向上查找、直到發(fā)現(xiàn)匹配的元素后 就停止了、parents一直向上查找直到根元素、然后把這些元素放進(jìn)一個(gè)臨時(shí)集合中、再用給定的選擇器表達(dá)式去過(guò)濾

3、closest返回0或1個(gè)元素、parents可能包含0 個(gè)、1個(gè)、或者多個(gè)元素

代碼可以這樣寫：

$('#dwtedx').parents('.par');//可以找出所有class為.par的節(jié)點(diǎn)

$('#dwtedx').closest('.par'); //可以找出一個(gè)父節(jié)點(diǎn)、就是上面一層的那個(gè)

JQUERY 兄弟節(jié)點(diǎn)的獲取

jQuery兄弟節(jié)點(diǎn)獲取、我們的思路是通過(guò)當(dāng)前節(jié)點(diǎn)找到父節(jié)點(diǎn)、然后通過(guò)父節(jié)點(diǎn)去找到子節(jié)點(diǎn)、代碼如下

$(".title").parent().find('ul');

//找到自己的兄弟節(jié)點(diǎn)ul 就是通過(guò)先找到 h3 與 ul 共同的父節(jié)點(diǎn) li 然后來(lái)用 find() 找到 ul

還有一種方法是使用 siblings() 函數(shù)、代碼如下

$(".title").siblings('ul');

//找到自己的兄弟節(jié)點(diǎn)ul

JQUERY 子節(jié)點(diǎn)的獲取

匹配第一個(gè)子元素 :first 只匹配一個(gè)元素、而此選擇符將為每個(gè)父元素匹配一個(gè)子元素

$(".par:first-child");

//取得id為firstli的節(jié)點(diǎn)

通過(guò)選擇器去獲取、代碼如下:

$('#firstli h3.title');

//取得條目一的h3

使用find()函數(shù)、上面已經(jīng)說(shuō)過(guò)了、用法一樣

$("#firstli").find("h3");

//找到子兄弟節(jié)點(diǎn)h3

使用children()函數(shù)、代碼如下

$("#firstli").children("h3.title");

//取得子節(jié)點(diǎn)h3、class為title 

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。