jq查找字段忽略html标签,jquery内容过滤选择器有哪些?
jQuery内容过滤选择器的过滤规则主要运用在DOM元素所包含的子元素或其文本内容上,主要包括四种过滤方法: :contains(text)、:empty 、:has(seletor) 、:parent。
先写几个DOM元素的HTML结构:
Has p
:contains(text)E:contains(text) //E是指DOM元素,:contains(text)包含的文本,text是指定查找的字符串
描述:
选取含有文本内容为“text”的元素
返回值:集合元素
实例:
$(document).ready(function(){
$('div:contains(John)').css('background','#f36');
});
功能:
改变含有文本为“John”的div元素的背景色
效果:
回到前面的HTML结构中我们可以看出其中有两个div元素中包含了"John"文本,因为我们这里主要是改变了包含文本“John”的div的背景色,因此大家在效果中可以看出我们其中第一个和第三个div的背景色变成了"#f36",为了更能体会从中的变化,大家可以通过Firefox中的Firebug工具看出HTML的变化:
:emptyE:empty //其中E为DOM元素,:empty是指DOM元素中不包含任何子元素或文本
描述:
选取不含任何子元素或文本的空元素
返回值:集合元素
实例:
$(document).ready(function(){
$('div:empty').css('background','#f36');
});
功能:
改变不含子元素(包括不含文本元素)的div的背景色,换句话说,就是改变不包含任何东西的div的背景色
效果:
虽然我们前面的html中所有元素中不包含子元素,但有一些包含了文本元素,只有一个div和一个p元素具没有子元素也没有文本内容。加上我们这个例子中,我们只对不包含子元素和文本内容的div进行了改变背景色的设置,所以我们的效果中只有div加上了“#f36”的背景色,同样我们来看看HTML的变化吧:
:has(selector)E:has(selector) //其中E为有效果DOM元素标签,:has(selector)含有一个选择器,selector用于筛选的选择器
描述:
选取含有选择器所匹配的元素的元素
返回值:集合元素
实例:
$(document).ready(function(){
$('div:has(p)').css('background','#f36');
});
功能:
改变含有子元素P的div元素的背景色
效果:
在我们这个实例中,只有一个div中包含了子元素P,所以包含了符合这个要求的div元素其背景色被设置为“#f36”,改变后的HTML:
:parentE:parent //E为有效的DOM元素标签,:parent含有子元素或文本内容
描述:
选取含有子元素或者文本的元素标签
返回值:集合元素
实例:
$(document).ready(function(){
$('div:parent').css('background','#f36');
});
功能:
改变含有子元素或文本内容的div的背景色。换句话说只在div包含了任何一个子元素或者任何内容,其背景色都将会改变。
效果:
本例子,只有一个div和一个p元素中不包含任何子元素和文本内容,因为我们这里是对div进行设置,所以效果中显示,除了这两个不含有子元素和任何内容的div的背景色都变成了“#f36”,变化后的HTML:
更多jQuery相关技术文章,请访问 jQuery答疑 栏目进行学习!!
jq查找字段忽略html标签,jquery内容过滤选择器有哪些?相关推荐
- jq查找字段忽略html标签,jQuery过滤HTML标签并高亮显示关键字的方法
本文实例讲述了jQuery过滤HTML标签并高亮显示关键字的方法.分享给大家供大家参考.具体如下: jQuery实现网页关键字过滤效果,将需要过滤的文字定义在JavaScript中,可定义多个,不过要 ...
- jQuery基本过滤选择器
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8" ...
- jquery可见性过滤选择器
jquery可见性过滤选择器 可见性过滤选择器是根据元素的可见性状态来选择相应的元素. 在锋利的jquery一书中的介绍如下:
- jquery属性过滤选择器[attr=value]、[attr!=value]、[attr^=value]、[attr$=value]、[attr*=value]、[attr|=value]
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery属性过滤选择器 jquery属性过滤选择器,包括[attr].[attr=value].[attr!=value]. ...
- jquery可见性过滤选择器:hidden、:visible
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery可见性过滤选择器 jquery可见性过滤选择器,包括:hidden.:visible,具体功能如代码中注释. 代码如 ...
- jquery基本过滤选择器:first :last :not(.myclass) :even :odd :eq(1) :gt(5) :lt(1) :header :animated :focus
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery基本过滤选择器 jquery基本过滤选择器,包括:first.:last.:not(.myclass).:even, ...
- JQ和Js获取span标签的内容
转自:https://www.cnblogs.com/anniey/p/6439021.html html: 1 <span id="content">'我是span标 ...
- jQuery之过滤选择器
过滤选择器 1.基本选择器 2.内容选择器 3.可见性选择器 4.子元素过滤器 过滤选择器简称:过滤器.它其实也是一种选择器,而这种选择器类似于CSS3(http://t.mb5u.com/css3/ ...
- jQuery前端开发学习指南(11)——jQuery属性过滤选择器
版权声明 本文原创作者:谷哥的小弟 作者博客地址:http://blog.csdn.net/lfdfhl 属性过滤选择器概述 属性过滤选择器用于根据元素的属性来匹配元素. [attribute] 匹配 ...
最新文章
- 多篇开源CVPR 2020 语义分割论文
- 安卓项目打开有时候manifests不见了_【必看】暴力0鲁项目详细操作及玩法如何跳过广告,不分享群等...
- hashmap 遍历_这21个刁钻的HashMap面试题,我把阿里面试官吊打了
- 《算法导论》学习总结 — 21.第16章 贪心算法(1) 基础入门1
- 鸿蒙系统替代iOS,华为横空出世!鸿蒙系统,能否替代安卓IOS?
- python安装cv2模块_python - OpenCV已成功安装但未导入错误:没有名为“ cv2”的模块 - 堆栈内存溢出...
- 动态规划——有趣的数(ccf)
- 计算机普通用户没有软件怎么回事,请教各位高手:单机多用户账户计算机,当管理员用户安装了程序,其它普通用户账户不能使用怎么处理?比如在管理...
- 雅虎的用户注册页面抽风了
- 读书笔记∣疯狂XML讲义
- Django:MySQL查询结果为datetime.date无法转换为JSON
- 自动柜员机属于微型计算机的一种,自动柜员机属于微型计算机的一种。( )...
- 一文带你了解常见的数据指标都有哪些【数据分析】
- 魔兽争霸lostTemple地图
- Latex 多图片排版--排版代码生成器
- 信号处理趣学D0——系列专栏的说明与目录
- RBF架构下如何解析路径
- STM32—规则通道和注入通道的知识总结
- c++的armadillo库语法指南
- springboot整合ueditor上传图片配置(JSP)从新建项目开始
热门文章
- php配置设置,PHP设置配置文件的方法
- php n维数组扁平化,js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解...
- java实现将A表数据转移到B表_解决用B表跟新A表数据,如果A表中没有,则把B表的数据插入A表(merge into)...
- 前端传值后端接收不到_web前端和后端哪个好
- mysql 全局变量_详细讲解mysql全局变量与局部变量
- 皮一皮:有一种着急叫做妈妈想你快点脱单...
- 皮一皮:中文汉字真是博大精深...
- 收藏|MySQL常用语法小结
- 缓存模式以及缓存的数据一致性
- GitHub 热榜:文字识别神器,超轻量级中文 OCR!