JQuery 学习笔记 选择器之六

领导者AH

领导者AH

2016-02-19 15:44

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的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);
展开更多 50%)
分享

猜你喜欢

JQuery 学习笔记 选择器之六

Web开发
JQuery 学习笔记 选择器之六

JQuery 学习笔记 选择器之五

Web开发
JQuery 学习笔记 选择器之五

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

JQuery 学习笔记 选择器之四

Web开发
JQuery 学习笔记 选择器之四

JQuery 学习笔记 选择器之二

Web开发
JQuery 学习笔记 选择器之二

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JQuery 学习笔记 选择器之三

Web开发
JQuery 学习笔记 选择器之三

JQuery 学习笔记 选择器之一

Web开发
JQuery 学习笔记 选择器之一

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

如何关闭Win8无线网络

如何关闭Win8无线网络

如何快速恢复组策略?小编有妙招

如何快速恢复组策略?小编有妙招
下拉加载更多内容 ↓