jQuery选择器之过滤选择器之子元素过滤选择器
来源:互联网 发布:log4j 存入数据库 编辑:程序博客网 时间:2024/05/08 19:03
过滤选择器之子元素过滤选择器
1、:nth-child(index/even/odd/equation)
用法: $(”ul li:nth-child(2)”) 返回值 集合元素
说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq() 有些类似,不同的地方就是前者(:nth-child)是从1开始,后者(:eq)是从0开始.
说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq() 有些类似,不同的地方就是前者(:nth-child)是从1开始,后者(:eq)是从0开始.
2、:first-child
用法: $(”ul li:first-child”) 返回值 集合元素
说明: 匹配第一个子元素’:first’ 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素
说明: 匹配第一个子元素’:first’ 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素
3、:last-child
用法: $(”ul li:last-child”) 返回值 集合元素
说明: 匹配最后一个子元素.’:last’只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.
说明: 匹配最后一个子元素.’:last’只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.
4、: only-child
用法: $(”ul li:only-child”) 返回值 集合元素
说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配.如果父元素中含有其他元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配!
说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配.如果父元素中含有其他元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配!
nth-child() 选择器详解如下:
(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素
(2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素
(3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素
(3):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素
(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素
(2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素
(3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素
(3):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素
练习:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>ddd</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script language="JavaScript" src="../js/jquery-1.4.2.js"></script><style type="text/css"> div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid;float:left; font-size: 17px; font-family:Roman;}div.mini{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman;}div.visible{display:none;} </style> <!--引入jquery的js库--> </head> <body> <input type="button" value=" 每个class为one的div父元素下的第2个子元素" id="b1"/> <input type="button" value=" 每个class为one的div父元素下的第一个子元素" id="b2"/> <input type="button" value=" 每个class为one的div父元素下的最后一个子元素" id="b3"/> <input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素" id="b4"/> <!--文本隐藏域--> <input type="hidden" value="hidden_1"> <input type="hidden" value="hidden_2"> <input type="hidden" value="hidden_3"> <input type="hidden" value="hidden_4"> <h1>天气冷了</h1> <h2>天气又冷了</h2> <div id="one"> id为one div </div> <div id="one" class="mini" title="test"> id为two class是 mini div title="test" <div class="mini" >class是 mini</div></div> <div class="one" title="test"> <div class="mini" >class是 mini******</div></div> <div class="visible" > class是 one <div class="mini" >class是 mini</div> <div class="mini" >class是 mini</div> </div> <div class="one" title="test02"> class是 one title="test02" (************** <div class="mini01" >class是 mini01</div> <div class="mini" >cdddddddlass是 mini</div></div><div class="visible" > 这是隐藏的</div><div class="one"></div><br><div id="mover" > 动画</div><br></body><script language="JavaScript">//<input type="button" value=" 每个class为one的div父元素下的第2个子元素" id="b1"/>//<input type="button" value=" 每个class为one的div父元素下的第一个子元素" id="b2"/> //<input type="button" value=" 每个class为one的div父元素下的最后一个子元素" id="b3"/> //<input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素" id="b4"/> </script> </html>
<script language="JavaScript">//<input type="button" value=" 每个class为one的div父元素下的第2个子元素" id="b1"/>$("#b1").click(function(){$("div[class=one] :nth-child(2)").css("background","red");});//<input type="button" value=" 每个class为one的div父元素下的第一个子元素" id="b2"/> $("#b2").click(function(){$("div[class=one] :first-child").css("background","red");});//<input type="button" value=" 每个class为one的div父元素下的最后一个子元素" id="b3"/> $("#b3").click(function(){$("div[class=one] :last-child").css("background","red");});//<input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素" id="b4"/> $("#b4").click(function(){$("div[class=one] :only-child").css("background","red");});</script>
- jQuery选择器之过滤选择器之子元素过滤选择器
- jQuery之子属性过滤选择器
- jQuery选择器之过滤选择器
- Jquery过滤选择器之基本过滤选择器
- Jquery选择器--过滤选择器
- jQuery选择器 过滤选择器(五.子元素过滤选择器)
- jQuery之过滤选择器
- Jquery之过滤选择器
- 一步一步学习 JQuery (四) 过滤选择器:属性过滤选择器 && 子元素过滤选择器 && 表单过滤选择器
- JQuery选择器(9子元素过滤选择器)
- jQuery选择器之过滤选择器之基础过滤选择器
- jQuery选择器之过滤选择器之内容过滤选择器
- jQuery选择器之过滤选择器之可见度过滤选择器
- jQuery选择器之过滤选择器之属性过滤选择器
- jquery子元素过滤选择器
- jquery子元素过滤选择器
- jquery子元素过滤选择器
- jQuery子元素过滤选择器
- 屌丝逆袭技术精英 不懂技术也可在线app开发
- 11.2.0.3 rac path16670704遇到的问题
- Bootstrap
- Android使用WebView来显示天气预报
- 新版本上线:Interactive Tutorials For Photoshop
- jQuery选择器之过滤选择器之子元素过滤选择器
- java字符串的各种编码转换
- 命令行Dos下编译、运行java文件是出现has value '1.4', but '1.6' is required.错误
- 【91xcz】笔者分享:Win7系统操作注意事项
- 如何推广手机网站和app
- Linux CentOS 上部署程序(一) 安装JDK
- bootloader
- Windows Phone 8移动应用开发工具盘点——基础篇
- elasticsearch+cache