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平滑滚动到顶部插件使用详解
May 08 jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jQuery弹框插件使用方法详解
May 26 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
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
PHP中函数内引用全局变量的方法
2008/10/20 PHP
php数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
PHP中如何定义和使用常量
2013/02/28 PHP
smarty基础之拼接字符串的详解
2013/06/18 PHP
深入理解PHP中的global
2014/08/19 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
jQuery.each()用法分享
2012/07/31 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
微信小程序实现滑动删除效果
2017/05/19 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
详解JavaScript事件循环机制
2018/09/07 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
微信用户访问小程序的登录过程详解
2019/09/20 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
Python3实现从文件中读取指定行的方法
2015/05/22 Python
python实现实时监控文件的方法
2016/08/26 Python
python地震数据可视化详解
2019/06/18 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
岗位职责的含义
2013/11/17 职场文书
营销学习心得体会
2014/09/12 职场文书
导游词之天津盘山
2019/11/01 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript