jQuery选择器(二)

最新推荐文章于 2024-10-31 15:39:18 发布

原创最新推荐文章于 2024-10-31 15:39:18 发布 · 402 阅读

0 ·

CC 4.0 BY-SA版权

16_Js 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了jQuery中四种层次选择器的使用方法：后代元素选择器、子元素选择器、相邻元素选择器及兄弟选择器，并通过具体示例展示了如何应用这些选择器来操作DOM元素。

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