精华内容
下载资源
问答
  • jquery层次选择器

    2020-07-13 20:39:39
    jquery层次选择器 按照我个人的习惯,还是先放上总的内容,然后再开始一个一个攻克。 常用的几种(概述): 1.派生选择器(后代元素选择器) $("div span") 2.父子选择器(子元素选择器) $("div>span") 3.兄弟选择器...

    jquery层次选择器

    按照我个人的习惯,还是先放上总的内容,然后再开始一个一个攻克。

    常用的几种(概述):

    1.派生选择器(后代元素选择器)
    $("div span")
    
    2.父子选择器(子元素选择器)
    $("div>span")
    
    3.兄弟选择器(相邻元素选择器)
    $("div+span")
    
    4.兄弟选择器
    $("div~span")
    
    5.并且选择器(过滤选择器)
    :first
    :last
    :not(selector)
    :even
    :odd
    :eq(index)
    :gt(index)
    :lt(index)
    :header
    
    6.内容过滤选择器
    :contains(内容)
    :empty
    :has
    :parent
    
    //TODO...
    暂时知道就这些,如有其它常使用的,可以在评论区补充出来。
    

    代码准备

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>jquery层次选择器练习_爱猫狗的小郝</title>
      <script src="../src/jquery/js/jquery-1.8.3.min.js">
      </script>
    </head>
    <body>
      <div id="one" class="aaa">
        id=one,class=aaa的div
        <span>div id=one,class=aaa的span</span>
        <br />
        <div class="mini">class=mini</div>
      </div>
      <div id="two" class="aaa">
        id=two,class=aaa的div
        <span>div id=two,class=aaa的div的span</span>
        <br />
        <div class="mini">class=mini的div</div>
        <div class="mini">class=mini的div</div>
      </div>
      <div class="bbb">
        class=bbb的div
        <div class="mini">class=mini的div</div>
        <div class="mini">class=mini的div</div>
      </div>
      <span>爱猫狗的小郝</span>
      <span>——河南济源普通的追梦小伙</span>
    </body>
    </html>

    在这里插入图片描述

    1.派生选择器(后代元素选择器)

    $("div span")
    选取<div>里的所有<span>元素
    //需求:把div里所有的span元素的字体颜色变为红色
       $(document).ready(function(){
         $("div span").css("color","red");
       });

    在这里插入图片描述

    2.父子选择器(子元素选择器)

    $("div>span")
    选取<div>元素下名为<span>的元素,不包括子元素的子元素。
    //需求:<div>元素下名为<span>的元素,背景色为红色
     $(document).ready(function(){
         $("div>span").css("background","red");
     });

    在这里插入图片描述

    3.兄弟选择器(相邻元素选择器)

    方法一:$("#two+div")
    方法二:$("#two").next("div")
    选取id为two标签之后的第一个<div>元素(注意:是之后,不是孩子节点。)
    需求:选取id为two的下的第一个<div>元素,并设置背景色为红色
       $(document).ready(function(){
         $("#two+div").css("background","red");
       });
       //或者
       $(document).ready(function(){
         $("#two").next("div").css("background","red");
       });

    4.兄弟选择器

    方法一:$("#two~div")
    方法二:$("#two").nextAll("div")
    选取id为two的之后的第一个<div>元素(注意:是之后,不是孩子节点。)
    需求:选取id为two的下的所有<div>元素,并设置背景色为红色
       $(document).ready(function(){
         $("#two~div").css("background","red");
       });
       //或者
       $(document).ready(function(){
         $("#two").nextAll("div").css("background","red");
       });
    细节:

    和next()/nextAll()方法相反的方法prev()/prevAll()

    prev():取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

    prevAll():查找当前元素之前所有的同辈元素。

      $(document).ready(function(){
         $("#two").prev("div").css("background","red");
       });
      $(document).ready(function(){
         $("#two").prevAll("div").css("background","red");
       });
    //TODO...和next方法相似,不再详细阐述。

    5.并且选择器(过滤选择器)

    :first             匹配找到第一个元素
    :last              匹配找到最后一个元素
    :not(selector)     去除所有与给定选择器匹配的元素
    :even              匹配所有索引值为偶数的元素,从0开始计数
    :odd               匹配所有索引值为奇数的元素,从0开始计数   
    :eq(index)         匹配一个给定索引的元素,从0开始计数
    :gt(index)         匹配所有大于给定索引的元素,从0开始计数
    :lt(index)         匹配所有小于给定索引的元素,从0开始计数
    :header            匹配如h1,h2,h3之类的标题元素

    为了更好的理解并且选择题,代码我们换一下,用下述代码讲解。这里用table来说,个人感觉ul,li这类的用的更多,不过都一样。

    <body>
      <table border="1">
        <tr>
          <td>一行一列</td><td>一行二列</td>
        </tr>
        <tr>
          <td>二行一列</td><td>二行二列</td>
        </tr>
        <tr>
          <td>三行一列</td><td>三行二列</td>
        </tr>
        <tr>
          <td>四行一列</td><td>四行二列</td>
        </tr>
      </table>
      <span><b>爱猫狗的小郝</b>></span>
      <span><b>——河南济源普通的追梦小伙</b></span>
    </body>
    需求:把表格第一行的背景色更换为红色。
       $(document).ready(function(){
         $("tr:first").css("background","red");
       });

    在这里插入图片描述

    需求:把表格最后一行的背景色更换为红色。
       $(document).ready(function(){
         $("tr:last").css("background","red");
       });

    在这里插入图片描述

    需求:把表格第2行的背景色更换为红色
       $(document).ready(function(){
         $("tr:eq(1)").css("background","red");
       });

    在这里插入图片描述

    需求:把表达第2行之后的背景色更换为红色
       $(document).ready(function(){
         $("tr:gt(1)").css("background","red");
       });

    在这里插入图片描述

    细节:

    其它没举例子的都差不多,看着字面解释自己尝试一下吧。

    6.内容过滤选择器

    :contains(内容)  包含内容选择器,获得节点内部必须通过标签包含指定的内容
    :empty          获得空元素(内部没有任何元素/文本() )节点对象
    :has            内部包含指定元素的选择器
    :parent         寻找的节点必须作为父元素节点存在

    为了更好的理解内容选择题,代码我们换一下,用下述代码讲解。

    <body>
      <div>所谓信仰,即深信你所未见。</div>
      <div>这信仰之回报,即深见你所深信。</div>
      <div></div>
      <div>   </div>
      <div><span id="haosy">你好啊,读者。</span></div>
      <div><p>测试p节点是否为父元素节点</p></div>
      <span><b>爱猫狗的小郝</b>></span>
      <span><b>——河南济源普通的追梦小伙</b></span>
    </body>

    在这里插入图片描述

    需求:将包含“信仰”两个字的div节点背景色改为红色。
       $(document).ready(function(){
         $("div:contains('信仰')").css("background","red");
       });

    在这里插入图片描述

    需求:
    向空元素(内部没有任何元素(包括空格都没有))的div中添加一个“这是新增的,原本是空白”;
      $(document).ready(function(){
         $("div:empty").append("这是新增的,原本是空白");
       });

    在这里插入图片描述

    需求:寻找包含id="haosy"的节点对象,如果有,在控制台打印出来节点对象。
       $(document).ready(function(){
        console.log($("div:has(#haosy)"));
       });
    

    在这里插入图片描述

    需求:看下p节点是否为父节点,并打印在控制台。
       $(document).ready(function(){
        console.log($("p:parent"));
       });
    

    在这里插入图片描述

    结语

    写文章是自己日常补缺的一种习惯,难免会有瑕疵,如发现问题,请及时指出。

    展开全文
  • jQuery层次选择器

    2020-10-13 22:04:48
    jQuery层次选择器 <script type="text/javascript"> $(document).ready(function(){ //1.选择 body 内的所有 div 元素 $("#btn1").click(function(){ $("body div").css("background", "#...

    jQuery层次选择器


    	<script type="text/javascript">
    		$(document).ready(function(){
    			//1.选择 body 内的所有 div 元素
    			$("#btn1").click(function(){
    				$("body div").css("background", "#bbffaa");
    			});
    
    			//2.在 body 内, 选择div子元素  
    			$("#btn2").click(function(){
    				$("body > div").css("background", "#bbffaa");
    			});
    
    			//3.选择 id 为 one 的下一个 div 元素 
    			$("#btn3").click(function(){
    				$("#one+div").css("background", "#bbffaa");
    			});
    
    			//4.选择 id 为 two 的元素后面的所有 div 兄弟元素
    			$("#btn4").click(function(){
    				$("#two~div").css("background", "#bbffaa");
    			});
    		});
    	</script>
    

    在这里插入图片描述

    在这里插入图片描述

    展开全文
  • jQuery 层次选择器

    2019-09-24 11:30:55
    jQuery 层次选择器 1 派生选择器:在s1内部获得全部的s2节点(不考虑层次)  $(“div span”)// 派生选择器  <div>  <span></span>//找到  <p>  <span></span>//...

    1   派生选择器:在s1内部获得全部的s2节点(不考虑层次)

      $(“div  span”)// 派生选择器

      <div>

      <span></span>//找到

      <p>

      <span></span>//找到

      </p>

      </div>

      <span></span>//找不到

    2  $(s1 > s2) [父子]

    直接子元素选择器:在s1内部获得s2的子元素节点

    $(“div > span”)

    <div>

    <span></span>//找到

    <p>

    <span></span>

    </p>

    <span></span>//找到

    </div>

    <span></span>

    $(s1 + s2) [兄弟]

    直接兄弟选择器:在s1后边获得紧紧挨着的第一个兄弟关系的s2节点

    $(“div + span”)

    <div>

    <span></span>

    <p>

    <span></span>

    </p>

    <span></span>

    </div>

    <span></span>//找到

    <span></span>

    <div></div>

    <span></span>//找到

    4  $(s1 ~ s2) [兄弟]

    后续全部兄弟关系节点选择器:在s1后边获得全部兄弟关系的s2节点

    $(“div ~ span”)

    <div>

    <span></span>

    <p>

    <span></span>

    </p>

    <span></span>

    </div>

    <span></span>

    <span></span>

    <p></p>

    <span></span>

    5  并且(过滤)选择器

    /**************************************************/

    <script type="text/javascript">
    function f1(){
    //$("li").css('background-color','blue');
    //① :first 找到第一个
    //li元素同时,还需要是第一个
    $("li:first").css('background-color','blue');
    //② :last 找到最后一个
    $("li:last").css('background-color','green');
    //③ :eq(下标) 下标从0计算, equal()
    $("li:eq(4)").css('background-color','pink');
    //④ :gt(索引值) 下标大于条件索引值, great than
    $("li:gt(4)").css('color','red');
    //⑤ :lt(索引值) 下标小于条件索引值, less than
    $("li:lt(3)").css('color','orange');
    //⑥ :even 下标索引值等于偶数的
    $("li:even").css('background-color','gray');
    //⑦ :odd 下标索引值等于奇数的
    $("li:odd").css('color','red');
    //⑧ :not(选择器) 去除与“选择器”匹配的元素
    $("li:not(#zhao,#zhang)").css('color','red');
    //⑨ :header 获得h1/h2/h3...的标题元素
    $(":header").css('color','blue');
    }
    </script>
    </head>
    <body>
    <h1>并且选择器</h1>
    <h2>并且选择器</h2>
    <h3>并且选择器</h3>
    <h4>并且选择器</h4>
    <ul>
    <li>刘备</li>
    <li id="zhang">张飞</li>
    <li>关羽</li>
    <li id="zhao">赵云</li>

    <li>孙权</li>
    <li>周瑜</li>
    <li>黄盖</li>
    <li>吕蒙</li>
    </ul>

    <input type="button" value="触发" οnclick="f1()" />
    </body

    /**************************************************/

    function f1(){
    //许多选择器都可以作为“并且”选择器使用
    //$(s1s2s3s4s5)----->并且选择器(保证不会产生歧义)
    //$(s1,s2,s3,s4,s5)----->联合选择器
    $("li.hero").css('color','blue');
    $(".heroli").css('color','blue'); //产生歧义
    $(':header.hero').css('background-color','green');//没有歧义
    $('.hero:header').css('color','red');//没有歧义
    }

    <h1>并且选择器</h1>
    <h2 class="hero">并且选择器</h2>
    <h3 class="hero">并且选择器</h3>
    <h4>并且选择器</h4>
    <ul>
    <li>刘备</li>
    <li id="zhang">张飞</li>
    <li class="hero">关羽</li>
    <li id="zhao">赵云</li>

    <li class="hero">孙权</li>
    <li>周瑜</li>
    <li class="hero">黄盖</li>
    <li>吕蒙</li>
    </ul>

    /**************************************************/

    6  内容过滤选择器

    :contains(内容)

    包含内容选择器,获得节点内部必须通过标签包含指定的内容

    $(“div:contains(beijing)”)

    <div>linken love beijing</div>

    <div>jack love shanghai</div>

     :empty

    获得空元素(内部没有任何元素/文本(空) )节点对象

    $(“div:empty”)

    <div>linken love beijing</div>

    <div>jack love shanghai</div>

    <div></div>

    <div><img /></div>含有<img>节点

    <div>      </div>//含有 空格实心节点

    :has(选择器)

    内部包含指定元素的选择器
           $(“div:has(#apple)”)

    <div>hello</div>

    <div><p></p></div>

    <div><span  id=”apple”></span></div>//id选择器

    <div><span  class=”apple”></span></div>

    :parent

    寻找的节点必须作为父元素节点存在

    $(“div:parent”)

    <div>linken love beijing</div>

    <div>jack love shanghai</div>

    <div></div>

    <div><img /></div>

    <div>      </div>

    /********************************************/

    function f1(){
    //① $(":contains(text)")
    $("div:contains(beijing)").css('background-color','red');
    //② $(":empty")
    $("div:empty").css('width','200px');
    $("div:empty").css('height','100px');
    $("div:empty").css('background-color','pink');
    //③ $(":has(selector)")
    console.log($("div:has(.orange)"));
    //④ $(":parent")
    console.log($("div:parent"));
    }

    <h1>内容过滤选择器</h1>
    <div>linken love beijing</div>
    <div>jack love shanghai</div>
    <div></div>
    <div><img /></div>
    <div> </div>
    <div><p class="orange"></p></div>
    <div><span class="orange"></span></div>

    <input type="button" value="触发" οnclick="f1()" />

    /*********************************************/

    转载于:https://www.cnblogs.com/husam/p/11042621.html

    展开全文
  • JQuery 层次选择器

    2019-09-27 13:43:32
    <!DOCTYPE HTML> <html> <head>... 使用jQuery层次选择器 </title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> </hea...
    <!DOCTYPE HTML>
    <html>
    <head>
        <title> 使用jQuery层次选择器 </title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    </head>
    <body>
        <div class="clsFraA">Left</div>
        <div class="clsFraA" id="divMid">
          <div id="num1">1</div>
          <div>2<span>haha</span></div>
            <span><span class="clsFraC" id="Span2">Span</span></span>
        </div>
        <div class="clsFraA">Right_1</div>
        <div class="clsFraA">Right_2</div>
    </body>
    </html>
    $(function (){
        //jQuery代码
        $("#divMid").next().css("display","none")  //针对于同级的div;Right_1所在div被隐藏;
    等价于=$("#divMid + div").css("display","none");
    
     $("#divMid span").css("display","none");    //针对div里面的所有的span标签隐藏;(Span,haha文字全部隐藏)
    
        $("#divMid>span").css("display","none");//针对div里面的子元素span标签隐藏;(Span文字隐藏)

     $("#divMid ~ div").css("display","none");
    //针对div的同级元素后面的div标签隐藏;(Right_1,Right_2文字隐藏)
    等价于= $("#divMid").nextAll().css("display","none");
    
    
    $("#divMid").siblings("div").css("display","none");   //针对div的同级元素相邻的div标签隐藏;(Left,Right_1,Right_2文字隐藏)

    });

     

    转载于:https://www.cnblogs.com/dazhangli/p/5367036.html

    展开全文
  • jquery 层次选择器

    2017-12-19 11:34:05
    通过层次选择器,就可以通过DOM之间的层次关系来获取特定元素,例如 后代元素、子元素、相邻元素和同辈元素。 层次选择器:以举例说明如下, 后代选择器:$('div p'):选择div中的所有子元素p,返回...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,501
精华内容 600
关键字:

jquery层次选择器