jQuery选择器——层次选择器

最新推荐文章于 2023-06-19 11:20:18 发布

阅读量439

点赞数

分类专栏： JavaScript 文章标签： jquery

本文链接：https://blog.csdn.net/cckevincyh/article/details/53149627

版权

JavaScript 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

层次选择器

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

1 、ancestor descendant
用法: $(”form input”) ;
返回值：集合元素
说明: 在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent > child”区分开.

2、parent > child
用法: $(”form > input”) ;
返回值 ： 集合元素
说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素

3、prev + next
用法: $(”label + input”) ;
返回值：集合元素
说明: 匹配所有紧接在 prev 元素后的 next 元素

4、prev ~ siblings
用法: $(”form ~ input”) ;
返回值 ： 集合元素
说明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配.
注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取

层次选择器示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
    <style type="text/css">
            div,span{
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }

            div.mini{
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
     </style>
     <!--引入jquery的js库-->

    </head>

    <body>

         <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
         <input type="button" value="改变 <body> 内所有 <div> 的背景色为 #0000FF"  id="b1"/>
         <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 #FF0033"  id="b2"/>
         <input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF"  id="b3"/>
         <input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF"  id="b4"/>
         <input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF"  id="b5"/>

         <div id="one">
             id为one  

         </div>

         <div id="two" class="mini" >
               id为two   class是 mini 
               <div  class="mini" >class是 mini</div>
        </div>

         <div class="one" >
                class是 one 
               <div  class="mini" >class是 mini</div>
               <div  class="mini" >class是 mini</div>
         </div>
         <div class="one">
              class是 one 
               <div  class="mini01" >class是 mini01</div>
               <div  class="mini" >class是 mini</div>
        </div>

        <br>
        <div id="mover" >
              动画
        </div>
        <br>
        <span class="spanone">    span
        </span>

    </body>
<script language="JavaScript">



        //<input type="button" value="改变 <body> 内所有 <div> 的背景色为 #0000FF"  id="b1"/>
        $("#b1").click(function(){
            //祖先元素和后代元素的关系
            $("body div").css("background","#0000FF");
        });


        //<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 #FF0033"  id="b2"/>
        $("#b2").click(function(){
            //父元素和子元素的关系
            $("body>div").css("background","#FF0033");
        });


        //<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF"  id="b3"/>
        $("#b3").click(function(){
            $("#one+div").css("background","#0000FF");
        });

        //<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF"  id="b4"/>
        $("#b4").click(function(){
            //获取指定元素的后面所有兄弟元素
            $("#two~div").css("background","#0000FF");
        });


        //<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF"  id="b5"/>
        $("#b5").click(function(){
            //获取指定元素的所有兄弟元素
            $("#two").siblings("div").css("background","#0000FF");
        });


</script>
</html>

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery选择器——层次选择器

层次选择器如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器.1 、ancestor descendant 用法: $(”form input”) ; 返回值：集合元素说明: 在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent > child”区分开.2、parent > chil
复制链接

扫一扫