JQuery选择器 eq(n) 和nth-child(n)的区别

最新推荐文章于 2022-12-22 14:33:02 发布

若寒hqq

最新推荐文章于 2022-12-22 14:33:02 发布

阅读量754

点赞数

分类专栏： JQuery 文章标签： JQuery

本文链接：https://blog.csdn.net/u014682977/article/details/45314353

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

$("tr>td").eq(n)-------------->查找所有tr里的td子元素，从根节点找将其依次放入数组中（从0开始），然后再查找第n个元素，所以查到的只有一个元素

$("tr>td:nth-child(n)")------------>查找所有tr里的第n个td子元素（从1开始），所以查到的是多个

看如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("tr>td").eq(1).css('color','red');
$("tr>td:nth-child(2)").css('background-color','yellow');
});
</script>
</head>
<body>
<table border="2px solid red">
<thead>
<tr>
<td>hello</td>
<td>hello</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
</tbody>
</table>
</body>
</html>

还有一个eq和get的区别

控制台打印一下就知道区别了：

（1）eq获取到的是JQuery封装的一个对象

（2）get获取到的是js原生DOM