jQuery的内容过滤选择器学习教程


Posted in Javascript onApril 18, 2016

内容过滤器的过滤规则主要是包含的子元素或文本内容上。
jQuery的内容过滤选择器学习教程

$('div:contains("xxx")').css('background', '#ccc'); //选择元素文本节点含有xxx 文本的元素 
 
$('div:empty').css('background', '#ccc'); //选择空元素 
 
$('ul:has(.red)').css('background', '#ccc'); //选择子元素含有class 是red 的元素 
 
$(':parent').css('background', '#ccc'); //选择非空元素

jQuery 提供了一个has()方法来提高:has 过滤器的性能:

$('ul').has('.red').css('background', '#ccc'); //选择子元素含有class 是red 的元素

jQuery 提供了一个名称和:parent 相似的方法,但这个方法并不是选取含有子元素或文本的元素,而是获取当前元素的父元素,返回的是元素集合。

$('li').parent().css('background', '#ccc'); //选择当前元素的父元素 
 
$('li').parents().css('background', '#ccc'); //选择当前元素的父元素及祖先元素 
 
$('li').parentsUntil('div').css('background', '#ccc'); //选择当前元素遇到div 父元素停止

jQuery内容过滤选择器的过滤规则主要运用在DOM元素所包含的子元素或其文本内容上,主要包括以下四种过滤方法:

为了更好的学习,先写几个DOM元素的HTML结构:

<div>John Resign</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J.Ohn</div>
<div></div>
<p></p>
<div><p>Has p</p></div>

一、内容过滤选择器——:contains(text)
选择器:

E:contains(text)  //E是指DOM元素,:contains(text)包含的文本,text是指定查找的字符串
描述:

选取含有文本内容为“text”的元素

返回值:

集合元素

实例:

<script type="text/javascript">
 $(document).ready(function(){
  $('div:contains(John)').css('background','#f36');
 });
</script>

功能:

改变含有文本为“John”的div元素的背景色

效果:

jQuery的内容过滤选择器学习教程

回到前面的HTML结构中我们可以看出其中有两个div元素中包含了"John"文本,因为我们这里主要是改变了包含文本“John”的div的背景色,因此大家在效果中可以看出我们其中第一个和第三个div的背景色变成了"#f36",为了更能体会从中的变化,大家可以通过Firefox中的Firebug工具看出HTML的变化:

jQuery的内容过滤选择器学习教程

二、内容过滤选择器——:empty

选择器:

E:empty //其中E为DOM元素,:empty是指DOM元素中不包含任何子元素或文本 
描述:

选取不含任何子元素或文本的空元素

返回值:

集合元素

实例:

<script type="text/javascript">
 $(document).ready(function(){
  $('div:empty').css('background','#f36');
 });
</script>

功能:

改变不含子元素(包括不含文本元素)的div的背景色,换句话说,就是改变不包含任何东西的div的背景色

效果:

jQuery的内容过滤选择器学习教程

虽然我们前面的html中所有元素中不包含子元素,但有一些包含了文本元素,只有一个div和一个p元素具没有子元素也没有文本内容。加上我们这个例子中,我们只对不包含子元素和文本内容的div进行了改变背景色的设置,所以我们的效果中只有div加上了“#f36”的背景色,同样我们来看看HTML的变化吧:

jQuery的内容过滤选择器学习教程

三、内容过滤选择器——:has(selector)

选择器:

E:has(selector)  //其中E为有效果DOM元素标签,:has(selector)含有一个选择器,selector用于筛选的选择器

描述:

选取含有选择器所匹配的元素的元素

返回值:

集合元素

实例:

<script type="text/javascript">
 $(document).ready(function(){
  $('div:has(p)').css('background','#f36');
 });
</script>

功能:
改变含有子元素P的div元素的背景色
效果:

jQuery的内容过滤选择器学习教程

在我们这个实例中,只有一个div中包含了子元素P,所以包含了符合这个要求的div元素其背景色被设置为“#f36”,改变后的HTML:

jQuery的内容过滤选择器学习教程

四、内容过滤选择器——:parent

选择器:

E:parent  //E为有效的DOM元素标签,:parent含有子元素或文本内容。

描述:

选取含有子元素或者文本的元素标签

返回值:

集合元素

实例:

<script type="text/javascript">
 $(document).ready(function(){
  $('div:parent').css('background','#f36');
 });
</script> 

功能:
改变含有子元素或文本内容的div的背景色。换句话说只在div包含了任何一个子元素或者任何内容,其背景色都将会改变。
效果:

jQuery的内容过滤选择器学习教程

本例子,只有一个div和一个p元素中不包含任何子元素和文本内容,因为我们这里是对div进行设置,所以效果中显示,除了这两个不含有子元素和任何内容的div的背景色都变成了“#f36”,变化后的HTML:

jQuery的内容过滤选择器学习教程

有关于jQuery选择器中的内容过滤选择器,就简单的说到这里,大家如果想更深的体会其具体的用法,可以在本地多做几个实例练习。如果大家对jQuery选择器的其他选择器用法感兴趣的话,可以在本站中了解其他的选择器的具体功能和用法,同时也可以随时观注本站的内容更新。

Javascript 相关文章推荐
网上应用的一个不错common.js脚本
Aug 08 Javascript
javascript脚本编程解决考试分数统计问题
Oct 18 Javascript
网页中表单按回车就自动提交的问题的解决方案
Nov 03 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
Vue.JS入门教程之事件监听
Dec 01 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
Oct 17 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
Vue动态控制input的disabled属性的方法
Jun 26 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
Element Backtop回到顶部的具体使用
Jul 27 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 #Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 #Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 #Javascript
AngularJS入门教程之AngularJS模型
Apr 18 #Javascript
AngularJS入门教程之AngularJS指令
Apr 18 #Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 #Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 #Javascript
You might like
php compact 通过变量创建数组
2016/11/15 PHP
CI框架常用函数封装实例
2016/11/21 PHP
js变量以及其作用域详解
2020/07/18 Javascript
JS实现往下不断流动网页背景的方法
2015/02/27 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
koa-router源码学习小结
2018/09/07 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
利用Python实现网络测试的脚本分享
2017/05/26 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
python与pycharm有何区别
2020/07/01 Python
Python __slots__的使用方法
2020/11/15 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
建筑工程毕业生自我鉴定
2014/01/14 职场文书
高中生家长会演讲稿
2014/01/14 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
骨干教师考核方案
2014/05/09 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
转让协议书
2015/01/27 职场文书
实习单位推荐信
2015/03/27 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
感恩老师主题班会
2015/08/12 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python