jQuery选择器(二)

二、层次选择器
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>

 

 

jQuery选择器(一)

jQuery选择器(二)

jQuery选择器(三)

jQuery选择器(四)