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 相关文章推荐
JavaScript 提升运行速度之循环篇 译文
Aug 15 Javascript
疯狂Jquery第一天(Jquery学习笔记)
May 11 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 Javascript
angular.js+node.js实现下载图片处理详解
Mar 31 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 Javascript
Node.js应用设置安全的沙箱环境
Apr 23 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 Javascript
vue单文件组件无法获取$refs的问题
Jun 24 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
php+redis消息队列实现抢购功能
2018/02/08 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
Firefox div高度自适应
2009/04/28 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
详谈angularjs中路由页面强制更新的问题
2017/04/24 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
图解javascript作用域链
2019/05/27 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
Python线程详解
2015/06/24 Python
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
numpy排序与集合运算用法示例
2017/12/15 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
Pycharm小白级简单使用教程
2020/01/08 Python
python with (as)语句实例详解
2020/02/04 Python
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
技术经理的自我评价范文
2013/12/03 职场文书
学雷锋倡议书
2015/01/19 职场文书
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js