简单讲解jQuery中的子元素过滤选择器


Posted in Javascript onApril 18, 2016

子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。

简单讲解jQuery中的子元素过滤选择器

$('li:first-child').css('background', '#ccc'); //每个父元素第一个li 元素 
 
$('li:last-child').css('background', '#ccc'); //每个父元素最后一个li 元素 
 
$('li:only-child').css('background', '#ccc'); //每个父元素只有一个li 元素 
 
$('li:nth-child(odd)').css('background', '#ccc'); //每个父元素奇数li 元素 
 
$('li:nth-child(even)').css('background', '#ccc'); //每个父元素偶数li 元素 
 
$('li:nth-child(2)').css('background', '#ccc'); //每个父元素第三个li 元素

我们知道使用

:first

过滤选择器可以获取指定父元素中的首个子元素,但该选择器返回的只有一个元素,并不是一个集合,而使用

:first-child

子元素过滤选择器则可以获取每个父元素中返回的首个子元素,它是一个集合,常用多个集合数据的选择处理。

如下图,如果想把页面中每个ul中的第一个li获取到,并改变其颜色。则可以使用

: first-child
<body>
  <h3>该百年额米格“蔬菜水果”中第一行的文字颜色</h3>
  <ul>
    <li>芹菜</li>
    <li>茄子</li>
    <li>萝卜</li>
    <li>大白菜</li>
    <li>西红柿</li>
  </ul>
  <ul>
    <li>橘子</li>
    <li>香蕉</li>
    <li>葡萄</li>
    <li>苹果</li>
    <li>西瓜</li>
  </ul>
</body>
<script type="text/javascript">
  $("li:first-child").css("color", "red");
</script>

在浏览器中显示的效果:

简单讲解jQuery中的子元素过滤选择器

通过

$("li:first-child")

选择器代码,获取了两个<ul>父元素中的第一个<li>元素,并使用

css()

方法修改了它们在页面中显示的文字颜色。

Javascript 相关文章推荐
Javascript打印网页部分内容的脚本
Nov 17 Javascript
让浏览器非阻塞加载javascript的几种方法小结
Apr 25 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
使用jquery 简单实现下拉菜单
Jan 14 Javascript
js+jquery常用知识点汇总
Mar 03 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
javascript实现异形滚动轮播
Nov 28 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 #Javascript
html5+javascript实现简单上传的注意细节
Apr 18 #Javascript
jQuery的内容过滤选择器学习教程
Apr 18 #Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 #Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 #Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 #Javascript
AngularJS入门教程之AngularJS模型
Apr 18 #Javascript
You might like
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
JavaScript中的property和attribute介绍
2011/12/26 Javascript
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
javascript函数自动执行常用方法汇总
2016/03/28 Javascript
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
javascript实现留言板功能
2020/02/08 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
python通过ssh-powershell监控windows的方法
2015/06/02 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
python生成圆形图片的方法
2020/03/25 Python
python输出决策树图形的例子
2019/08/09 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
本科毕业生的求职信范文
2013/11/20 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
公务员个人考察材料
2014/12/23 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers