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>

转载于:https://www.cnblogs.com/mzywucai/p/11053380.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><head ...
jquery子元素过滤选择器:nth-child、:first-child、:last-child、:only-child
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery子元素过滤选择器 jquery子元素过滤选择器,包括:nth-child.:first-child.:last-ch ...
jquery子元素过滤选择器
jquery子元素过滤选择器子元素过滤选择器需要我们时刻理元素的父元素和子元素,只要这样我们才能运用的得心应手. 1.:nth-child选择器匹配每一个父元素下面的的第index个子元素或者奇偶 ...
过滤选择器——子元素过滤选择器
在页面开发过程中,常常遇到突出指定某行的需求.虽然使用基本过滤选择器:eq(index)可以实现单个表格的显示,但不能满足大量数据和多个表格的选择需求.为了实现这样的功能,jQuery中可以通过子元素 ...
6.:first-child子元素过滤选择器
通过上面章节的学习,我们知道使用:first过滤选择器可以获取指定父元素中的首个子元素,但该选择器返回的只有一个元素,并不是一个集合,而使用:first-child子元素过滤选择器则可以获取每个父元素 ...
jquery中$运算符的后代选择器
$("s1,s2")并集选择器 $("s1 s2")后代选择器 $("s1>s2")子代选择器 $("s1s2") ...
jQuery中添加与删除元素
我们可以使用jQuery方便的添加或删除元素. 1.使用jQuery生成新元素,生成新元素的方法,比如,我要生成一个有序列表的标签,只需要: var ol = $('<ol></ol ...
jquery中在子窗口中获取父窗口的Input文本值
1.父页面 <input type="hidden" name="billNo" id="billNo" value="${ ...
jQuery中添加和删除元素
$('#btn1').click(function () { 1. append() 方法在被选元素的结尾插入内容(仍然在该元素的内部) // $('#box').append('<a href ...
JQuery 中简单的几个类选择器使用方法
前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestClas ...

jQuery中的子（后代）元素过滤选择器（四、六）：nth-child()、first-child、last-child、only-child...

jQuery中的子（后代）元素过滤选择器（四、六）：nth-child()、first-child、last-child、only-child...相关推荐

最新文章

热门文章