使用jQuery 实现级联选择

如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素、兄弟元素等，则需要使用层次选择器。

1. 后代选择器（$("ancestor descendant ")） 返回值 集合元素；在给定祖先元素下匹配所有的后代元素，这个要与子代选择器区分开。 用法：$(“form input”);
   实例：改变 内所有 的背景色为 #0000FF

/*后代选择器：
* 语法：$("ancestor  descendant") 注意多个选择器之间使用的是空格隔开
* */
$(function(){
    $("body div").css("backgroundColor","red");
});

2. 子代选择器($("parent>child")) 返回值 集合元素；在给定的父元素下匹配所有的子元素，注意区分子元素和后代元素的区别；用法：$(“form>input”)
   实例：改变 内子 的背景色为 #FF0033

/*子代选择器：
语法：$("parent > child");
* */
$(function(){
    $("body > div").css("backgroundColor","green");
});

3. 下一个同辈元素选择器：（$("prev+next")） 返回值 集合元素；返回所有紧接在prev元素后的next元素；用法：$(".one+div")
   实例：改变 id 为 one 的下一个 的背景色为 #0000FF

/*下一个兄弟选择器：
语法：$("prev + next");
* */
$(function(){
    $("#one + div").css("backgroundColor","green");
});

4. 返回某个元素后面所有元素：($(“prev~sibings”)) 返回值 集合元素；匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配.
   实例：改变 id 为 two 的元素后面的所有兄弟 的元素的背景色为 # #0000FF

*获取后面所有的兄弟选择器
 语法：语法：$("prev ~ sibings");
*
* */
$(function(){
    $("#two ~ div").css("backgroundColor","green");
});

5. 实例：改变 id 为 two 的元素所有 兄弟元素的背景色为 #0000FF

/*获所有的兄弟选择器
 语法：语法：$("prev ~ sibings");
 *
 * */
$(function(){
   $("#two").siblings().css("backgroundColor","green");
});

注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取
整个selector_level.js文件内容：

/**
 * 层次选择器
 */
/*后代选择器：
* 语法：$("ancestor  descendant") 注意多个选择器之间使用的是空格隔开
* */
/*
$(function(){
    $("body div").css("backgroundColor","red");
});
*/
/*子代选择器：
语法：$("parent > child");
* */
/*$(function(){
    $("body > div").css("backgroundColor","green");
});*/
/*下一个兄弟选择器：
语法：$("prev + next");
* */
/*
$(function(){
    $("#one + div").css("backgroundColor","green");
});*/
/*获取后面所有的兄弟选择器
 语法：语法：$("prev ~ sibings");
*
* */
/*$(function(){
    $("#two ~ div").css("backgroundColor","green");
});*/
/*获所有的兄弟选择器
 语法：语法：$("prev ~ sibings");
 *
 * */
$(function(){
   $("#two").siblings().css("backgroundColor","green");
});