JQuery 学习笔记 选择器之六


Posted in Javascript onJuly 23, 2009
<!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);
Javascript 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
jQuery替换textarea中换行的方法
Jun 10 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
Dec 19 Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 Javascript
实例教学如何写vue插件
Nov 30 Javascript
前端MVVM框架解析之双向绑定
Jan 24 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 Javascript
简单了解node npm cnpm的具体使用方法
Feb 27 Javascript
JQuery 学习笔记 选择器之五
Jul 23 #Javascript
JQuery 学习笔记 选择器之四
Jul 23 #Javascript
JQuery 学习笔记 选择器之三
Jul 23 #Javascript
JQuery 学习笔记 选择器之二
Jul 23 #Javascript
JQuery 学习笔记 选择器之一
Jul 23 #Javascript
javascript IFrame 强制刷新代码
Jul 23 #Javascript
jQuery TextBox自动完成条
Jul 22 #Javascript
You might like
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
2012/01/15 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
js定时器出现第一次延迟的原因及解决方法
2021/01/04 Javascript
python进程管理工具supervisor使用实例
2014/09/17 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
tensorflow识别自己手写数字
2018/03/14 Python
解决Python网页爬虫之中文乱码问题
2018/05/11 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
详解【python】str与json类型转换
2019/04/29 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
湖南卫视在线视频媒体平台:芒果TV
2019/10/30 全球购物
公司营业员的自我评价
2014/03/04 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
结婚仪式主持词
2015/06/29 职场文书
详解python网络进程
2021/06/15 Python
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android