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实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jQuery实现放大镜案例
Oct 19 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
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
PHP判断远程url是否有效的几种方法小结
2011/10/08 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
php封装一个异常的处理类
2017/06/08 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
js实现圆盘记速表
2015/08/03 Javascript
jQuery实现的兼容性浮动层示例
2016/08/02 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
JS数组reduce()方法原理及使用技巧解析
2020/07/14 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
Python字符串切片操作知识详解
2016/03/28 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
python实现mysql的读写分离及负载均衡
2018/02/04 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
在python3中使用shuffle函数要注意的地方
2020/02/28 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
2014年最新学习全国两会精神心得
2014/03/17 职场文书
美容院经理岗位职责
2014/04/03 职场文书
学校课外活动总结
2014/05/08 职场文书
2014年团支部工作总结
2014/11/17 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
2019年最新感恩节祝福语(28句)
2019/11/27 职场文书