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 相关文章推荐
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 Javascript
prototype框架中美元符号$用法分析
Jan 22 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
jQuery表单验证之密码确认
May 22 jQuery
angularJs中datatable实现代码
Jun 03 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
Javascript地址引用代码实例解析
Feb 25 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
Jul 30 Javascript
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
后宫无数却洁身自好的男主,唐三只爱小舞
2020/03/02 国漫
PHP新手上路(五)
2006/10/09 PHP
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
基于jquery的滑动样例代码
2010/11/20 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
Bootstrap下拉菜单样式
2017/02/07 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
python ansible服务及剧本编写
2017/12/29 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
公司客户答谢酒会祝酒词
2015/08/11 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技