简单讲解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 相关文章推荐
js下利用控制器载入对应脚本
Jul 17 Javascript
jQuery插件开发基础简单介绍
Jan 07 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
javascript日期格式化示例分享
Mar 05 Javascript
JS案例分享之金额小写转大写
May 15 Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
利用JS轻松实现获取表单数据
Dec 06 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
从0到1搭建element后台框架优化篇(打包优化)
May 12 Javascript
浅谈vue权限管理实现及流程
Apr 23 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
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
Javascript MD4
2006/12/20 Javascript
学习YUI.Ext 第三天
2007/03/10 Javascript
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
加载jQuery后$冲突的解决办法
2010/07/09 Javascript
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
将json当数据库一样操作的javascript lib
2013/10/28 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
jQuery中Form相关知识汇总
2015/01/06 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
Python多线程爬虫简单示例
2016/03/04 Python
Python批量查询域名是否被注册过
2017/06/21 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
用友笔试题目
2016/10/25 面试题
拖鞋店创业计划书
2014/01/15 职场文书
函授本科自我鉴定
2014/02/04 职场文书
企业宣传策划方案
2014/05/29 职场文书
应届生求职信范文
2014/06/30 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
Redis三种集群模式详解
2021/10/05 Redis
Ruby处理CSV数据方法详解
2022/04/18 Ruby