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 相关文章推荐
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
Vue 中axios配置实例详解
Jul 27 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
vue2.0 实现富文本编辑器功能
May 26 Javascript
javascript设计模式之迭代器模式
Jan 30 Javascript
微信小程序国际化探索实现(附源码地址)
May 20 Javascript
Postman无法正常返回结果问题解决
Aug 28 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随机生成随机个数的字母组合示例
2014/01/14 PHP
PHP将进程作为守护进程的方法
2015/03/19 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
JavaScript null和undefined区别分析
2009/10/14 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
2017/07/21 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
vue element-ui中table合计指定列求和实例
2020/11/02 Javascript
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
python装饰器初探(推荐)
2016/07/21 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
将Django项目部署到CentOs服务器中
2018/10/18 Python
Pycharm生成可执行文件.exe的实现方法
2020/06/02 Python
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
院药学专业个人求职信
2013/09/21 职场文书
数控专业毕业生求职信范文
2013/09/21 职场文书
矫正人员思想汇报
2014/01/08 职场文书
八年级美术教学反思
2014/02/02 职场文书
高考寄语大全
2014/04/08 职场文书
异地恋情人节寄语
2015/02/28 职场文书
Python基础详解之邮件处理
2021/04/28 Python
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技