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 相关文章推荐
jquery下实现overlay遮罩层代码
Aug 25 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 Javascript
js跳转页面方法总结
Jan 29 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
基于jquery实现图片放大功能
May 07 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 Javascript
ES7之Async/await的使用详解
Mar 28 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 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数组循环操作详细介绍 附实例代码
2013/02/03 PHP
PHP函数http_build_query使用详解
2014/08/20 PHP
ThinkPHP中处理表单中的注意事项
2014/11/22 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
vue-loader教程介绍
2017/06/14 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
Vue3配置axios跨域实现过程解析
2020/11/25 Vue.js
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
Python中给List添加元素的4种方法分享
2014/11/28 Python
python自定义类并使用的方法
2015/05/07 Python
Python函数返回值实例分析
2015/06/08 Python
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
python创建文件备份的脚本
2018/09/11 Python
python 把列表转化为字符串的方法
2018/10/23 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
高中生校园生活自我评价
2013/09/19 职场文书
信息管理员岗位职责
2013/12/01 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
读书月活动方案
2014/05/22 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
会计电算化实训报告
2014/11/04 职场文书