昨天和前天都在给大家讲解选择器的文章。今天再给大家普及一个选择器,这篇文章后,我想大家可能对选择某个元素肯定是得心应手了。这篇文章要讲的是jQuery :odd 选择器。可能有些同学见过它,它的应用还是比较常见的。如果没见过,也不用担心。下面我将系统的来讲解下它。

它的定义
:odd 选择器选取每个带有奇数 index 值的元素(比如 1、3、5)。
index 值从 0 开始,所有第一个元素是偶数 (0)。
最常见的用法:与其他元素/选择器一起使用,来选择指定的组中奇数序号的元素(如上面的例子)

语法
  1. $(":odd"

用法
此选择器一般也要和其他选择器配合使用,比如类选择器、元素选择器等等。例如:

  1.  
  2. $("li:odd)").css("color","green"
  3.  
以上代码是将li元素集合中索引为奇数的li中的字体颜色设置为绿色。
如果没有和其他选择器配合使用,那么默认和*选择器配合使用。$(": odd")等同于$("*: odd")
 
实例代码:
  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4. <meta charset=" utf-8">   
  5. <meta name="author" content="http://www.myboke.cn/" />   
  6. <title>Joy技术博客</title>   
  7. <script type="text/javascript" src="http://www.myboke.cn/statics/js/js/core/jquery.min.js"></script>   
  8. <script type="text/javascript">    
  9. $(document).ready(function(){    
  10.   $("#btn").click(function(){    
  11.     $("li:odd").css("color","blue");    
  12.   });    
  13. });    
  14. </script>   
  15. </head>   
  16. <body>   
  17. <ul>   
  18.   <li>html专区</li>   
  19.   <li>div+css专区</li>   
  20.   <li>jQuery专区</li>   
  21.   <li>Javascript专区</li>   
  22. </ul>   
  23. <button id="btn">点击查看效果</button>   
  24. </body>   
  25. </html>   

温馨提示:

请使用 :even 选择器来选取偶数序号的元素。
返回顶部