jquery jQuery选择器

最新推荐文章于 2023-03-21 17:02:08 发布

权世界是我家的

最新推荐文章于 2023-03-21 17:02:08 发布

阅读量254

点赞数 1

本文链接：https://blog.csdn.net/qq_36074088/article/details/71124447

版权

jQuery选择器优点：

（1）简洁的写法

（2）支持css1.0到css3.0的选择器

（3）完善的处理机制

基本选择器

标签选择器（h2）

，类选择器（.class）

，ID选择器（#id）

，并集选择器$（“div，盘，.title”）:所有div，p和拥有class为.title的元素

，交集选择器和全局选择器（h2.title）选取所有拥有class为title的h2元素

jQuery的四种层次选择器

后代选择器 A B（后代）

子选择器 A>B（子）

相邻元素选择器 A~B

同辈元素选择器 A+B

过滤选择器

基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤，表单对象属性过滤选择器

：frist 第一个元素

：last 最后一个元素

：even 所有索引是偶数的元素

：odd 所有索引是奇数的元素

可见性过滤选择器

。show();显示

。hide（）隐藏

!DOCTYPE html>  
<html>  
  <head>  
    <title>3.html</title>  
    <script type="text/javascript">  
      
    //一：类选折器 标签选择器  
     并集选折器/交集选折器/全局选折器  
     //1.交集  
    /*  $( 
     function() 
     { 
     $("div#today").css("color","green"); 
     } 
     ); */  
    //2.并集  
    /* $( 
      function() 
      { 
       $("#today,#tomary").css("color","pink"); 
      } 
    ); */  
    //3.全局  
    $(function() {  
        $("*").css("color", "yellow");  
    });  
    //4.后代选折器 不直接 空格 子元素  
    //5.子选折器 > 直接子  
    5、6.相邻选折器 + 后一个 向后查找之前的不行  
    7.同辈~  
    三：同辈选折器("[href]")/("[href=]")键值  
        ^ 以谁开头 "[href^=cn]"  
        $ 以谁结尾 "[href$=cn]"  
        * 包含     "[href$*=cn]"  
        复合选折器  ( "a[href$*=cn]")  
    四：过滤选择器   
    1.$(  
    function(){  
        //$("li:first").css("color","pink");第一个  
            $("li:last").css("color","pink");最后一个  
            $("li:eq(1)").css("color","pink");某一个  
            $("li:gt(1)").css("color","pink");大于1  
            $("li:odd").css("color","pink");奇数  
                //$("li:even").css("color","pink");偶数  
                $("[id=box]").css("color","pink");  
                    $("div:hidden");隐藏  
                        $("div:hidden").show();显示  
    }  
    }  
    );  
    //2.可见性过过滤选折器/不可见性过过滤选折器  
    hidden();  
    </script>  
  
  </head>  
    
  <body>  
    <div id="today">如果爱可以重来</div>  
    <div id="tomary">把最美好的留在昨天</div>  
    //四：过滤选择器  
    <ul>  
       <li>吃饭</li>  
        <li>睡觉</li>  
         <li>冰果消消乐</li>  
    </ul>  
  </body>  
</html>

权世界是我家的

关注

1
点赞
踩
0

收藏

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

jQuery选择器优点：（1）简洁的写法（2）支持css1.0到css3.0的选择器（3）完善的处理机制基本选择器标签选择器（h2），类选择器（.class），ID选择器（#id），并集选择器$（“div，盘，.title”）:所有div，p和拥有class为.title的元素，交集选择器和全局选择器（h2.title）选取所有拥有class为title的h2元...
复制链接

扫一扫