由于這篇文章中講到的四種選擇器作用范圍很容易混淆，且不容易理解。我給出的四個(gè)例子還是能說明其作用范圍的，并且很清晰，請(qǐng)讀者一定仔細(xì)研究這四個(gè)實(shí)例，并作比較！把源碼下載下來，試著改其中的條件，并看效果！
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í)行這句代碼 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"
注意：本實(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í)行這句代碼 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>
參數(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í)行這句代碼 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
注意：第一個(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"
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并未改變背景色，因?yàn)榈诙€(gè)選擇器查找第一個(gè)選擇器之后的元素
