jQuery应用举例

最新推荐文章于 2022-10-24 12:03:24 发布
最新推荐文章于 2022-10-24 12:03:24 发布
阅读量255 收藏 1
点赞数
分类专栏： Java Web jQuery 文章标签： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Levana1994/article/details/90154370
版权

jQuery应用举例

文章目录

一.隔行换色

  • 页面:
    在这里插入图片描述
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table{
    
				width: 500px;
				margin: 0 auto;
				border-collapse: collapse;
			}
			td,th{
    
				border: 1px solid blue;
				text-align: center;
			}
		
			.evenTr{
    
                /*偶数行样式*/
                background-color: lightblue;
            }
            .oddTr{
    
                /*奇数行样式*/
                background-color: lightgreen;
            }
            .activeTr{
    
                /*鼠标移入后 所在行样式*/
                background-color: #ccc;
            }
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td>1</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>2</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>3</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>4</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>5</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>6</td>
				<td></td>
				<td></td>
			</tr>
		</table>

		<script src="../js/jquery-3.3.1.min.js"></script>
		<script>
			//奇数行设置oddTr的类名
            $("tr:gt(0):odd").addClass("oddTr");
			//偶数行设置evenTr的类名
            $("tr:gt(0):even").addClass("evenTr");
            //鼠标移入变色，移走还原
			$("tr:gt(0)").mouseover(function () {
    
                $(this).toggleClass("activeTr");
            }).mouseout(function () {
    
                $(this).toggleClass("activeTr");
            })
		</script>
	</body>
</html>

二.全选全消

  • 页面:
    在这里插入图片描述
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table{
    
				width: 500px;
				margin: 0 auto;
				border-collapse: collapse;
			}
			td,th{
    
				border: 1px solid blue;
				text-align: center;
			}
		
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th style="width:100px;">
					<input type="checkbox" id="checkall" title="全选/全消"/>
					<input type="button" value="反选" id="reverse">
				</th>
				<th>学号</th>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td>
					<input type="checkbox" class="item" />
				</td>
				<td>1</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" class="item" />
				</td>
				<td>2</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" class="item" />
				</td>
				<td>3</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" class="item" />
				</td>
				<td>4</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" class="item" />
				</td>
				<td>5</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" class="item" />
				</td>
				<td>6</td>
				<td></td>
				<td></td>
			</tr>
		</table>
	<!--
	要求：
		点击checkall的时候，
			if checkall是选中状态，那么所有的item都要设置为：选中状态
			if checkall是未选中状态，那么所有的item都要设置为：未选中状态
	-->

		<script src="../js/jquery-3.3.1.min.js"
