jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)

jQuery是一个JavaScript库，它使得JavaScript编写代码变得更加简单。通过使用jQuery，我们可以使用更少的代码来完成许多常见的JavaScript任务，例如处理HTML文档遍历、事件处理、动画和很多其他的操作。同时，它也支持CSS选择器，可以使用CSS样式选择器来定位DOM元素。

奇偶匹配是CSS3中的一种选择器用法，用于匹配列表、表格等元素中的奇数项和偶数项。在jQuery中，我们也可以使用:even/:odd选择器来实现相同的效果。

以下是一个使用CSS选择器和奇偶匹配的示例代码：

<ul>
  <li>菜品1</li>
  <li>菜品2</li>
  <li>菜品3</li>
  <li>菜品4</li>
  <li>菜品5</li>
  <li>菜品6</li>
  <li>菜品7</li>
</ul>

li:nth-child(odd) {
    background-color: #ccc;
}
li:nth-child(even) {
    background-color: #eee;
}

上面的代码会把列表中的奇数项设置为灰色，偶数项设置为浅灰色。

下面是一个使用jQuery实现奇偶匹配的示例代码：

<ul>
  <li>菜品1</li>
  <li>菜品2</li>
  <li>菜品3</li>
  <li>菜品4</li>
  <li>菜品5</li>
  <li>菜品6</li>
  <li>菜品7</li>
</ul>

$("li:even").css("background-color", "#eee");
$("li:odd").css("background-color", "#ccc");

上面的代码同样会把列表中的奇数项设置为灰色，偶数项设置为浅灰色。

除了奇偶匹配外，jQuery还支持其他众多CSS选择器的用法，包括属性选择器、子元素选择器、伪类选择器等等。对于前端开发人员来说，熟练使用jQuery可以让代码更加简洁高效。