jQuery选择器

最新推荐文章于 2024-07-18 11:48:33 发布

bangzun0726

最新推荐文章于 2024-07-18 11:48:33 发布

阅读量88

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jingLongJun/p/4491045.html

版权

1，jQuery选择器继承自CSS选择器，如下代码：

 
      <script type="text/javascript"> 
    
     $(function() { 
    
      $(".demo").click(function() {//类选择器 
    
      alert("jQuery Demo"); 
    
      }); 
    
     }); 
    
     </script> 
    
      </head> 
    
      <body> 
    
      <p class="demo"> 
    
      jQuery Demo 
    
      </p> 
    
      </body> 
    
     </html>

2，jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。

3，基本选择器。

选择器	描述	返回	实例
#id	根据给定id匹配一个元素	单个元素	$("#test")
.class	根据给定的类名匹配元素	集合元素	$(".test")
element	根据元素名匹配元素	集合元素	$("p")
*	匹配所有的元素	集合元素	$("*")
selector1..selectorn	合并元素后一起返回	集合元素	$("div,span,p")

测试html和css

 
    <body> 
   
     <div class="one" id="one"> 
   
     id为one，class为one的div 
   
     <div class="mini"> 
   
     class为mini 
   
     </div> 
   
     </div> 
   
     <div class="one" id="two" title="test"> 
   
     class="one" id="two" title="test"的div 
   
     <div class="mini" title="other"> 
   
     class="mini" title="other" 
   
     </div> 
   
     <div class="mini" title="test"> 
   
     class="mini" title="test" 
   
     </div> 
   
     </div> 
   
     <div class="one"> 
   
     <div class="mini"> 
   
     class="mini" 
   
     </div> 
   
     <div class="mini"> 
   
     class="mini" 
   
     </div> 
   
     <div class="mini"> 
   
     class="mini" 
   
     </div> 
   
     <div class="mini"></div> 
   
     </div> 
   
     <div class="one"> 
   
     <div class="mini"> 
   
     class="mini" 
   
     </div> 
   
     <div class="mini"> 
   
     class="mini" 
   
     </div> 
   
     <div class="mini"> 
   
     class="mini" 
   
     </div> 
   
     <div class="mini" title="tesst"> 
   
     class="mini" title="tesst" 
   
     </div> 
   
     </div> 
   
     <div style="display:none;" class="none">style="display:none;" class="none"</div> 
   
     <div class="hide">class="hide"</div> 
   
     <div>包含Input的type为hidden的div<input type="hidden" size="8"></div> 
   
     <span id="mover">正在执行动画的span元素</span> 
   
     </body>

 
     <style type="text/css"> 
    
      div { 
    
      width:450px; 
    
      height:140px; 
    
      margin:5px; 
    
      background: :#aaa; 
    
      border:#000 1px solid; 
    
      float:left; 
    
      font-size:17px; 
    
      font-family:Verdana; 
    
      } 
    
      div.mini{ 
    
      width:210px; 
    
      height:55px; 
    
      background-color: :#aaa; 
    
      font-size: 12px; 
    
      } 
    
      div.hide{ 
    
      display:none; 
    
      } 
    
      </style>

-1，改变id为one的元素的背景色。

 
     $(function() { 
    
      //id选择器 
    
      $("#one").css("background", "#bbffaa"); 
    
     });

-2，改变class为mini的元素的背景色。

 
     $(function() { 
    
      //id选择器 
    
      $("#one").css("background", "#bbffaa"); 
    
      //类选择器 
    
      $(".mini").css("background", "#bbffaa"); 
    
     });

-3，改变所有div的背景色

 
     $(function() { 
    
      //id选择器 
    
      $("#one").css("background", "#bbffaa"); 
    
      //类选择器 
    
      $(".mini").css("background", "#bbffaa"); 
    
      //元素选择器 
    
      $("div").css("background", "#bbffaa"); 
    
     });

