jquery选择器之:eq(n)和:nth-child(n)区别：
一、起始下标不一样:eq是程序的思想，下标是0开始。nth-child是css的思想，下标是1开始
二、过滤元素的方式不一样，eq是类型精确过滤;nth-child是忽略类型过滤
下文中，eq背景有效区域是jQuery部分；而nth-child是CSS部分，因为p标签内的也在下标范围内
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
</head>
<style>
</style>
<script>
$(function(){
//$("ul:eq(1)").css("background-color", "yellow");
$("ul:nth-child(2)").css("background-color", "yellow");
})
</script>
<body>
<p>paragraph 1</p>
<ul>
<li>CSS1</li>
<li>CSS2</li>
<li>CSS3</li>
<li>CSS4</li>
</ul>
<ul>
<li>jQuery1</li>
<li>jQuery2</li>
<li>jQuery3</li>
<li>jQuery4</li>
</ul>
</body>
</html>
一、起始下标不一样:eq是程序的思想，下标是0开始。nth-child是css的思想，下标是1开始
二、过滤元素的方式不一样，eq是类型精确过滤;nth-child是忽略类型过滤
下文中，eq背景有效区域是jQuery部分；而nth-child是CSS部分，因为p标签内的也在下标范围内
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
</head>
<style>
</style>
<script>
$(function(){
//$("ul:eq(1)").css("background-color", "yellow");
$("ul:nth-child(2)").css("background-color", "yellow");
})
</script>
<body>
<p>paragraph 1</p>
<ul>
<li>CSS1</li>
<li>CSS2</li>
<li>CSS3</li>
<li>CSS4</li>
</ul>
<ul>
<li>jQuery1</li>
<li>jQuery2</li>
<li>jQuery3</li>
<li>jQuery4</li>
</ul>
</body>
</html>
1608
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
