jQuery中的子（后代）元素过滤选择器（四、六）：nth-child()、first-child、last-child、only-child
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>子(后代)元素过滤选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<style type="text/css">
body{
font-family: "Microsoft YaHei"
}
.cGreen{color: #4CA902}
.cPink{color: #ED4A9F}
.cBlue{color: #0092E7}
.cCyan{color: #01A6A2}
.cYellow{color: #DCA112}
.cRed{color: #B7103B}
.cPurple{color: #792F7C}
.cBlack{color: #110F10}
.cOrange{color: #FF4500}
.cGray{color: #A9A9A9}
.hide{display: none;}
span {
float:left;
}
ul{
}
ul li {
width:120px;
float: left;
}
</style>
<script type="text/javascript">
/*
说是子元素过滤选择器，我觉得是后代元素过滤选择器
更准确。
子元素过滤选择器，对层级中的后代选择器做了加强。
为什么加强的是后代不是子元素选择器呢？
因为我们在使用层次选择器的时候，可以看出来，
层次选择器中，子元素选择器只能涉及一层，比后代选择器
范围小多了，后代选择器范围可以到全部。
所以虽然名字是子元素过滤选择器，其实是对后代选择器的加强。
可以对选择出来的后代元素再通过冒号的形式进行选择。
选择形式：
(1).精确到递几个孩子：nth-child()
1.其中的参数可以是数字(从1开始)
2.可以是奇数add、偶数even的表示
3.可以n的倍数。(注意必须是n，不能是其他的x、y之类的是约束好了的)
也可以倍数+1 ... m 3n+1、3n+2 ...
(2).第一个孩子：first-child
(3).最后一个孩子：last-child
(4).唯一一个孩子：only-child
*/
$(document).ready(function(){
// <input type="button" id="btn1" value=":nth-child()选取ul的第二个(从1开始)li元素">
$("#btn1").click(function(){
$("ul li:nth-child(2)").addClass("cGreen");
});
// <input type="button" id="btn2" value=":nth-child()选取ul的第奇数个li元素">
$("#btn2").click(function(){
$("ul li:nth-child(odd)").addClass("cPink");
});
// <input type="button" id="btn3" value=":nth-child()选取ul的第3n(n从1开始)个li元素">
$("#btn3").click(function(){
$("ul li:nth-child(3n)").addClass("cBlue"); // 也可以倍数+1 ... m 3n+1、3n+2 ...
});
// <input type="button" id="btn4" value=":first-child选取ul第一个li元素">
$("#btn4").click(function(){
$("ul li:first-child").addClass("cCyan");
});
// <input type="button" id="btn5" value=":last-child选取ul最后一个li元素">
$("#btn5").click(function(){
$("ul li:last-child").addClass("cYellow");
});
// <input type="button" id="btn6" value=":only-child选取ul中只有唯一li元素">
$("#btn6").click(function(){
$("ul li:only-child").addClass("cRed");
});
});
</script>
</head>
<body>
<span>中国城市：</span><br>
<ul id="chn">
<li id="bj">北京</li>
<li id="sh">上海</li>
<li id="gz">广州</li>
<li id="sz">深圳</li>
<li id="hk">香港</li>
</ul>
<br><br>
<span>美国城市：</span><br>
<ul id="usa">
<li id="wst">华盛顿特区</li>
<li id="ny">纽约</li>
<li id="la">洛杉矶</li>
<li id="scg">芝加哥</li>
</ul>
<br><br>
<span>德国城市：</span><br>
<ul id="ger">
<li id="mnh">慕尼黑</li>
</ul>
<div style="clear:both;"></div>
<br><br>
<hr>
<input type="button" id="btn1" value=":nth-child()选取ul的第二个(从1开始)li元素">
<input type="button" id="btn2" value=":nth-child()选取ul的第奇数个li元素">
<input type="button" id="btn3" value=":nth-child()选取ul的第3n(n从1开始)个li元素">
<input type="button" id="btn4" value=":first-child选取ul第一个li元素">
<input type="button" id="btn5" value=":last-child选取ul最后一个li元素">
<input type="button" id="btn6" value=":only-child选取ul中只有唯一li元素">
</body>
</html>
jQuery中的子（后代）元素过滤选择器（四、六）：nth-child()、first-child、last-child、only-child的更多相关文章
- jQuery中的表单对象属性过滤选择器（四、八）：:enabled、:disabled、:checked、:selected
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- jQuery中的内容、可见性过滤选择器（四、四）：:contains()、:empty、:has()、:parent、:hidden、:visible
<!DOCTYPE html> <html> <head> <title>内容.可见性过滤选择器</title> <meta http ...
- jQuery内容过滤选择器与子元素过滤选择器用法实例分析
jQuery选择器内容过滤 一.:contains(text) 选择器::contains(text)描述:匹配包含给定文本的元素返回值:元素集合 示例: ? 1 2 $("div.mini ...
- jQuery选择器之子元素过滤选择器Demo
测试代码: 07-子元素过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
- 过滤选择器first与子元素过滤选择器first-child的区别
1.表格代码如下: <table id="table"> <tr> <td>id</td> <td>name</t ...
- es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
- jquery中动态新增的元素节点无法触发事件解决办法
在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的,我们下面就为各位来详细的介绍此问题的解决办法． 比如做一个ajax读取留言列表的时候,每条留言后面有个回复按钮,class为“re ...
- jQuery中，子页面与父页面之间的调用方法
在jQuery中, 子页面查找父页面的元素 parent.$("#元素Id") 父页面调用子页面的元素 $("#子页面iframe的Id").contents( ...
- jQuery选择器(表单元素过滤选择器)第八节
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
随机推荐
- Modelsim波形显示字符
偶然在 QQ 群里看到一个大佬发的 Modelsim 波形显示字符,闲着没事拿来玩玩,并将改良过程也整理一下. 一.字符点阵产生 软件采用 PCtoLCD2002,打开后不需要设置,直接打字然后点击[ ...
- YARN学习总结之环境搭建
Yarn环境搭建(基于hadoop-2.6.0-cdh5.7.0 伪分布) 1)配置文件 etc/hadoop/mapred-site.xml: <configuration> <p ...
- 一：Vue项目构建
第一步:需要安装nodeJS的环境,直接去官网下载https://nodejs.org/en/,下载下来按照提示一步步的安装.(vue.js是一个Js 框架.在node里面通过Npm 安装,是为了方便 ...
- 【Mysql】一个简易的索引方案
一.没有索引的时候如何查找 先忽略掉索引这个概念,如果现在直接要查某条记录,要如何查找呢? 在一个页中查找 如果表中的记录很少,一个页就够放,那么这时候有 2 种情况: 用主键为搜索条件:这时就是之前 ...
- linux下快速安装pyenv管理多版本python
起因 一直服务器python项目都是放docker跑,这次为了测试,不得不在宿主机跑,就必须安装python3.7,但是ubuntu16.04下有点麻烦 尝试 源码安装,懒,算了,也不想污染服务器环境 ...
- swagger json导出word，Typora软件推荐！！！
场景: 前几天项目验收,赶了一整天补API接口设计文档,给爷整吐了.周末的时候就想能不能直接把swagger的json文件导出成word? 顺便学习一下NPOI的使用. 实现思路: 1.先把swaag ...
- SaltStack 命令注入漏洞（CVE-2020-16846）
SaltStack 是基于 Python 开发的一套C/S架构配置管理工具.2020年11月SaltStack官方披露了CVE-2020-16846和CVE-2020-25592两个漏洞,其中CVE- ...
- ORACLE ORA-00933: SQL 命令未正确结束，
这个错误害我花了一天时间排查,最后原来是因为结束符,这种语句不能是分号,将分号即可执行成功. MERGE INTO MO_TRADE_COUNT_DAY A USING ( SELECT MAX(fl ...
- 又一开源项目爆火于GitHub，Android高级插件化强化实战
一.插件化起源 插件化技术最初源于免安装运行 Apk的想法,这个免安装的 Apk 就可以理解为插件,而支持插件的 app 我们一般叫 宿主. 想必大家都知道,在 Android 系统中,应用是以 Ap ...
- 2020Android高级开发面试题以及答案整理，持续更新中~
本篇收录了一些大厂面试中经常会遇到的经典面试题,并且我做好了整理分类.虽然今年的金九银十已经过去了,但是可以为明年的金三银四做准备啊,相信每一个跳槽季都有很多的前端开发者蠢蠢欲动,通过对本篇知识的整理 ...