像写css选择器一样写jQuery选择器（三）【jQuery入门六】 – WEB前端开发

Web前端开发 • 11年前扫码分享

我是创始人李岩：很抱歉！给自己产品做个广告，点击进来看看。

接《像写css选择器一样写jQuery选择器（二）》

五、Jquery的子元素选择器

:first-child ：匹配每个父元素的第一个子元素，相当于E:nth-child(0)，例如：$(“ul li:first-child”)；
:last-child ：匹配每个父元素的最后一个子元素，例如：$(“ul li: last -child”)；
:nth-child(index/even/odd/equation)：匹配每一个父元素的第N个子或奇偶元素，例如：$(“ul li:nth-child(2)”)；
nly-child ：如果某个元素是父元素中唯一的子元素，那将会被匹配$(“ul li:only-child”)；

六、子元素选择器和过滤性选择器的一些区别

:first-child和:first：

:first只匹配一个元素，而:first-child将为每个父元素匹配一个子元素，所以:first-child匹配出来的是一个集合当然也有可能只匹配一个元素，而:first永远只能匹配到一个元素。

:last-child和:last的区别道理也是一样的；

看示例：



< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://www.css88.com/jquery1.3.2/jquery-1.3.2.min.js"></script>
</head>

<body>
	<h3>我正在学习并且应用的技术</h3>
	<ul>
		<li>javascript</li>
		<li>css2.1</li>
		<li>html4</li>
		<li>MXML</li>
	</ul>
	<h3>我想学习的技术</h3>
	<ul>
		<li>actionscript</li>
		<li>css 3</li>
		<li>html 5</li>
		<li>PHP</li>
	</ul>
	<h3>我精通的技术</h3>
	<ul>
		<li>群里吹水</li>
		<li>忽悠新人</li>
	</ul>
	<div><input type="submit" name="button" id="button1" value="测试$('li:first')" />
  <input type="submit" name="button" id="button2" value="测试$('li:first-child')" /></div>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#button1").click(function(){
				$("li:first").css("color","#FF3300");//这里匹配了<li>javascript</li>
			});
			$("#button2").click(function(){
				$("li:first-child").css("color","#0071db");//这里匹配了<li>javascript</li>、<li>actionscript</li>、<li>群里吹水</li>
			});
		});
	</script>
</body>
</html>

:nth-child(index/even/odd/equation)和:eq(index)

:eq(index) 只匹配一个元素，索引值从0开始；

:nth-child(index/even/odd/equation) 匹配每一个父元素的第N个子或奇偶元素, 索引值从1开始,并且提供更丰富的参数及表达式；

:nth-child(even)// 匹配每一个父元素的偶数元素；

:nth-child(odd) // 匹配每一个父元素的奇数元素；

:nth-child(3n) // 匹配每一个父元素的索引值能被3整除的元素；

:nth-child(2) // 匹配每一个父元素的第2个元素；

:nth-child(3n+1) // 匹配每一个父元素的索引值被3整除后余1的元素

:nth-child(3n+2) // 匹配每一个父元素的索引值被3整除后余2的元素

所以:nth-child(index/even/odd/equation)匹配出来的是一个集合当然也有可能只匹配一个元素，而:eq(index)永远只能匹配到一个元素。

看示例（顺带:only-child也在这里测试一下）：


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery1.3.2/jquery-1.3.2.min.js"></script>
</head>

<body>
	<h3>我正在学习并且应用的技术</h3>
	<ul>
		<li>javascript</li>
		<li>css2.1</li>
		<li>html4</li>
		<li>MXML</li>
	</ul>
	<h3>我想学习的技术</h3>
	<ul>
		<li>actionscript</li>
		<li>css 3</li>
		<li>html 5</li>
		<li>PHP</li>
	</ul>
	<h3>我精通的技术</h3>
	<ul>
		<li>群里吹水</li>
	</ul>
	<div><input type="submit" name="button" id="button1" value="测试$('li:eq(2)')" />
  <input type="submit" name="button" id="button2" value="测试$('li:nth(2)')" />
  <input type="submit" name="button" id="button3" value="测试$('li:nth-child(even)')" />
  <input type="submit" name="button" id="button4" value="测试$('li:nth-child(3n)')" />
  <input type="submit" name="button" id="button5" value="测试$('li:only-child')" /></div>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#button1").click(function(){
				$("li:eq(2)").css("color","#FF3300");//这里匹配了<li>html4</li>
			});
			$("#button2").click(function(){
				$("li:nth-child(1)").css("color","#0071db");//这里匹配了<li>javascript</li>、<li>actionscript</li>、<li>群里吹水</li>
			});
			$("#button3").click(function(){
				$("li:nth-child(even)").css("color","#185309");//这里匹配了<li>css2.1</li>、<li>MXML</li>、<li>css 3</li>、<li>PHP</li>
			});
			$("#button4").click(function(){
				$("li:nth-child(3n)").css("color","#185309");//这里匹配了<li>html4</li>、<li>html 5</li>
			});
			$("#button5").click(function(){
				$("li:only-child").css("color","#4C1F68");//这里匹配了<li>html4</li>、<li>html 5</li>
			});
		});
	</script>
</body>
</html>

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《像写css选择器一样写jQuery选择器（三）【jQuery入门六】》