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

先写出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 元素


二、:empty
选取不含任何子元素或文本的空元素
用chrome浏览器审查元素可发现div为empty 的class样式已改变


代码如下:

$("div:empty").addClass("highlight");


三、:has(selector)
选取含有选择器所匹配的元素的元素


代码如下:

$("div:has(p)").addClass("highlight"); //查找所有包含p的div元素

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


代码如下:

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

赞 (0)

相关推荐

  • jquery层级选择器(匹配父元素下的子元素实现代码)

    实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>层级 </title&g

  • jQuery选择器总结之常用元素查找方法

    选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似.选择器具有如下特点: 1．简化代码的编写 2．隐式迭代 3．无须判断对象是否存在 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素,返回div元素数组 $

  • jQuery内容过滤选择器用法分析

    本文实例讲述了jQuery内容过滤选择器用法.分享给大家供大家参考.具体分析如下: 在HTML文档中,元素的内容可以是文本或者子元素,如果将某个选择器或者内容过滤选择器一起使用,就可以从查询到的元素中进一步筛选出具有给定 文本或者子元素的元素 1. :contains()选择器 用于选择包含给定文本的所有元素,格式: 复制代码 代码如下: $("selector1:contains(text)") 如: 复制代码 代码如下: $("p:contains('text')&quo

  • jQuery的内容过滤选择器学习教程

    jQuery的内容过滤选择器学习教程

    内容过滤器的过滤规则主要是包含的子元素或文本内容上. $('div:contains("xxx")').css('background', '#ccc'); //选择元素文本节点含有xxx 文本的元素 $('div:empty').css('background', '#ccc'); //选择空元素 $('ul:has(.red)').css('background', '#ccc'); //选择子元素含有class 是red 的元素 $(':parent').css('backgro

  • jQuery内容过滤选择器用法示例

    jQuery内容过滤选择器用法示例

    本文实例讲述了jQuery内容过滤选择器用法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="tex

  • 使用jQuery内容过滤选择器选择元素实例讲解

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- 内容过滤选择器:根据元素中的文字内容或所包含的子元素特征获取元素,其文字内容可以模糊或绝对匹配进行元素定位 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器.层次选择器.过滤选择器.表单选择器四大类.其中,在过滤选择器中有可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.

  • jquery层级选择器的实现(匹配后代元素div)

    如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>层级 </title&g

  • jquery基本选择器匹配多个元素的实现方法

    jquery基本选择器匹配多个元素的实现方法

    如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document &

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

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

    先写出DOM元素的HTML结构: 复制代码 代码如下: <style type="text/css">    /*高亮显示*/    .highlight{               background-color: gray    }</style> 复制代码 代码如下: <div>John Resign</div><div>George Martin</div><div>Malcom John

  • jQuery选择器之属性过滤选择器详解

    本文实例为大家分享了jQuery属性过滤选择器的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <link rel="stylesheet" type="t

  • jquery选择器之层级过滤选择器详解

    jquery选择器之层级过滤选择器详解

    复制代码 代码如下: $("ancestor descendant"):选取parent元素后所有的child元素$("parent > child"):选取parent元素后所有的直属child元素,何谓"直属",也就是第一级的意思了$("prev + next"):prev和next是两个同级别的元素. 选中在prev元素后面的next元素$("prev ~ siblings"):选择prev后面

  • jquery选择器之基本过滤选择器详解

    jquery选择器之基本过滤选择器详解

    复制代码 代码如下: <style type="text/css">  /*高亮显示*/  .highlight{      background-color: gray  } </style> 复制代码 代码如下: <body>   <h3>各省市行政区划</h3>   <table border="1" width="50%">    <thead>     

  • jQuery选择器之子元素选择器详解

    jQuery选择器之子元素选择器详解

    本文实例为大家分享了jQuery子元素选择器,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="

  • jQuery选择器之基本过滤选择器用法实例分析

    本文实例讲述了jQuery选择器之基本过滤选择器用法.分享给大家供大家参考,具体如下: 前面一篇介绍了层次选择器,今天我们学习一下jQuery的另一种选择器:基本过滤选择器.过滤选择器可以过滤掉自己不想要的东西,也就是说过滤后留下的都是自己需要的.jQuery过滤选择器就是通过特定的过滤规则来筛选出所需的DOM元素,jQuery过滤选择器的过滤规则与CSS伪类选择器语法是相同的都以冒号(:)开头.按照过滤规则的不同,我们通常把jQuery过滤选择器分为:基本过滤.属性过滤.内容过滤.子元素过滤.

  • jQuery选择器之属性筛选选择器用法详解

    jQuery选择器之属性筛选选择器用法详解

    在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 [attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="checkbox"]等 [attr*="value"]能在网站中帮助我们匹配不同类型的文件 <!DOCTYPE html> <

  • jQuery过滤选择器详解

    jQuery过滤选择器详解

    过滤选择器 过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM元素,该选择器都以":"开头 按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器. 基本过滤选择器 基本过滤选择器示例 改变第一个 div元素的背景色为 # bbffaa 改变最后一个 div元素的背景色为 # bbffaa 改变class不为 one的所有 div元素的背景色为 # bbffaa 改变索引值为偶数的 div元素的背景色为 # bbffaa

  • Html 编辑器粘贴内容过滤技术详解

    作者:Tony Qu 最近在解决数据粘贴方面取得了不少进展,作为Html在线编辑器所必须具备的技术,在这里详细给大家介绍并提供实现参考.在研究过程中,我也确实走了不少弯路,尝试了n种方式,由于美国的PM始终觉得有些影响用户体验的东西无法接受,导致好几个提案被否定,不过收获还是很丰富的. 我现在写code喜欢需求驱动,让我们来看看这项技术的主要需求 * 能够过滤用户贴进来的纯文本数据 * 能够过滤用户贴进来的html数据(未经Html编码) * 能够过滤用户贴进来的Word数据,并能把大部分Wor

  • iOS11 WKWebView内容过滤规则详解

    WKWebView中新增了一个功能,可以对WebView的内容添加一些自定义的过滤规则.这个功能原来在 Safari Extension 中被引入,从 11 开始同样适用于WKWebView. 使用方法 原理上就是提供一个 JSON 给 WebKit,这个 JSON 包括内容的触发规则(trigger)和对应的处理方式(action).比如: [{ "trigger": { "url-filter": ".*" }, "action&q

随机推荐