使用jquery選擇器如何取得父級元素、同級元素、子元素_jquery

一、取得父級元素

1、 parent([expr]):

取得所有指定元素的父級元素

複製程式碼 程式碼如下:

href_fir
href_sec
href_thr

href_fiv

$(document).ready(function(){
$("a").parent().addClass('a_par');
});

firebug查看jquery parent效果

二、取得同級元素：

1、next([expr])：
取得指定元素的下一個同級元素（注意是下一個同級元素哦）

複製程式碼 程式碼如下:

• list item 1


• list item 2


• list item 3


• list item 4 li>
  
• list item 5

<script> <BR>$('li.third-item').next().css ('background-color', 'red'); <BR></script>

這個範例的結果是，只有list item 4背景色變成紅色

2、nextAll([expr]):

取得指定元素後邊的所有同級元素

複製程式碼 程式碼如下:

And Again

var p_nex = $("p").nextAll();
p_nex.addClass('p_next_all');

注意看最後一個」

」標籤哦，也被加上了' p_next_all'這個類別名稱哦~~

3、andSelf():

取得指定元素後邊的所有同級元素，之後加上指定的元素

我感覺這個函數是最有意思的函數了，是什麼意思？直譯過來就是」還有我「,」還有自己」,沒錯，還有自己。

複製程式碼 程式碼如下:

Hello

Hello

Hello

Hello

Hello

Hello

Hello

Hello

Hello

Hello

Hello

Hello

Hello

Hello

Hello

Hello

Hello

Hello

Hello

Hello

Hello

Hello Again

And Again

var p_nex = $("p").nextAll().andSelf(); p_nex.addClass(' p_next_all');
注意看第一個「

」標籤啊，這句話的意思是選擇p標籤後面的所有同級標籤，以及自己。 。 。

以下這兩個不舉具體的例子了，其實就是next()和nextAll()的相反嘍

4、prev()：取得指定元素的上一個同級元素（是上一個哦）。

5、prevAll()：取得指定元素的前邊所有的同級元素。

三、取得子元素

1、找出子元素方式1：>

例如：var aNods = $("ul > a");找出ul下的所有a標籤

2、找出子元素方式2：children()

3、找出子元素方式3：find()

這裡再簡單介紹以下children( )和find()的異同：

1> children及find方法都用是用來獲得element的子elements的，兩者都不會回傳text node，就像大多數的jQuery方法一樣。
2> children方法獲得的只是元素一下級的子元素，即：immediate children。
3> find方法獲得所有下級元素，即：descendants of these elements in the DOM tree
4> children方法的參數selector 是可選的（optionally），用來過濾子元素，

但find方法的參數selector方法是必選的。

5> find方法事實上可以透過使用 jQuery( selector, context )來實現。即$('li.item-ii').find('li')等同於$('li', 'li.item-ii').

例：

複製程式碼 程式碼如下:

• I


• II
  
  
  
  • A
  
  
  • B
    
    
    
    • 1
    
    
    • 2
    
    
    • 3
    
    
    
    
  
  
  • C
  
  
  
  


• III

使用：$('ul.level-2').children().css('border', '1px solid green'); 的效果是：

使用$('ul.level-2').find('li').css('border', '1px solid green'); 的效果是：