如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素、子元素、相邻元素、兄弟元素等,则需要使用层次选择器。
- 后代选择器( ( " a n c e s t o r d e s c e n d a n t " ) ) 返 回 值 集 合 元 素 ; 在 给 定 祖 先 元 素 下 匹 配 所 有 的 后 代 元 素 , 这 个 要 与 子 代 选 择 器 区 分 开 。 用 法 : ("ancestor descendant ")) 返回值 集合元素;在给定祖先元素下匹配所有的后代元素,这个要与子代选择器区分开。 用法: ("ancestordescendant"))返回值集合元素;在给定祖先元素下匹配所有的后代元素,这个要与子代选择器区分开。用法:(“form input”);
实例:改变 内所有的背景色为 #0000FF
/*后代选择器:
* 语法:$("ancestor descendant") 注意多个选择器之间使用的是空格隔开
* */
$(function(){
$("body div").css("backgroundColor","red");
});
- 子代选择器( ( " p a r e n t > c h i l d " ) ) 返 回 值 集 合 元 素 ; 在 给 定 的 父 元 素 下 匹 配 所 有 的 子 元 素 , 注 意 区 分 子 元 素 和 后 代 元 素 的 区 别 ; 用 法 : ("parent>child")) 返回值 集合元素;在给定的父元素下匹配所有的子元素,注意区分子元素和后代元素的区别;用法: ("parent>child"))返回值集合元素;在给定的父元素下匹配所有的子元素,注意区分子元素和后代元素的区别;用法:(“form>input”)
实例:改变 内子的背景色为 #FF0033
/*子代选择器:
语法:$("parent > child");
* */
$(function(){
$("body > div").css("backgroundColor","green");
});
- 下一个同辈元素选择器:( ( " p r e v + n e x t " ) ) 返 回 值 集 合 元 素 ; 返 回 所 有 紧 接 在 p r e v 元 素 后 的 n e x t 元 素 ; 用 法 : ("prev+next")) 返回值 集合元素;返回所有紧接在prev元素后的next元素;用法: ("prev+next"))返回值集合元素;返回所有紧接在prev元素后的next元素;用法:(".one+div")
实例:改变 id 为 one 的下一个的背景色为 #0000FF
/*下一个兄弟选择器:
语法:$("prev + next");
* */
$(function(){
$("#one + div").css("backgroundColor","green");
});
- 返回某个元素后面所有元素:($(“prev~sibings”)) 返回值 集合元素;匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配.
实例:改变 id 为 two 的元素后面的所有兄弟的元素的背景色为 # #0000FF
*获取后面所有的兄弟选择器
语法:语法:$("prev ~ sibings");
*
* */
$(function(){
$("#two ~ div").css("backgroundColor","green");
});
- 实例:改变 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");
});
原创不易,点个赞呗。有问题请多多指教。期待您的指教。