-4，改变所有元素的背景色

 
     $(function() { 
    
      //id选择器 
    
      $("#one").css("background", "#bbffaa"); 
    
      //类选择器 
    
      $(".mini").css("background", "#bbffaa"); 
    
      //元素选择器 
    
      $("div").css("background", "#bbffaa"); 
    
      //all 
    
      $("*").css("background", "#bbffaa"); 
    
     });

-5，所有span元素和id为two的元素。

 
     $(function() { 
    
      //id选择器 
    
      //$("#one").css("background", "#bbffaa"); 
    
      //类选择器 
    
      //$(".mini").css("background", "#bbffaa"); 
    
      //元素选择器 
    
      //$("div").css("background", "#bbffaa"); 
    
      //all 
    
      //$("*").css("background", "#bbffaa"); 
    
      $("span, #two").css("background", "#bbffaa"); 
    
     });

4，层次选择器

选择器	描述	返回	实例
$("a b")	选取a元素中的所有b元素	集合元素	$("div span")选取div里的所有span元素
$("parent>child")	选取parent元素下的child子元素	集合元素	$("div>span")选取div元素下元素名是span的子元素
$("prev + next")	紧接在prev元素后的next元素	集合元素	$(".one+div")class为one的下一个div同辈元素
$("prev~s")	选取prev元素后的所有s元素	集合元素	$("#two~div")选取id为two的所有div同辈元素

-1，改变body内所有div的背景颜色

 
     $(function() { 
    
      //改变body内所有div的背景颜色 
    
      $("body div").css("background", "#bbffaa"); 
    
     });

-2，改变body内子div元素的背景颜色

 
     $(function() { 
    
      $("body>div").css("background", "#bbffaa"); 
    
     });

-3，改变class为one的下一个div同辈元素背景颜色

 
     $(function() { 
    
      $(".one + div").css("background", "#bbffaa"); 
    
     });

-4，改变id为two的元素后所有div同辈元素

 
     $(function() { 
    
      $("#two ~ div").css("background", "#bbffaa"); 
    
     });

可以使用next和nextAll代替后两个选择器

5，过滤选择器

选择器	描述	返回	实例
:first	选取第一个元素	单个元素	$("div:first")选取第一个div元素
:last	选取最后一个元素	单个元素	$("div:last")选取最后一个div元素
:not(selector)	去除所有与给定选择器匹配的元素	集合元素	$("input:not(myClass)")选取class不是myClass的input元素
:even	选取所有索引是偶数的元素，索引从0开始	集合元素	$("input:even")选取索引是偶数的input元素
:odd	选取所有索引是奇数的元素，索引从0开始	集合元素	$("input:odd")选取索引是奇数的input元素
:eq(index)	选取索引等于index的元素	单个元素	$("input:eq(1)")选取索引为1的input元素
:gt(index)	选取索引大于index的元素	集合元素	$("input:gt(1)")选取索引大于1的元素
:lt(index)	选取索引小于index的元素	集合元素	$("input:lt(1)")选取索引小于1的元素
:animated	选取所有执行动画的元素	集合元素	$("div:animated")选取正在执行动画的div元素
:focus	选取当前获取焦点的元素	集合元素	$(":focus")选取当前脚垫元素

-1，改变第一个div元素的背景色

 
     $(function() { 
    
      $("div:first").css("background", "#bbffaa"); 
    
     });

-2，改变最后一个div的背景色

 
     $(function() { 
    
      $("div:last").css("background", "#bbffaa"); 
    
     });

-3，改变class不是one的所有div背景颜色

 
     $(function() { 
    
      $("div:not(.one)").css("background", "#bbffaa"); 
    
     });

-4，改变索引值为偶数的所有div背景颜色

 
     $(function() { 
    
      $("div:even").css("background", "#bbffaa"); 
    
     });

6，内容选择器

7，属性选择器

转载于:https://www.cnblogs.com/jingLongJun/p/4491045.html

bangzun0726

关注

0
点赞
踩
0

收藏

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

1，jQuery选择器继承自CSS选择器，如下代码： <script type="text/javascript">$(function() { $(".demo").click(function() {//类选择器 alert("jQuery Demo"); });});</script> </head> <...
复制链接

扫一扫