jQuery-Selectors(選擇器)的使用(二、層次篇)
來(lái)源：程序員人生 發(fā)布時(shí)間：2013-10-12 12:08:29 閱讀次數(shù)：3384次
本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法，我將以實(shí)例方式進(jìn)行講述，以簡(jiǎn)單，全面為基礎(chǔ)，不會(huì)涉及很深，我的學(xué)習(xí)方法：先入門，后進(jìn)階！
本系列文章分為：基本篇、層次篇、簡(jiǎn)單篇、內(nèi)容篇、可見性篇、屬性篇、子元素篇、表單篇、表單對(duì)象屬性篇共9篇文章。
您對(duì)本系列文章有任何建議或意見請(qǐng)發(fā)送到郵箱：sjzlgt@qq.com
由于是第一次寫技術(shù)性系列文章，難免會(huì)出錯(cuò)或代碼BUG，歡迎指出，在此謝過(guò)！
您可以到j(luò)Query官網(wǎng)來(lái)學(xué)習(xí)更多的有關(guān)jQuery知識(shí)。
版權(quán)所有：code-cat 博客 轉(zhuǎn)載請(qǐng)保留出處和版權(quán)信息！ |
由于這篇文章中講到的四種選擇器作用范圍很容易混淆，且不容易理解。我給出的四個(gè)例子還是能說(shuō)明其作用范圍的，并且很清晰，請(qǐng)讀者一定仔細(xì)研究這四個(gè)實(shí)例，并作比較！把源碼下載下來(lái)，試著改其中的條件，并看效果！
jQuery選擇器的使用靈活度非常高，至此，您可以利用本文中的四種選擇器和上一篇中所講的選擇器組合并看效果，相信你會(huì)看到足以令你震撼的結(jié)果！
1. ancestor descendant用法定義：在給定的祖先元素下匹配所有的符合條件后代元素
返回值：Array<Element>
參數(shù)：ancestor (Selector):任何有效選擇器 descendant (Selector):用以匹配元素的選擇器，并且它是第一個(gè)選擇器的后代元素
實(shí)例：將ID為"div_1"的DIV中所有的Input元素的背景色改為紅色
代碼： $("div_1 input").css("background-color","red"); //點(diǎn)擊按鈕一將執(zhí)行這句代碼注意：本實(shí)例請(qǐng)與第2個(gè)用法的實(shí)例作對(duì)比，看其控制范圍！ 2. parent > child用法定義：在給定的父元素下匹配所有的子元素
返回值：Array<Element>
參數(shù)：parent (Selector):任何有效選擇器 child (Selector): 用以匹配元素的選擇器，并且它是第一個(gè)選擇器的子元素
實(shí)例：將ID為"div_a1"的DIV中所有的Input元素的背景色改為紅色
代碼： $("#div_a1 > input").css("background-color","red"); //點(diǎn)擊按鈕二將執(zhí)行這句代碼 3. prev + next用法定義：匹配所有緊接在 prev 元素后的 next 元素
返回值：Array<Element>
參數(shù)：prev (Selector):任何有效選擇器 next (Selector):一個(gè)有效選擇器并且緊接著第一個(gè)選擇器
實(shí)例：將ID為"div_b1"的DIV中所有span元素后緊跟的input元素的背景色改為紅色
代碼：$("#div_b1 span + input").css("background-color","red"); //點(diǎn)擊按鈕三將執(zhí)行這句代碼注意：第一個(gè)選擇器我用了ancestor descendant用法，您也可以嘗試其它用法。本例請(qǐng)與下面第4點(diǎn)的實(shí)例作對(duì)比并看效果！ 4. prev ~ siblings用法定義：匹配 prev 元素之后的所有 siblings 元素
返回值：Array<Element>
參數(shù)：prev (Selector):任何有效選擇器 siblings (Selector):一個(gè)選擇器，并且它作為第一個(gè)選擇器的同輩
實(shí)例：將ID為"div_c1"的DIV中所有與span元素之后平級(jí)的input元素的背景色改為紅色
代碼：$("#div_c1 span ~ input").css("background-color","red"); //點(diǎn)擊按鈕四將執(zhí)行這句代碼注意：DIV ID="div_c1" 和 ID="div_c4"中的span元素前的input并未改變背景色，因?yàn)榈诙€(gè)選擇器查找第一個(gè)選擇器之后的元素 您可以下載這篇文章的HTML源碼：download
文章導(dǎo)讀：
jQuery-Selectors(選擇器)的使用(一、基本篇)
jQuery-Selectors(選擇器)的使用(二、層次篇)
jQuery-Selectors(選擇器)的使用(三、簡(jiǎn)單篇)
jQuery-Selectors(選擇器)的使用(四-五、內(nèi)容篇&可見性篇)
jQuery-Selectors(選擇器)的使用(六、屬性篇)
jQuery-Selectors(選擇器)的使用(七、子元素篇)
生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
