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 相关文章推荐
Extjs Gird 支持中文拼音排序实现代码
Apr 15 Javascript
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
jQuery中fadeOut()方法用法实例
Dec 24 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
基于JavaScript实现焦点图轮播效果
Mar 27 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
简单实现js拖拽效果
Jul 25 Javascript
一文让你彻底搞清楚javascript中的require、import与export
Sep 24 Javascript
vue 实现特定条件下绑定事件
Nov 09 Javascript
js的Object.assign用法示例分析
Mar 05 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 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
咖啡与牛奶
2021/03/03 冲泡冲煮
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
JavaScript版代码高亮
2006/06/26 Javascript
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
javascript 写类方式之七
2009/07/05 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
js取得url地址参数实例
2013/02/22 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
python文件操作相关知识点总结整理
2016/02/22 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
Python语法分析之字符串格式化
2019/06/13 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
用python批量移动文件
2021/01/14 Python
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
GWebs公司笔试题
2012/05/04 面试题
出国留学自荐信
2013/10/25 职场文书
GMP办公室主任岗位职责
2014/03/14 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
2016寒假假期总结
2015/10/10 职场文书
团组织关系介绍信
2019/06/24 职场文书
详解MongoDB的条件查询和排序
2021/06/23 MongoDB