JQuery-学习笔记07【高级——JQuery高级案例】

最新推荐文章于 2023-01-15 03:14:13 发布

upward337

最新推荐文章于 2023-01-15 03:14:13 发布

阅读量485

点赞数 1

分类专栏： jQuery 文章标签： jquery javascript css html intellij idea

希望对您有所帮助；知识共享，欢迎转载，转载时：请附上原文链接！

本文链接：https://blog.csdn.net/weixin_44949135/article/details/113861878

版权

jQuery 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

Java后端学习路线笔记汇总表【黑马程序员】

JQuery-学习笔记01【基础——JQuery基础】——【day01】
JQuery-学习笔记02【基础——JQuery选择器】
JQuery-学习笔记03【基础——DOM操作】
JQuery-学习笔记04【基础——JQuery基础案例】
JQuery-学习笔记05【高级——JQuery动画和遍历】——【day02】
JQuery-学习笔记06【高级——JQuery事件绑定和切换】
JQuery-学习笔记07【高级——JQuery高级案例】

1、$.fn.extend(object) // 对象级别插件

2、$.extend(object) // 全局级别插件

第6节 JQuery高级案例

JQuery_案例1_广告显示和隐藏

JQuery 高级
1. 动画
2. 遍历
3. 事件绑定
4. 案例
1. 广告显示和隐藏
2. 抽奖
5. 插件

需求：
   1. 当页面加载完，3秒后。自动显示广告
   2. 广告显示5秒后，自动消失。

分析：
   1. 使用定时器来完成。setTimeout (执行一次定时器)
   2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display
   3. 使用 show/hide方法来完成广告的显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>案例之广告的自动显示与隐藏</title>
		<style>
			#content {
			width: 100%;
			height: 500px;
			background: #999
		}
	</style>
		<!--引入jquery-->
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
		<script>
			$(function() { // 入口函数，在页面加载完成之后，定义定时器，调用这两个方法
				//定义定时器，调用adShow方法 3秒后执行一次
				setTimeout(adShow, 3000);
				//定义定时器，调用adHide方法，8秒后执行一次
				setTimeout(adHide, 8000);
			});

			function adShow() { // 显示广告
				//获取广告div，调用显示方法
				// $("#ad").show("slow");
				$("#ad").slideDown("slow");
			}

			function adHide() { // 隐藏广告
				//获取广告div，调用隐藏方法
				// $("#ad").hide("slow");
				$("#ad").slideUp("slow");
			}
		</script>
	</head>
	<body>
		<!-- 整体的DIV -->
		<div>
			<!-- 广告DIV -->
			<div id="ad" style="display: none;">
				<img style="width:100%" src="../img/adv.jpg" />
			</div>
			<!-- 下方正文部分 -->
			<div id="content">
				正文部分
			</div>
		</div>
	</body>
</html>

JQuery_案例2_抽奖_演示

JQuery_案例2_抽奖_实现

分析：
   1. 给开始按钮绑定单击事件
       1.1 定义循环定时器
       1.2 切换小相框的src属性
           * 定义数组，存放图片资源路径
           * 生成随机数。数组索引
   2. 给结束按钮绑定单击事件
       1.1 停止定时器
       1.2 给大相框设置src属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jquery案例之抽奖</title>
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
		<script language='javascript' type='text/javascript'>
			var imgs = ["../img/man00.jpg", "../img/man01.jpg",
				"../img/man02.jpg", "../img/man03.jpg",
				"../img/man04.jpg", "../img/man05.jpg", "../img/man06.jpg",
			];
			var startId; //开始定时器的id
			var index; //随机角标
			$(function() {
				//处理按钮是否可以使用的效果
				$("#startID").prop("disabled", false);
				$("#stopID").prop("disabled", true);
				//1. 给开始按钮绑定单击事件
				$("#startID").click(function() {
					// 1.1 定义循环定时器 20毫秒执行一次
					startId = setInterval(function() {
						//处理按钮是否可以使用的效果
						$("#startID").prop("disabled", true);
						$("#stopID").prop("disabled", false);
						//1.2 生成随机角标 0-6
						index = Math.floor(Math.random() * 7); //0.000--0.999 --> * 7 --> 0.0-----6.9999
						//1.3 设置小相框的src属性
						$("#img1ID").prop("src", imgs[index]);
					}, 20);
				});
				//2. 给结束按钮绑定单击事件
				$("#stopID").click(function() {
					//处理按钮是否可以使用的效果
					$("#startID").prop("disabled", false);
					$("#stopID").prop("disabled", true);
					// 1.1 停止定时器
					clearInterval(startId);
					// 1.2 给大相框设置src属性
					$("#img2ID").prop("src", imgs[index]).hide();
					//1秒之后显示
					$("#img2ID").show(1000);
				});
			});
		</script>
	</head>
	<body>
		<!-- 小像框 -->
		<div style="border-style:dotted;width:160px;height:100px">
			<img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px" />
		</div>
		<!-- 大像框 -->
		<div style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
			<img id="img2ID" src="../img/man00.jpg" width="800px" height="500px" />
		</div>
		<!-- 开始按钮 -->
		<input id="startID" type="button" value="点击开始" style="width:150px;height:150px;font-size:22px">
		<!-- 停止按钮 -->
		<input id="stopID" type="button" value="点击停止" style="width:150px;height:150px;font-size:22px">
	</body>
</html>

JQuery_插件机制

JQuery 高级
1. 动画
2. 遍历
3. 事件绑定
4. 案例
5. 插件：增强JQuery的功能
   1. 实现方式：
       1、$.fn.extend(object) // 对象级别插件
           * 增强“通过JQuery获取的对象”的功能，例：$("#id")
       2、$.extend(object) // 全局级别插件
           * 增强“JQeury对象自身”的功能，例：$/jQuery

1、$.fn.extend(object) // 对象级别插件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>01-对jQuery对象进行方法扩展.html</title>
		<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//使用jquery插件 给jq对象添加2个方法 check()选中所有复选框，uncheck()取消选中所有复选框
			//1.定义jqeury的对象插件
			$.fn.extend({
				//定义了一个check()方法。所有的jq对象都可以调用该方法
				check: function() {
					//让复选框选中
					//this:调用该方法的jq对象
					this.prop("checked", true);
				},
				uncheck: function() {
					//让复选框不选中
					this.prop("checked", false);
				}
			});
			$(function() {
				//获取按钮
				//$("#btn-check").check();
				//复选框对象.check();
				$("#btn-check").click(function() {
					//获取复选框对象
					$("input[type='checkbox']").check();
				});
				$("#btn-uncheck").click(function() {
					//获取复选框对象
					$("input[type='checkbox']").uncheck();
				});
			});
		</script>
	</head>
	<body>
		<input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
		<input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()">
		<br />
		<input type="checkbox" value="football">足球
		<input type="checkbox" value="basketball">篮球
		<input type="checkbox" value="volleyball">排球
	</body>
</html>

2、$.extend(object) // 全局级别插件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>02-对jQuery全局进行方法扩展.html</title>
		<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值
			$.extend({
				max: function(a, b) {
					//返回两数中的较大值
					return a >= b ? a : b;
				},
				min: function(a, b) {
					//返回两数中的较小值
					return a <= b ? a : b;
				}
			});
			//调用全局方法
			var max = $.max(4, 3);
			alert(max);
			var min = $.min(1, 2);
			alert(min);
		</script>
	</head>
	<body>
	</body>
</html>