jquery选择器之内容过滤选择器详解


Posted in Javascript onJanuary 27, 2014

先写出DOM元素的HTML结构:

<style type="text/css">
    /*高亮显示*/
    .highlight{   
            background-color: gray
    }
</style>

<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)
选取含有文本内容为“text”的元素
$("div:contains('John')").addClass("highlight"); //查找所有包含 "John" 的 div 元素

jquery选择器之内容过滤选择器详解
二、:empty
选取不含任何子元素或文本的空元素
用chrome浏览器审查元素可发现div为empty 的class样式已改变
$("div:empty").addClass("highlight");

jquery选择器之内容过滤选择器详解
三、:has(selector)
选取含有选择器所匹配的元素的元素
$("div:has(p)").addClass("highlight"); //查找所有包含p的div元素

jquery选择器之内容过滤选择器详解

四、:parent
选取含有子元素或者文本的元素标签

$("div:parent").addClass("highlight");  //查找所有含有子元素或者文本的div元素

jquery选择器之内容过滤选择器详解
Javascript 相关文章推荐
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
轻松实现javascript数据双向绑定
Nov 11 Javascript
switch语句的妙用(必看篇)
Oct 03 Javascript
详解利用 Express 托管静态文件的方法
Sep 18 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
jquery选择器之属性过滤选择器详解
Jan 27 #Javascript
jQuery自定义事件的简单实现代码
Jan 27 #Javascript
jQuery中bind与live的用法及区别小结
Jan 27 #Javascript
jQuery实现动画效果的简单实例
Jan 27 #Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 #Javascript
js修改原型的属性使用介绍
Jan 26 #Javascript
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 #Javascript
You might like
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
php+mysql实现无限级分类
2015/11/11 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
javascript 关闭IE6、IE7
2009/06/01 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
解释&amp;&amp;和||在javascript中的另类用法
2014/07/28 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
详解python实现数据归一化处理的方式:(0,1)标准化
2019/07/17 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
学前教育专业毕业生自荐信
2013/10/03 职场文书
硕士研究生求职自荐信范文
2014/03/11 职场文书
学习保证书范文
2014/04/30 职场文书
七一讲话心得体会
2014/09/05 职场文书
喋血孤城观后感
2015/06/08 职场文书
工程主管竞聘书
2015/09/15 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
如何利用pygame实现打飞机小游戏
2021/05/30 Python
Pandas搭配lambda组合使用详解
2022/01/22 Python