jQuery-Selectors(選擇器)的使用(二、層次篇)

作者: code-cat 來源: 博客園發布時間: 2009-12-25 12:00 閱讀: 3704 次推薦: 2 原文鏈接 [收藏]

系列文章導航：

jQuery-Selectors(選擇器)的使用(一、基本篇)

jQuery-Selectors(選擇器)的使用(三、簡單篇)

jQuery-Selectors(選擇器)的使用(四--五、內容篇&可見性篇)

jQuery-Selectors(選擇器)的使用(六、屬性篇)

jQuery-Selectors(選擇器)的使用(七、子元素篇)

jQuery-Selectors(選擇器)的使用(八、表單篇)

jQuery-Selectors(選擇器)的使用(九、表單對象屬性篇)

由于這篇文章中講到的四種選擇器作用范圍很容易混淆，且不容易理解。我給出的四個例子還是能說明其作用范圍的，并且很清晰，請讀者一定仔細研究這四個實例，并作比較！把源碼下載下來，試著改其中的條件，并看效果！

jQuery選擇器的使用靈活度非常高，至此，您可以利用本文中的四種選擇器和上一篇中所講的選擇器組合并看效果，相信你會看到足以令你震撼的結果！

1. ancestor descendant用法
定   義：在給定的祖先元素下匹配所有的符合條件后代元素
返回值：Array
參   數：ancestor (Selector):任何有效選擇器 descendant (Selector):用以匹配元素的選擇器，并且它是第一個選擇器的后代元素
實   例：將ID為"div_1"的DIV中所有的Input元素的背景色改為紅色
代碼： $("div_1 input").css("background-color","red"); //點擊按鈕一將執行這句代碼

DIV ID="div_1"

DIV ID="div_2"

DIV ID="div_3"

DIV ID="div_4"

DIV ID="div_5"

DIV ID="div_5_1"

注意：本實例請與第2個用法的實例作對比，看其控制范圍！

2. parent > child用法
定   義：在給定的父元素下匹配所有的子元素
返回值：Array
參   數：parent (Selector):任何有效選擇器 child (Selector): 用以匹配元素的選擇器，并且它是第一個選擇器的子元素
實   例：將ID為"div_a1"的DIV中所有的Input元素的背景色改為紅色
代碼： $("#div_a1 > input").css("background-color","red"); //點擊按鈕二將執行這句代碼

DIV ID="div_a1"

DIV ID="div_a2"

DIV ID="div_a3"

DIV ID="div_a4"

DIV ID="div_a5"

DIV ID="div_a5_1"

3. prev + next用法
定   義：匹配所有緊接在 prev 元素后的 next 元素
返回值：Array
參   數：prev (Selector):任何有效選擇器 next (Selector):一個有效選擇器并且緊接著第一個選擇器
實   例：將ID為"div_b1"的DIV中所有span元素后緊跟的input元素的背景色改為紅色
代碼：$("#div_b1 span + input").css("background-color","red"); //點擊按鈕三將執行這句代碼

DIV ID="div_b1"
span

DIV ID="div_b2"
span

DIV ID="div_b3"
span

DIV ID="div_b4"
span

DIV ID="div_b5"

DIV ID="div_b5_1" span

注意：第一個選擇器我用了ancestor descendant用法，您也可以嘗試其它用法。本例請與下面第4點的實例作對比并看效果！

4. prev ~ siblings用法
定   義：匹配 prev 元素之后的所有 siblings 元素
返回值：Array
參   數：prev (Selector):任何有效選擇器 siblings (Selector):一個選擇器，并且它作為第一個選擇器的同輩
實   例：將ID為"div_c1"的DIV中所有與span元素之后平級的input元素的背景色改為紅色
代碼：$("#div_c1 span ~ input").css("background-color","red"); //點擊按鈕四將執行這句代碼

DIV ID="div_c1"
span

DIV ID="div_c2"
span

DIV ID="div_c3"
span

DIV ID="div_c4"
span

DIV ID="div_c5"

DIV ID="div_c5_1" span

注意：DIV ID="div_c1" 和 ID="div_c4"中的span元素前的input并未改變背景色，因為第二個選擇器查找第一個選擇器之后的元素

您可以下載這篇文章的HTML源碼：download