JQuery

于 2020-06-24 21:39:01 发布
阅读量96 收藏
点赞数 1
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44180803/article/details/106951372
版权

内容过滤器的示例
程序如下

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>内容过滤器的示例</title>
<style type="text/css">
	td{
		font-size:12px;		/*设置单元格的样式*/
		padding:3px;		/*设置内边距*/
		background-color:#F9FCEF;	/*设置背景颜色*/
	}
</style>

<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("td:parent").css("background-color","#E8F3D1");	//为不为空的单元格设置背景颜色
		$("td:empty").html("暂无内容");	//为空的单元格添加默认内容
		$("td:contains('wgh')").css("color","red");	//将含有文本wgh的单元格的文字颜色设置为红色
	});
</script>
</head>
<body>
	<table width="98%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#3F873B">
      <tr>
        <td width="11%" height="27" align="center">编号</td>
        <td width="14%" align="center">祝福对象</td>
        <td width="12%" align="center">祝福者</td>
        <td width="33%" align="center">字条内容</td>
        <td width="30%" align="center">发送时间</td>
      </tr>
      <tr>
        <td height="27">1</td>
        <td>琦琦</td>
        <td>妈妈</td>
        <td>愿你健康快乐的成长！</td>
        <td>2016-07-05 13:06:06</td>
      </tr>
      <tr>
        <td height="27">2</td>
        <td>wgh</td>
        <td>无语</td>
        <td>每天有份好心情！</td>
        <td>2016-07-05 13:26:17</td>
      </tr>
      <tr>
        <td height="27">3</td>
        <td>天净沙小晓</td>
        <td>wgh</td>
        <td>煮豆燃豆萁，豆在釜中泣。本是同根生，相煎何太急。</td>
        <td>2016-07-05 13:36:06</td>
      </tr>
      <tr>
        <td height="27">4</td>
        <td>明日科技</td>
        <td>wgh</td>
        <td></td>
        <td>2016-07-05 13:46:06</td>
      </tr>
  </table>
</body>
</html>
内容过滤器的示例
编号祝福对象祝福者字条内容发送时间
1琦琦妈妈愿你健康快乐的成长！2016-07-05 13:06:06
2wgh无语每天有份好心情！2016-07-05 13:26:17
3天净沙小晓wgh煮豆燃豆萁，豆在釜中泣。本是同根生，相煎何太急。2016-07-05 13:36:06
4明日科技wgh2016-07-05 13:46:06
**简单过滤器的示例** 程序如下： 
程序如下：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单过滤器的示例</title>
<style type="text/css">
	td{
		font-size:12px;		/*设置单元格的样式*/
		padding:3px;		/*设置内边距*/
	}
	.th{
		background-color:#B6DF48;	/*设置背景颜色*/
		font-weight:bold;	           /*设置文字加粗显示*/
		text-align:center;		/*文字居中对齐*/
	}
	.even{
		background-color:#E8F3D1;	/*设置偶数行的背景颜色*/
	}
	.odd{
		background-color:#F9FCEF;	/*设置奇数行的背景颜色*/
	}
</style>

<script type="text/javascript" src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("tr:even").addClass("even");	//设置奇数行所用的CSS类
		$("tr:odd").addClass("odd");	//设置偶数行所用的CSS类
		$("tr:first").removeClass("even");	//移除even类
		$("tr:first").addClass("th");	//添加th类
	});
</script>
</head>
<body>
	<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>2016-07-05 13:06:06</td>
      </tr>
      <tr>
        <td height="27">2</td>
        <td>wgh</td>
        <td>无语</td>
        <td>每天有份好心情！</td>
        <td>2016-07-05 13:26:17</td>
      </tr>
      <tr>
        <td height="27">3</td>
        <td>天净沙小晓</td>
        <td>wgh</td>
        <td>煮豆燃豆萁，豆在釜中泣。本是同根生，相煎何太急。</td>
        <td>2016-07-05 13:36:06</td>
      </tr>
      <tr>
        <td height="27">4</td>
        <td>明日科技</td>
        <td>wgh</td>
        <td>明天会更好！</td>
        <td>2016-07-05 13:46:06</td>
      </tr>
  </table>
</body>
</html>
简单过滤器的示例
编号祝福对象祝福者字条内容发送时间
1琦琦妈妈愿你健康快乐的成长！2016-07-05 13:06:06
2wgh无语每天有份好心情！2016-07-05 13:26:17
3天净沙小晓wgh煮豆燃豆萁，豆在釜中泣。本是同根生，相煎何太急。2016-07-05 13:36:06
4明日科技wgh明天会更好！2016-07-05 13:46:06
疯-疯
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Java Web Jquery表单验证
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
jQuery - 3.6.0
05-04
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它使HTML文档遍历和操作，事件处理，动画和Ajax等功能变得更加简单，它具有易于使用的API，可跨多种浏览器运行。凭借多功能性和可扩展性的结合，jQuery改变了数...
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
jquery-migrate
03-05
jQuery 迁移插件， Migrate 有两个版本。jquery-migrate-1.4.1版本将帮助您将 1.9 之前的 jQuery 代码更新到 jQuery 1.9 到 3.0。 jquery-migrate-3.4.0版本将帮助您更新代码以在 jQuery 3.0 或更高版本上运行。 ...
jquery-1.9.1.js
09-07
jquery-1.9.1版本
前端+jQuery+实现烟花特效
05-02
前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...
jQuery源码 jQuery源码 jQuery源码
04-19
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
jquery验证码
10-19
jQuery实现web开发验证码，无需后台验证。简单方便实用
jquery-3.6.0
09-06
jquery-3.6.0
Jquery-3.7.1.min.js
01-22
Jquery-3.7.1.min.js
Jquery 本地版引用文件 适配3.6.1版本
11-15
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.1.min.js"> 官网jquery压缩版引用地址: <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script> 下载后更改文件名，匹配引用连接...
jQuery1.11.0_20140330_jquery_
10-02
jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。jQuery库包含以下功能： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM ...
jQuery-3.6.0.min.js
11-14
jQuery-3.6.0.min.js
jquery.js文件
最新发布
07-05
jquery.js文件
jquery-3.6.0.js
01-07
jquery下载后粘贴即可使用
jquery-1.12.4
11-01
《jQuery 1.12.4：Web开发中的强大JavaScript库》 jQuery，这个小巧而强大的JavaScript库，自2006年发布以来，已经成为了Web开发者不可或缺的工具。其核心理念是“Write Less, Do More”，即用更少的代码实现更多的...
jquery-1.11.1.js
10-21
jQuery库
jquery扩展demo
03-05
为jquery编写的扩展，仿easyui，清晰简洁，适合初学者，包含扩展jquery.accordion.js、jquery.combobox.js、jquery.datagrid.js、jquery.datebox.js、jquery.dialog.js、jquery.form.js、jquery.layout.js、jquery....
jQuery
05-31
jQuery 是一个流行的 JavaScript 库，它可以简化 JavaScript 编写的复杂度。它是免费、开源的，可以跨浏览器使用，支持主流的浏览器。 jQuery 提供了很多的 API 和方法，可以用于 DOM 操作、事件处理、AJAX、动画...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值