jQuery过滤选择器新手练习（又是隔行变色）-来自于三人行慕课

原文来源：https://www.3mooc.com/front/articleinfo/186

上次发过一篇jQuery关于DOM对象和jQuery对象使用的隔行变色效果实现的新手练习文章。

今天在这里再做一次隔行变色，来练习使用jQuery过滤选择器。

第一步：创建HTML

<ul>

<li>我是第1个li</li>

<li>我是第2个li</li>

<li>我是第3个li</li>

<li>我是第4个li</li>

<li>我是第5个li</li>

<li>我是第6个li</li>

<li>我是第7个li</li>

<li>我是第8个li</li>

<li>我是第9个li</li>

<li>我是第10个li</li>

</ul>

第二步：引入jQuery

<script src="jquery-1.12.4.js"></script>

第三步：代码实现

<script>

  $(function(){

    $("li:even").css("backgroundColor","red");

    $("li:odd").css("backgroundColor","pink");

  })

</script>

不需要用for循环遍历即可得到同样的效果。实现方式更简单。

这里需要注意,li:even获取偶数，li:odd是获取奇数。我们知道我们看到的第1个li，在数组里的是第0个，我们看到的第2个的下标为1。所以我们会看到第1、3、5、7、9个为红色。