在使用 jQuery 进行 DOM 操作时，我们经常会用到 :eq() 和 :nth-child() 这两个伪类选择器。它们都用于选择具有特定索引的元素，但是它们之间有一些区别，本文将会详细介绍这两个选择器的异同点。
:eq()
:eq() 选择器用于选择具有指定索引值的元素。其中索引值从 0 开始。例如 $("ul li:eq(2)") 可以选择一个含有多个 <li> 元素的无序列表中的第三个元素（因为索引从 0 开始）。
不过需要注意的是，:eq() 并不是 CSS 标准中定义的选择器，而是 jQuery 独有的选择器。
以下是一个使用 :eq() 选择器的例子：
---- -------- ------ -------- ------ -------- ------ -------- ------ -------- ------ ----- -------- ---------------------------- - ----- ----------------------- ------- --- ---------
上面的代码将会把一个无序列表中的第三个元素变成红色。
:nth-child()
:nth-child() 选择器也用于选择具有指定索引值的元素。但是与 :eq() 不同的是，:nth-child() 可以选择指定父元素下的第 n 个子元素，而不是选中整个文档中的第 n 个匹配元素。
以下是一个使用 :nth-child() 选择器的例子：
---- -------- ------ -------- ------ -------- ------ -------- ------ -------- ------ ----- -------- ---------------------------- - ----- ------------------------------ ------- --- ---------
上面的代码将会把一个无序列表中的第三个 <li> 元素变成红色。
需要注意的是，:nth-child() 中的索引值从 1 开始而非从 0 开始，这与 JavaScript 数组下标的规则相同。
:eq() 与 :nth-child() 的区别
虽然 :eq() 和 :nth-child() 都可以选择具有特定索引的元素，但它们之间还是存在一些区别的。
首先，使用 :eq() 时必须指定一个具体的匹配元素，而 :nth-child() 则可以选择其父元素下的任意子元素。因此，当我们只需要选择父元素下的某个子元素时，通常会使用 :nth-child()。
其次，:eq() 的速度比 :nth-child() 快，因为前者只会在匹配元素集合中查找一个元素，而后者则需要遍历整个父元素下的所有子元素，直到找到指定索引的元素。
最后，需要注意的是，:eq() 和 :nth-child() 都只能选择一个元素。如果我们需要选择一组相邻的元素，则应该使用类似于 :lt() 或 :gt() 这样的过滤器（可参考 jQuery 文档）。
总结
本文介绍了 :eq() 和 :nth-child() 两个伪类选择器的异同点，其中 :eq() 可以选择匹配集合中的第 n 个元素，而 :nth-child() 则可以选择指定父元素下的第 n 个子元素。在实际开发中，我们应该根据具体需求选择合适的选择器来操作 DOM 元素。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29928