繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JQuery 学习笔记 选择器之六
- Javascript
- IE与firefox下Dhtml的一些区别小结
- jQuery Selectors(选择器)的使用(一、基本篇)
- jQuery Selectors(选择器)的使用(二、层次篇)
- jQuery 跨域访问问题解决方法
- jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
- javascript 面向对象全新理练之数据的封装
- javascript 面向对象全新理练之继承与多态
- javascript 面向对象全新理练之原型继承
- JavaScript 生成随机数并自动大小排序
- JavaScript利用split函数按规定截取字符串(获取邮箱用户名)
- JavaScript 双级下拉菜单实现代码
- JavaScript split()使用方法与示例
- 33种Javascript 表格排序控件收集
- js 屏蔽鼠标右键脚本附破解方法
- javascript json 新手入门文档
- jQuery Selectors(选择器)的使用(四-五、内容篇&可见性篇)
- javascript KeyDown、KeyPress和KeyUp事件的区别与联系
- javascript 汉字转拼音实现代码
- javascript 跳转代码集合
- JavaScript 申明函数的三种方法 每个函数就是一个对象（一）
Javascript 中的 JQuery 学习笔记 选择器之六
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 291 ::
收藏到网摘: n/a
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">
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
</ul>
<ul>
<li>li7</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);
评论 (0) All
