JQuery 学习笔记 选择器之六
给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的JQuery 学习笔记 选择器之六,过去的都会过去,迎接崭新的开始,释放更美好的自己。
!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" /
script src="js/jquery-1.3.2.js"/script
script type="text/javascript"!--
$(function(){
$("#aNth1").click(function(){
$("#ul1 li:nth-child(even)").each(function(){
$(this).css("background","#773300");
})
})
$("#aNth2").click(function(){
$("#ul1 li:nth-child(2n+1)").each(function(){
$(this).css("background","#ff3434");
})
})
$("#aFirst").click(function(){
$("#ul1 li:first-child").each(function(){
$(this).css("background","#223344");
})
})
$("#aLast").click(function(){
$("#ul1 li:last-child").each(function(){
$(this).css("background","#99ff88");
})
})
$("#aOnly").click(function(){
$("ul li:only-child").each(function(){
$(this).css("background","#99ff88");
})
})
})
// --/script
title无标题文档/title
/head
body
a href="#" onclick="javascript:location.reload();"重置/a
ul id="ul1"
lili1/li
lili2/li
lili3/li
lili4/li
lili5/li
lili6/li
/ul
ul
lili7/li
/ul
a href="#" id="aNth1"设置ul1的偶索引子元素的背景颜色/a|
a href="#" id="aNth2"设置ul1的奇索引子元素的背景颜色/a|
a href="#" id="aFirst"设置ul1的头子元素的背景颜色/a|
a href="#" id="aLast"设置ul1的尾子元素的背景颜色/a|
a href="#" id="aOnly"设置所有ul中唯一子元素的背景颜色/a
/body
/html
1.$("ParentSelector ChildTagName:nth-child(...)")注-以下简写为:nth-child
描述:获取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开始滴!!
返回值:Array(Element);
2.:first-child
描述:获取选择的元素集合的头元素。这里写的简单点,应该看的懂吧,结合例子实在看不懂的话贴吧- -!。
返回值:Array(Element);
3.:last-child
描述:获取选择的元素集合的尾元素。
返回值:Array(Element);
4.:only-child
描述:获取无兄弟节点的元素,如例子中,第二个ul元素只有一个li子元素,所以$("ul li:only-child")方法只获取了li7。
返回值:Array(Element);