<div class="codetitle"> <span><a style="CURSOR: pointer" data="98112" class="copybut" id="copybut98112" onclick="doCopy('code98112')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code98112"> <br> <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><头> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8">> <br><脚本 src="js/jquery-1.3.2.js"></script> <br><script type="text/javascript"><!-- <BR> $(function(){ <BR> $("#aNth1").click(function(){ <BR> $ ("#ul1 li:nth-child(even)").each(function(){ <BR> $(this).css("background","#773300"); <BR> }) <BR> } ) <BR> $("#aNth2").click(function(){ <BR> $("#ul1 li:nth-child(2n 1)").each(function(){ <BR> $(这个).css("背景","#ff3434"); <BR> }) <BR> }) <BR> $("#aFirst").click(function(){ <BR> $("#ul1 李:first-child").each(function(){ <BR> $(this).css("背景","#223344"); <BR> }) <BR> }) <BR> $("# aLast").click(function(){ <BR> $("#ul1 li:last-child").each(function(){ <BR> $(this).css("背景","#99ff88" ); <BR> }) <BR> }) <BR> $("#aOnly").click(function(){ <BR> $("ul li:独子" ).each(函数(){ <BR> $(this).css("背景","#99ff88"); <BR> }) <BR> }) <BR> }) <BR>// --></script> <br><title>无标题文档</title> <br></head> <br><br><body> <br><br><a href="#" onclick="javascript:location.reload();">重置</a> <br><ul id="ul1"> <br><li>li1</li> <br><li>li2</li> <br><li>li3</li> <br><li>li4</li> <br><li>li5</li> <br><li>li6</li> <br></ul> <br><ul> <br><li>li7</li> <br></ul> <br><a href="#" id="aNth1">设置ul1的偶索引子元素的背景颜色</a>| <br><a href="#" id="aNth2">设置ul1的奇索引子元素的背景颜色</a>| <br><a href="#" id="aFirst">设置ul1的头子元素的背景颜色</a>| <br><a href="#" id="aLast">设置ul1的尾子元素的背景颜色</a>| <br><a href="#" id="aOnly">设置所有ul中唯一子元素的背景颜色</a> <br></body> <br></html><br> </div> <br>1.$("ParentSelector ChildTagName:nth-child(...)")注-以下简写为:nth-child <br>描述:获取ParentSelector选择的元素集合的子元素集合进行索引筛选,如例子中点击aNth1后,对ID为ul1的元素的li子元素进行偶索引(even)选择($("#ul1 li:nth-child(even)")),even这关键字应该不陌生吧,在第三章中有讲到,若还不清楚的话可先去第三章瞄下再继续^^,当然这里也可以用odd,不过在这里跟第三章有点不同,就是第三章中,索引是从0开始,不过这里的索引要从1开始哦,本人感觉这点设计的不是很好- -!,没有规范,不知道是不是设计的时候疏忽了。此方法还有一个蛮灵活的用法,就像例子中aNth2点击事件里,用$("#ul1 li:nth-child(2n 1)")的方法完成了类似$("#ul1 li:nth-child(odd)")的功能,至于2n 1应该不用我来讲解了吧,初中数学就经常用到了。实在不懂的话跟贴吧- -!。此方法也可以跟上具体的索引比如“2”,不过要记住哦,这里的索引是从1开始滴!! <br>返回值:Array(Element); <br>2.:first-child <br>描述:获取选择的元素集合的头元素。这里写的简单点,应该看的懂吧,结合例子实在看不懂的话贴吧- -!。 <br>返回值:Array(Element); <br>3.:last-child <br>描述:获取选择的元素集合的尾元素。 <br>返回值:Array(Element); <br>4.:only-child <br>描述:获取无兄弟节点的元素,如例子中,第二个ul元素只有一个li子元素,所以$("ul li:only-child")方法只获取了li7。 <br>返回值:Array(Element);