1、nth-child(n)：下标从1开始；eq(n)：下标从0开始
2、nth-child(N)：选择多个元素；eq(N)：选择一个元素
3、nth-child(N)：在一个文档树种中，选择各层排行第N的所有元素。
例：nth-child(2)：包括父辈的老二，兄弟的老二，子孙的老二，下图的绿色部分
eq(N)：在一个文档树种中，前序排列后，选择第N个元素及其所有子元素。
例：在下面的HTML代码里，查看$("div:eq(3)").html()的结果。（编号就是前序排列的编号）
<div>0
<div>1
<div>div_a_2</div>
<div>3
<div>div_b_4</div>
<div>div_c_5</div>
</div>
<div>div_d_6</div>
</div>
<div>7
<div>div_e_8</div>
</div>
<div>9
<div>10
<div>div_f_11</div>
</div>
<div>div_g_12</div>
</div>
</div>$("div:eq(3)").html()的选择结果
最后思考个问题：
$('div:nth-child(odd)').css("color","red");
$('div:nth-child(even)').css("color","blue");用了上面两句，所有div的字体颜色会以红蓝间隔的出现吗？答案当然是：不会
测试如下，代码部分：
<div>0 <div>1 <div>div_a_2</div> <div>3 <div>div_b_4</div> <div>div_c_5</div> </div> <div>div_d_6</div> </div> <div>7 <div>div_e_8</div> </div> <div>9 <div>10 <div>div_f_11</div> </div> <div>div_g_12</div> </div> </div>
运行结果：
以上就是JQuery中：nth-child(N)和：eq(N)选择器两者的区别的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
738
