jQuery小功能案例

最新推荐文章于 2022-05-06 14:54:06 发布
最新推荐文章于 2022-05-06 14:54:06 发布
阅读量193 收藏 1
点赞数
分类专栏： java 文章标签： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43231919/article/details/103368411
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>隔行换色</title>
		<style type="text/css">
			table{
				margin: auto;
			}
			.color {
				background-color: deeppink;
			}
		</style>
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="">
			<tr>
				<th>Header</th>
				<th>Header</th>
				<th>Header</th>
				<th>Header</th>
			</tr>
			<tr><td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr><td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
		</table>
	</body>
	<script type="text/javascript" src="js/jquery-3.1.1.js"> </script>
	<script type="text/javascript">
		/*这是简单写法,把这个打开,把后面的注掉即可查看.
		$("tr:even").addClass("color")
		$(document).click(function(){
			//toggleClass无则添加,有则删除
			$("tr:even").toggleClass("color");
			$("tr:odd").toggleClass("color");
		})*/
		var isEven = true;
		$(document).click(function() {
			if (isEven) {
				$("tr:even").addClass("color")
				$("tr:odd").removeClass("color");
			}else{
				$("tr:odd").addClass("color")
				$("tr:even").removeClass("color");
			}
			isEven = ! isEven;
		})
		
	</script>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全选/全不选</title>
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="">
			<tr>
				
				<th><input type="checkbox" class="f" name="" id="" value="" /></th>
				<th>Header</th>
				<th>Header</th>
				<th>Header</th>
			</tr>
			<tr>
				 
				<td><input type="checkbox" class="s" name="" id="" value="" /></td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				 
				<td><input type="checkbox" class="s"  name="" id="" value="" /></td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				 
				<td><input type="checkbox" class="s"  name="" id="" value="" /></td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				 
				<td><input type="checkbox" class="s"  name="" id="" value="" /></td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				 
				<td><input type="checkbox"  class="s" name="" id="" value="" /></td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
		</table>
	</body>
	<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
	<script type="text/javascript">
		$(".f").click(function(){
			$(".s").prop("checked",this.checked)
		})
	</script>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动画效果</title>
		<style type="text/css">
			div{
				width: 300px;
				height: 300px;
				background-color:  #FF1493;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			
		</div>
		<div id="div2">
			
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
	<script type="text/javascript">
		$(document).click(function(){
			//toggle实现显示与消失的切换
			$("div").toggle(2000);
			//fadeToggle淡入淡出的切换
			$("div").fadeToggle(2000);
			//slideToggle上卷下拉的切换
			$("div").slideToggle(2000);
			
		})
	</script>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>定时循环</title>
		<style type="text/css">
			img{
				width: 100%;
				height: 1400px;
			}
		</style>
	</head>
	<body>
		<img src="img/1001881.jpg"/>
		
	</body>
	<script type="text/javascript" src="js/jquery-3.1.1.js">	</script>
	<script type="text/javascript">
		setInterval(function(){
			$("img").toggle(500)
			$("img").fadeToggle(500)
			$("img").slideToggle(500)
		},2000)
	</script>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>省市联动</title>
	</head>
	<body>
		<select name="pro" id="pro">
			<option value="">---请选择---</option>
		</select>
		<select name="city" id="city">
			<option value="">---请选择---</option>
		</select>
	</body>
	<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
	<script type="text/javascript">
		var pros = ["河北省","河南省","陕西省","福建省","陕西省"];
		var citys = [
		["石家庄","保定","邯郸","唐山","秦皇岛"],
		["洛阳","南阳","信仰","濮阳","安阳"],
		["大同","临汾","太原","阳泉","运城"],
		["福州","莆田","厦门","武夷山","三明"],
		["济南", "青岛", "淄博", "滨州", "德州"]
		];
		
		//遍历省份数组
		$(pros).each(function(index,ele){
			$("#pro").append($("<option value='"+ index+"'>"+ele+"</option>"));
		})
		//当省下拉框发生值改变时间时,给市级下拉框添加元素
		$("#pro").change(function(){
			//先清空一次市级下拉框
			$("#city Option").remove(":gt(0)");
			//找到省对应的市数组
			var cs = citys[$(this).val()];
			$(cs).each(function(index,ele){
				$("#city").append($("<option value='"+index +"'>" +ele+ "</option>"))
				
			})
		})
		
		
	</script>
</html>
新赵是我
关注
专栏目录
jQuery经典小案例
娃娃的博客
03-29 1万+
目录 下拉菜单案例 突出展示案例 淘宝精品案例 京东呼吸灯案例 tab栏切换案例 手风琴案例 城市选择案例 微博发布案例 弹幕效果案例 固定导航栏案例 小火箭返回顶部案例 音乐导航栏案例 下拉菜单案例 效果图： 源代码： 鼠标进入事件mouseenter 鼠标离开事件mouseleave 下拉动画slideDown /slid...
jQuery小案例
weixin_49756484的博客
05-18 878
jQuery小案例 这篇文章我们主要是讲如何改变网页的背景颜色和改变背景图片以及计算器这三个小案例，我们将用到jQuery的方式去实现效果 我们先开始如何该表网页的背景颜色： 第一步：还是老规矩，先把页面新建好，在开始写我们的代码 第二步：开始写我们的html和css样式。这里我就把html和css样式的代码省略了，（图表1 则是我写的最终效果） 图表 1 样式写出来了，可是不我想要的一个效果，我想要的是点击一下红色方块整个网页的背景就变成了红色，点击绿色方块整个网页又变成了绿色，这个效果该
jquery实例以及常用jQuery主要功能实现
weixin_37460170的博客
10-11 518
1、页面分析、规划（页面的目录划分，结构样式分离：创建样式表，js文件以及ico图标） 2、模块化搭建页面结构
jQuery-案例常用功能
worm
09-13 566
/*案例： 实现需求： 两个文本框中，如果有输入 则显示输入值，没有值或者去除前后空格后仍未"".则设置为默认值 */ Insert title here $(function() { //添加获取焦点 focus，失去焦点 blur相应函数 $(":text").focus(function() { //当获取
Jquery经典案例总结
二手农民的学习博客
02-25 2059
================================================================================================================================================================ //评分控件，心得体会：1.text() 和val()的区别 2.addCl
十分钟玩转 jQuery、实例大全
07-25 288
一、简介 定义 　　jQuery创始人是美国John Resig，是优秀的Javascript框架； 　　jQuery是一个轻量级、快速简洁的javaScript库。源码戳这 jQuery对象 　　jQuery产生的对象时jQuery独有的，只能自己调用 书写规则 　　支持链式操作； 　　在变量前加"$"符号（var $variable = jQuery对...
50个实用的jquery案例
二手农民的学习博客
02-25 4795
1. 如何创建嵌套的过滤器： //允许你减少集合中的匹配元素的过滤器，   //只剩下那些与给定的选择器匹配的部分。在这种情况下，   //查询删除了任何没（:not）有（:has）   //包含class为“selected”（.selected）的子节点。   .filter(":not(:has(.selected))")  2. 如何重用元素搜索 var a
jQuery案例
WangZhang_521的博客
05-06 2728
01-精品展示案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
jQuery调节字体大小案例
nsnydnz的博客
08-12 923
效果展示 点击界面上的开关灯按钮，可以实现背景的调暗。后面可以调节其字体。方便晚上阅读。 文章目录效果展示关灯开灯 关灯 开灯 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http
jQuery实现电梯导航功能案例
yuhaowen的博客
02-02 3925
jQuery实现电梯导航功能案例 在页面中，一般都会有一个侧边导航栏，点击选项页面会跳转到对应的区域；或者滑动鼠标页面到到一个分类的区域侧边导航栏的选项也会变。 隐藏导航，移动一定区域后，显示导航 通过点击导航跳转到相应区域 一键返回页面顶部 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>电梯导航案例</title> <link r
《jQueryWeb开发案例教程（在线实训版）》案例源码.zip
06-29
《jQuery Web开发案例教程（在线实训版）》案例源码.zip是一个包含丰富的jQuery实践案例的压缩包，旨在帮助学习者深入理解和应用jQuery库在Web开发中的功能和技巧。这个资源对于初学者和有一定经验的开发者来说都是...
JQuery入门—编写一个简单的JQuery应用案例
10-27
标题“JQuery入门—编写一个简单的JQuery应用案例”指出了本篇文档将引导读者通过一个基础案例来了解如何开始使用JQuery。描述部分提到，首先需要引入JQuery文件库，这可以通过在HTML页面的标签内导入JQuery脚本文件...
jQuery全部案例
03-31
本篇文章将深入探讨jQuery的核心概念、主要功能以及如何在实际项目中运用。 1. **jQuery核心概念** - **选择器**: jQuery提供了一种直观的方式来选取HTML元素，类似于CSS选择器。例如，`$("#myID")`选取ID为`myID`...
基于Java的家庭理财系统设计与开发-金融管理-家庭财产管理-实用性强
11-07
内容概要：文章探讨了互联网时代的背景下开发一个实用的家庭理财系统的重要性。文中分析了国内外家庭理财的现状及存在的问题，阐述了开发此系统的目的——对家庭财产进行一体化管理，提供统计、预测功能。系统涵盖了家庭成员管理、用户认证管理、账单管理等六大功能模块，能够满足用户多方面查询及统计需求，并保证数据的安全性与完整性。设计中运用了先进的技术栈如SSM框架（Spring、SpringMVC、Mybatis），并采用MVC设计模式确保软件结构合理高效。 适用人群：对于希望科学地管理和规划个人或家庭财务的普通民众；从事财务管理相关专业的学生；有兴趣于家政学、经济学等领域研究的专业人士。 使用场景及目标：适用于日常家庭财务管理的各个场景，帮助用户更好地了解自己的消费习惯和资金状况；为目标客户提供一套稳定可靠的解决方案，助力家庭财富增长。 其他说明：文章还包括系统设计的具体方法与技术选型的理由，以及项目实施过程中的难点讨论。对于开发者而言，不仅提供了详尽的技术指南，还强调了用户体验的重要性。
弹性盒子Flexbox布局.docx
最新发布
11-07
弹性盒子Flexbox布局.docx
网络财务系统 SSM毕业设计 附带论文.zip
11-07
网络财务系统 SSM毕业设计 附带论文 启动教程:https://www.bilibili.com/video/BV1GK1iYyE2B
联想电脑的bios设置
11-07
联想电脑的bios设置、图文都有
1_教务处关于云南师范大学2024年大学生科研训练基金项目立项申报工作的通知 (1).zip
11-07
1_教务处关于云南师范大学2024年大学生科研训练基金项目立项申报工作的通知 (1).zip
基于Python实现的自然语言处理大作业-方面情感分析+源代码+文档说明+实验报告
11-07
<项目介绍> 基于Python实现的自然语言处理大作业——方面情感分析+源代码+文档说明+实验报告 - 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途
jQuery技巧与案例深度解析
"Jquery方法技巧和案例大全" 在JavaScript的世界里，jQuery库以其简洁的语法和强大的功能，极大地简化了DOM操作和事件处理。本文将深入探讨jQuery的一些关键技巧和实用案例，帮助开发者更好地理解和应用jQuery。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值