jQuery-Selectors(選擇器)的使用(二、層次篇)
來源：程序員人生 發布時間：2013-10-12 12:08:29 閱讀次數：3388次
本系列文章主要講述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"); //點擊按鈕一將執行這句代碼注意：本實例請與第2個用法的實例作對比，看其控制范圍！ 2. parent > child用法定義：在給定的父元素下匹配所有的子元素
返回值：Array<Element>
參數：parent (Selector):任何有效選擇器 child (Selector): 用以匹配元素的選擇器，并且它是第一個選擇器的子元素
實例：將ID為"div_a1"的DIV中所有的Input元素的背景色改為紅色
代碼： $("#div_a1 > input").css("background-color","red"); //點擊按鈕二將執行這句代碼 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"); //點擊按鈕三將執行這句代碼注意：第一個選擇器我用了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" 和 ID="div_c4"中的span元素前的input并未改變背景色，因為第二個選擇器查找第一個選擇器之后的元素 您可以下載這篇文章的HTML源碼：download
文章導讀：
jQuery-Selectors(選擇器)的使用(一、基本篇)
jQuery-Selectors(選擇器)的使用(二、層次篇)
jQuery-Selectors(選擇器)的使用(三、簡單篇)
jQuery-Selectors(選擇器)的使用(四-五、內容篇&可見性篇)
jQuery-Selectors(選擇器)的使用(六、屬性篇)
jQuery-Selectors(選擇器)的使用(七、子元素篇)
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
