jQuery中内容过滤器简单用法示例


Posted in jQuery onMarch 31, 2018

本文实例讲述了jQuery中内容过滤器简单用法。分享给大家供大家参考,具体如下:

一 介绍

内容过滤器就是通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选。内容过滤器共包括:contains(text):empty:has(selector):parent4种,如下表所示。

过滤器 说明 示例
contains(text) 匹配包含给定文本的元素 $("li:contains('DOM')")    //匹配含有“DOM”文本内容的li元素
:empty 匹配所有不包含子元素或者文本的空元素 $("td:empty")   //匹配不包含子元素或者文本的单元格
:has(selector) 匹配含有选择器所匹配元素的元素 $("td:has(p)")    //匹配表格的单元格中含有

标记的单元格

:parent 匹配含有子元素或者文本的元素 $("td: parent")    //匹配不为空的单元格,即在该单元格中还包括子元素或者文本

二 应用

应用内容过滤器匹配为空的单元格、不为空的单元格和包含指定文本的单元格

三 代码

<script language="javascript" src="JS/jquery-3.1.1.min.js"></script>
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#3F873B">
 <tr>
 <td width="11%" height="27">编号</td>
 <td width="14%">祝福对象</td>
 <td width="12%">祝福者</td>
 <td width="33%">字条内容</td>
 <td width="30%">发送时间</td>
 </tr>
 <tr>
 <td height="27">1</td>
 <td>琦琦</td>
 <td>妈妈</td>
 <td>愿你健康快乐的成长!</td>
 <td>2011-07-05 13:06:06</td>
 </tr>
 <tr>
 <td height="27">1</td>
 <td>wgh</td>
 <td>爸爸</td>
 <td>愿你健康快乐的成长!</td>
 <td>2011-07-05 13:06:06</td>
 </tr>
 <tr>
 <td height="27">1</td>
 <td>花花</td>
 <td>wgh</td>
 <td>愿你健康快乐的成长!</td>
 <td>2011-07-05 13:06:06</td>
 </tr>
  <tr>
 <td height="27">1</td>
 <td>科科</td>
 <td>wgh</td>
 <td></td>
 <td>2011-07-05 13:06:06</td>
 </tr>
</table>
<script type="text/javascript">
  $(document).ready(function() {
   $("td:parent").css("background-color","#E8F3D1");  //为不为空的单元格设置背景颜色
   $("td:empty").html("暂无内容");         //为空的单元格添加默认内容
   $("td:contains('wgh')").css("color","red");     //将含有文本wgh的单元格的文字颜色设置为红色
  });
</script>

四 运行结果

jQuery中内容过滤器简单用法示例

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery中map函数的两种方式
Apr 07 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 #jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 #jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 #jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 #jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 #jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 #jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 #jQuery
You might like
php数组去重实例及分析
2013/11/26 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
js同源策略详解
2015/05/21 Javascript
window.onload使用指南
2015/09/13 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
[01:27]DOTA2电竞之夜 今夜共饮庆功酒
2014/08/02 DOTA
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
python计算书页码的统计数字问题实例
2014/09/26 Python
Windows下python2.7.8安装图文教程
2016/05/26 Python
python检索特定内容的文本文件实例
2018/06/05 Python
python创造虚拟环境方法总结
2019/03/04 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
Python龙贝格法求积分实例
2020/02/29 Python
Stylenanda中文站:韩国一线网络服装品牌
2016/12/22 全球购物
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
优秀研究生自我鉴定
2013/12/04 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
React更新渲染原理深入分析
2022/12/24 Javascript