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

本系列文章分為：基本篇、層次篇、簡單篇、內容篇、可見度篇、屬性篇、子項目篇、表單篇、表單對象屬性篇共9篇文章。
您對本系列文章有任何建議或意見請發送到郵箱：sjzlgt@qq.com
由於是第一次寫技術性系列文章，難免會出錯或代碼BUG，歡迎指出，在此謝過！

線上地址 http://demo.jb51.net/html/jquery/jQuery-Selectors-2-bynet.htm xmlns="http://www.w3.org/1999/xhtml" >

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

本系列文章主要講述jQuery架構的選取器(Selectors)使用方法，我將以執行個體方式進行講述，以簡單，全面為基礎，不會涉
及很深，我的學習方法：先入門，後進階！

本系列文章分為：基本篇、層次篇、簡單篇、內容篇、可見度篇、屬性篇、子項目篇、表單篇、表單對象屬性篇共9篇文章
。

您對本系列文章有任何建議或意見請發送到郵箱：sjzlgt@qq.com

由於是第一次寫技術性系列文章，難免會出錯或代碼BUG，歡迎指出，在此謝過！

您可以到jQuery官網來學習更多的有關jQuery知識。
著作權：code-cat 部落格 轉載請保留出處和著作權資訊！由於這篇文章中講到的四種選取器作用範圍很容易混淆，且不容易理解。我給出的四個例子還是能說明其作用範圍的，並且很
清晰，請讀者一定仔細研究這四個執行個體，並作比較！把源碼下載下來，試著改其中的條件，並看效果！

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

定義：在給定的祖先元素下匹配所有的符合條件後代元素

傳回值：Array<Element>

參數：ancestor (Selector):任何有效選取器 descendant (Selector):用以匹配元素的選取器，並且它是第一個選取器的後
代元素

執行個體：將ID為"div_1"的DIV中所有的Input元素的背景色改為紅色
代碼： $("div_1 input").css("background-color","red"); //點擊按鈕一將執行這句代碼

form 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<Element>

參數：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<Element>

參數：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<Element>

參數：prev (Selector):任何有效選取器 siblings (Selector):一個選取器，並且它作為第一個選取器的同輩

執行個體：將ID為"div_c1"的DIV中所有與span元素之後平級的input元素的背景色改為紅色
代碼：$("#div_c1 span ~ input").css("background-color","red"); //點擊按鈕四將執行這句代碼

DIV ID="div_c1"
spanDIV 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並未改變背景色，因為
第二個選取器尋找第一個選取器之後的元素