最低0.47元/天 解锁文章
Levana。
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery相关实例应用
m0_60264901的博客
01-23 1146
品优购之购物车中的效果实现
jquery应用实例
10-17
《jQuery应用实例详解》 jQuery，作为一款广泛应用于前端开发的JavaScript库，以其简洁的API和强大的功能，深受开发者喜爱。本篇文章将深入探讨jQuery在实际应用中的多种实例，帮助读者掌握并熟练运用jQuery，提升...
jQuery最全应用笔记(附带常见函数操作举例)
PIKapikaaaa的博客
03-30 979
jQuery 是 js 的一个轻量级框架 jQuery 就是将 js 常用的功能 封装成了函数（函数库） jQuery 写了少量的代码 实现的更多功能 jQuery 拥有便捷的扩展机制和丰富的插件
jQuery 实例
m0_58492934的博客
08-04 328
你想增进 jQuery 技能吗？以下是jQuery的各种使用实例，快来看看你掌握了哪些？
关于JQuery（附3个案例）
weixin_43842821的博客
03-07 1746
简介 JQuery是一个快速的，小的，丰富的JavaScript库（类指函数，工具的集合）。使的HTML文档遍历和操作，事件处理，动画和Ajax等操作更加简单。 JQuery官网：https://jquery.com/ JQuery文档：https://www.bejson.com/apidoc/jquery/ JQuery特点 轻量，开源，免费，易于学习 兼容性处理 强大的选择器 链式操作 便捷的DOM操作 可靠的事件机制 封装了简单易用的ajax操作 丰富的插件 JQuery准备工作 下载JQuer
JQuery详解（讲解+举例）--（后端开发适用）
BLWY_1124的博客
10-24 1449
jQuery是一套兼容多浏览器的javascript脚本库。核心理念是写得更少，做得更多，使用jQuery将极大的提高编写javascript代码的效率，帮助开发者节省了大量的工作，让写出来的代码更加优雅，更加健壮，"如虎添翼"。同时网络上丰富的jQuery插件也让我们的工作变成了"有了jQuery,一切so easy。"-因为我们已经站在巨人的肩膀上了。
35个Jquery应用实例.docx
11-26
本文将深入探讨35个jQuery应用实例，帮助你更好地理解和掌握jQuery的核心特性。 1. **选择网页元素** jQuery 的核心功能之一是能够方便地选择网页中的元素。这通常通过CSS选择器实现，例如： - `$(document)` ...
35个Jquery应用实例.pdf
最新发布
11-26
在本文中，我们将深入探讨35个jQuery应用实例，以帮助理解其核心功能和常见用途。 1. **选择网页元素** jQuery的核心功能之一是选择页面上的元素。它支持CSS选择器，如`id`、`class`、`name`等，同时也提供特有的...
jQuery AJAX应用实例总结
01-19
本文实例总结了jQuery AJAX应用。分享给大家供大家参考，具体如下： AJAX 是指一种创建交互式网页应用的网页开发技术。 AJAX=异步JavaScript和XML（标准通用标记语言的子集）。 AJAX是一种用于创建快速动态网页的...
jQuery应用实例
m0_55997161的博客
04-21 991
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script> $(function () { ...
JQuery应用实例学习(强烈推荐)
10-16
JQuery应用实例学习(强烈推荐)---无私奉献了！！
非常经典的35个Jquery应用实例
03-06
非常经典的35个Jquery应用实例 不可多得的学习资源
jQuery使用的小例子
09-20
自己总结的js,jQuery使用的小例子，真的很使用，认真看肯定有收获的！
jQuery实例
IT913913的博客
02-24 210
1.新浪下拉菜单（核心代码） <body> <ul class="nav"> <li> <a href="#">微博</a> <ul> <li><a href="#">私信</a></li> <li><a href="#">评论
JQuery 炫酷应用实例集锦 - CH1
GoldenaArcher的博客
05-08 470
JQuery 酷炫应用实例集锦 - CH1 上 JQuery 版本为最新的 3.6，原来的案例为 2.2，可能有些 API 已经更新了会导致报错。这里下面跑过的案例都已经进行修改过了。 JQ 这东西……好用，就是有点难用…… 目前已经重写完的部分丢到这里了：jQuery炫酷应用实例集锦 JQ3.0 重写版，写一部分更一部分。 显示/消失 fadeIn/fadeOut 调用方法一致： $(selector).fadeIn( [duration ] [, complete ] ) $(selector).f
jQuery 实例
世事如棋__2016的博客
02-19 838
* 提示：ready() 函数不应与 一起使用。    *  jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。       可以通过下面的标记把 jQuery 添加到网页中：    1.允许使用以下三种语法：     1.$(document).ready(function)     2.$().ready(function)
Jquery中的常用事件举例
living_ren的博客
12-26 1062
Jquery中的常用事件举例
常见的JQuery应用举例
weixin_30279315的博客
05-08 77
在学习JS之后，JQuery(以下简称JQ)为我们提供了一种更加便捷和简单的操作模式，利用它开发人员将更为高效的进行工作，下面将一些常见的问题进行举例。 1.点击某处弹出提醒，例如某些游戏在注册时会弹出“过渡游戏有害健康”的提示语，利用JQuery可以解决这一问题。 首先运行效果如下，鼠标点击勾选框时弹出“适度游戏的提示框”。 要解决这个问题，其实H5的hover事件和JS都可以解决，但...
强烈推荐：240多个jQuery插件
weixin_33964094的博客
12-09 232
概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ，这是其它的 js 库所不及的，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。 jQuery 是一个快速的，简洁的 javaScript 库，使用户能...
jQuery应用实例合集：35个精彩示例解析
"35个Jquery应用实例" jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。在本文档中，我们看到35个精彩的jQuery应用实例，涵盖了从基本的选择器到高级的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值