<!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的更多相关文章

  1. jQuery中的表单对象属性过滤选择器（四、八）：:enabled、:disabled、:checked、:selected

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  2. jQuery中的内容、可见性过滤选择器（四、四）：:contains()、:empty、:has()、:parent、:hidden、:visible

    <!DOCTYPE html> <html> <head> <title>内容.可见性过滤选择器</title> <meta http ...

  3. jQuery内容过滤选择器与子元素过滤选择器用法实例分析

    jQuery选择器内容过滤 一.:contains(text) 选择器::contains(text)描述:匹配包含给定文本的元素返回值:元素集合 示例: ? 1 2 $("div.mini ...

  4. jQuery选择器之子元素过滤选择器Demo

    测试代码: 07-子元素过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  5. 过滤选择器first与子元素过滤选择器first-child的区别

    1.表格代码如下: <table id="table"> <tr> <td>id</td> <td>name</t ...

  6. es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  7. jquery中动态新增的元素节点无法触发事件解决办法

    在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的,我们下面就为各位来详细的介绍此问题的解决办法． 比如做一个ajax读取留言列表的时候,每条留言后面有个回复按钮,class为“re ...

  8. jQuery中，子页面与父页面之间的调用方法

    在jQuery中, 子页面查找父页面的元素 parent.$("#元素Id") 父页面调用子页面的元素 $("#子页面iframe的Id").contents( ...

  9. jQuery选择器(表单元素过滤选择器)第八节

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

随机推荐

  1. Requests方法 -- Blog流程类进行关联

    1.接口封装关联 1.有些接口经常会用到比如登录的接口,这时候我们可以每个接口都封装成一个方法,如:登录.保存草稿.发帖.删帖,这四个接口就可以写成四个方法2.接口封装好了后,后面我们写用例那就直接调 ...

  2. Jmeter任在运行，线程数上不去

    问题 jmeter在运行,但是线程数上不去(本来模型设计了100个总线程,但运行时线程只能上到5,根据图上观察总共也只能运行5个线程) 之前更新了random csv插件 解决办法 查看jmeter. ...

  3. 解决 centerOS7部署ajango2.2.x版本 报SQLite 3.8.3 or later is required (found 3.7.17).错误

    在CentOS7上部署Django的时候,遇到了一些问题,写篇笔记记录解决过程. 报错信息 当python3 manage.py runserver启动django项目的时候,就会出现报错信息如下: ...

  4. windows安装Laravel框架经验心得（一）

    作为一个程序员,要活到老学到老.虽然自己水平很菜,但是也要继续往前走,所以打算利用一些空闲时间在学习一些新知识,比如Laravel框架. 看书费劲,好不容易找到了一些关于Laravel的教学视频.不过 ...

  5. 第3天 IDEA 2021简单设置与优化 Java运算符 包机制

    IDEA 2021简单设置与优化 将工具条显示在上方 View–>Appearance–>Toolbar 鼠标悬停显示 File–>setting–>Editor–>Ge ...

  6. 浅析java中的IO流

    在java中IO类很庞大,初学的时候觉得傻傻分不清楚.其实java流归根结底的原理是普通字节流,字节缓冲流,转换流.最基础的是普通字节流,即从硬盘读取字节写入到内存中,但在实际使用中又发现一些特殊的需 ...

  7. CreateWindow() -- 创建普通的窗口

    (1)函数原型 1 HWND CreateWindow( 2 LPCTSTR lpClassName, //pointer to register class name 3 LPCTSTR lpWin ...

  8. HSDB工具类使用探索jvm

    本文是引用https://club.perfma.com/article/2261053 有人问了个小问题,说: public class Test { static Test2 t1 = new T ...

  9. netty系列之:Event、Handler和Pipeline

    目录 简介 ChannelPipeline ChannelHandler ChannelHandlerContext ChannelHandler中的状态变量 异步Handler 总结 简介 上一节我 ...

  10. 计算机网络模型和5G知识

    目录 一.网络布线及信号传输 1.信号 2.传输介质 2.1双绞线 2.2光纤 2.3常见性问题 三.无线传播介质 四.综合布线系统 五.计算机的数制度以及运算 一.网络布线及信号传输 1.信号 频率 ...