二、层次选择器
1、后代元素选择器
选择器:$("ancestor descendant") //其中ancestor是指任何有效的元素,descendant是ancestor的后代元素
描述:选择ancestor元素里的所有后代元素descendant。
返回:集合元素
示例:改变form表单内所有input元素的边框属性
选择器:$("parent > child") //parent是指任何有效的元素,child是parent元素的子元素
描述:选择parent元素下的子元素child,其跟后代选择器$("ancestor descendant")是有区别的,前者只能选择到子元素,而后者能选择到所有后代元素,比如说子元素还有孙子辈的元素等 。
返回:集合元素
示例:
选择器:$("prev + next") //其中prev是任何有效果选择器,而next是prev元素相邻的下一个元素(也就是紧接着pre的元素)
描述:选择紧接在prev元素后的next元素
返回:集合元素
示例:改变fieldset表单域的下一个div兄弟元素的边框属性
选择器:$("prev ~ siblings") //prev是指任何有效果的元素选择器,而siblings是指prev元素后面的所有兄弟元素
描述:选取prev元素之后的所有siblings兄弟元素。
返回:集合元素
示例:改变表单div元素后面的所有div兄弟元素的边框属性。
1、后代元素选择器
选择器:$("ancestor descendant") //其中ancestor是指任何有效的元素,descendant是ancestor的后代元素
描述:选择ancestor元素里的所有后代元素descendant。
返回:集合元素
示例:改变form表单内所有input元素的边框属性
<script type="text/javascript">
$(document).ready(function(){
$('form input ').css('border','1px solid red');
});
</script>
2、子元素选择器(parent > child)选择器:$("parent > child") //parent是指任何有效的元素,child是parent元素的子元素
描述:选择parent元素下的子元素child,其跟后代选择器$("ancestor descendant")是有区别的,前者只能选择到子元素,而后者能选择到所有后代元素,比如说子元素还有孙子辈的元素等 。
返回:集合元素
示例:
<script type="text/javascript">
$(document).ready(function(){
$('form > div ').css('border','1px solid red');
});
</script>
3、相邻元素选择器(prev + next)选择器:$("prev + next") //其中prev是任何有效果选择器,而next是prev元素相邻的下一个元素(也就是紧接着pre的元素)
描述:选择紧接在prev元素后的next元素
返回:集合元素
示例:改变fieldset表单域的下一个div兄弟元素的边框属性
<script type="text/javascript">
$(document).ready(function(){
$('fieldset + div ').css('border','1px solid red');
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('fieldset').next('div').css('border','1px solid red');
});
</script>
4、兄弟选择器(prev ~ siblings)选择器:$("prev ~ siblings") //prev是指任何有效果的元素选择器,而siblings是指prev元素后面的所有兄弟元素
描述:选取prev元素之后的所有siblings兄弟元素。
返回:集合元素
示例:改变表单div元素后面的所有div兄弟元素的边框属性。
<script type="text/javascript">
$(document).ready(function(){
$('div ~ div ').css('border','1px solid red');
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('div').nextAll().css('border','1px solid red');
});
</script>