jquery 子元素过滤器 Child Filters
| 名称 | 说明 | 举例 |
| :nth-child(index/even/odd/equation) |
匹配其父元素下的第N个子或奇偶元素 ':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！ 可以使用: |
在每个 ul 查找第 2 个li: $("ul li:nth-child(2)") |
| :first-child |
匹配第一个子元素 ':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素 |
在每个 ul 中查找第一个 li: $("ul li:first-child") |
| :last-child |
匹配最后一个子元素 ':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素 |
在每个 ul 中查找最后一个 li: $("ul li:last-child") |
| :only-child |
如果某个元素是父元素中唯一的子元素，那将会被匹配 如果父元素中含有其他元素，那将不会被匹配。 |
在 ul 中查找是唯一子元素的 li: $("ul li:only-child") |
注：
1、:nth-child(index)从1开始的，而eq(index)是从0开始的，就是说 $("ul li:nth-child(0)").css("color","red")是获取不到相匹配的元素，只能从1开始，即 $("ul li:nth-child(1)").css("color","red")，而eq(0)可以获得，同样都是获得第一个子元素
:nth-child(even)是获得偶数子元素，即第二个，第四个，第六个...,而:even则是从索引0开始，匹配第二个索引，第四个索引...,也就是第一个，第三个，第五个...,看上去貌似都是获得奇数项，同样:nth-child(odd)和:odd同样也是如此
2、 :first-child匹配每个父类的子元素，而:first则是匹配一个子元素， :last-child和last也是这样
3、only-child:匹配某个元素是父元素中唯一的子元素，就是说当前子元素是类中唯一的元素，则匹配！
View Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<script src="../js/jquery-1.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($){
// $("ul li:first-child").css("color","red");
$("ul li:first").css("color","red");
// $("ul li:last-child").css("color","red");
// $("ul li:nth-child(even)").css("color","red");
// $("ul li:odd").css("color","red");
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul>
<li>第一个元素</li>
<li>第二个元素</li>
<li>第三个元素</li>
<li>第四个元素</li>
<li>第五个元素</li>
<li>第六个元素</li>
</ul>
<ul>
<li>第一个元素</li>
<li>第二个元素</li>
<li>第三个元素</li>
<li>第四个元素</li>
<li>第五个元素</li>
<li>第六个元素</li>
</ul>
</div>
</form>
</body>
</html>
转载于:https://www.cnblogs.com/abenmao/archive/2012/02/28/2371888.html
jquery 子元素过滤器 Child Filters相关推荐
- jquery子元素过滤选择器:nth-child、:first-child、:last-child、:only-child
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery子元素过滤选择器 jquery子元素过滤选择器,包括:nth-child.:first-child.:last-ch ...
- jQuery子元素选择器
7.jQuery子元素选择器 7.1:first-child 匹配所给选择器( :之前的选择器)的第一个子元素类似的:first匹配第一个元素,但是:first-child选择器可以匹配多个:即为每个 ...
- jquery子元素过滤选择器
jquery子元素过滤选择器 子元素过滤选择器需要我们时刻理元素的父元素和子元素,只要这样我们才能运用的得心应手. 1.:nth-child选择器 匹配每一个父元素下面的的第index个子元素或者奇偶 ...
- jQuery——子元素筛选器
子元素筛选器 名称 :first-child JQ语法 jQuery( "selector:first-child" ) 说明 :first-child选择器用于匹配作为父元素的第 ...
- jQuery 子元素选择器 find() 和 children()
在前面的文章中多次提到了 子元素 和 直接子元素,本篇文章来说明这两者的区别. <div id="list"><div name="a"> ...
- 011_CSS子元素选择器
1. 与后代选择器相比, 子元素选择器(Child selectors)只能选择作为某元素的子元素. 2. 选择子元素 2.1. 如果您不希望选择任意的后代元素, 而是希望缩小范围, 只选择某个元素的 ...
- 过滤选择器——子元素过滤选择器
在页面开发过程中,常常遇到突出指定某行的需求.虽然使用基本过滤选择器:eq(index)可以实现单个表格的显示,但不能满足大量数据和多个表格的选择需求.为了实现这样的功能,jQuery中可以通过子元素 ...
- js后代选择器_后代选择器和子元素选择器的区别
原文 简书原文:https://www.jianshu.com/p/4a776598c69c 大纲 1.后代选择器和子元素选择器的相关概念 2.后代选择器和子元素选择器的区别 1.后代选择器和子元素选 ...
- html后代选择器和子代选择器,CSS后代选择器与子元素选择器的区别
今天在看css基础的时候,发现了一个很有趣的事情,那就是 后代选择器 与 子元素选择器. 说来也惭愧,我以前一直以为,这俩是同一个东西,只是叫法不同而已,后来才发现,原来这俩是两个不同的东西. 后代选 ...
最新文章
- 2017级面向对象程序设计 作业三
- 火爆 GitHub！这个 AI 神器究竟有什么魅力？
- vc6.0绿色完整版 适用于xp win7 win8 win10
- python学习之路day05——cmd操作命令
- AnnotationScopeMetadataResolver 解析作用域元数据
- chrome 悬停大图插件_Google Chrome浏览器的悬停卡：我不想要的我最喜欢的新东西
- 比尔·盖茨----十一项人生建议
- Mac系统搭建C语言开发环境
- 写给程序员的UI设计书 (转) (三)
- ORA-01950: 对表空间 'USERS' 无权限
- 搭建web服务器asp网站传马
- 2022中元节前后几天不出门？前三天后三天不能出门是真的吗？
- 怎样做一个更有价值的人
- 统计在线人数及登录IP
- 在UE4里实现四叉树查找最近点
- js如何保留对象中指定字段（太刁了）
- 同济大学计算机硕士生能拿到户口,上海这4所大学的应届生，毕业可直接“落户”，考生有福了...
- 元宇宙老炮儿口述：19年的行业教训
- 自学前端简历怎么写？项目怎么学？
- js 给元素添加自定义属性
热门文章
- 1.arm的linux系统搭建
- spring boot 下载
- Confluence 6 注册外部小工具
- js 获取字符串中的中文
- 2017 Multi-University Training Contest - Team 3 Kanade's sum hd6058
- 04、数据绑定控件 ListBox 的一个 Bug
- Enabling HierarchyViewer on Rooted Android Devices
- Android TV 悬浮球模拟物理按键
- 【建议收藏】复盘：2021年最新、最全、最实用的Android岗学习资料/面试真题
- Skia的SkCamera.cpp的doUpdate() 算法。