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

水深无声 2022-10-30 11:28 217阅读 0赞

>  *  **[Java后端 学习路线 笔记汇总表【黑马程序员】][Java_ _]**
> 
> 1.  [JQuery-学习笔记01【基础——JQuery基础】][JQuery-_01_JQuery]——【day01】
> 2.  [JQuery-学习笔记02【基础——JQuery选择器】][JQuery-_02_JQuery]
> 3.  [JQuery-学习笔记03【基础——DOM操作】][JQuery-_03_DOM]
> 4.  [JQuery-学习笔记04【基础——JQuery基础案例】][JQuery-_04_JQuery]
> 5.  [JQuery-学习笔记05【][JQuery-_05][高级][JQuery-_05]——[JQuery动画和遍历】][JQuery-_05]——【day02】
> 6.  [JQuery-学习笔记06【高级——JQuery事件绑定和切换】][JQuery-_06_JQuery]
> 7.  [JQuery-学习笔记07【高级——JQuery高级案例】][JQuery-_07_JQuery]

**目录**

第6节 JQuery高级案例

JQuery\_案例1\_广告显示和隐藏

JQuery\_案例2\_抽奖\_演示

JQuery\_案例2\_抽奖\_实现

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方法来完成广告的显示

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>案例之广告的自动显示与隐藏</title>
    		<style>
    			#content {
    			width: 100%;
    			height: 500px;
    			background: #999
    		}
    	</style>
    		
    		<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 id="ad" style="display: none;">
    				<img style="width:100%" src="../img/adv.jpg" />
    			</div>
    			
    			<div id="content">
    				正文部分
    			</div>
    		</div>
    	</body>
    </html>

## JQuery\_案例2\_抽奖\_演示 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3][]

## 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

> ![20210219141432284.png][]

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

> ![20210219142340676.png][]  ![20210219142350236.png][]

<!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>

> 老实、听话、肯干！

[Java_ _]: https://blog.csdn.net/weixin_44949135/article/details/113773297
[JQuery-_01_JQuery]: https://blog.csdn.net/weixin_44949135/article/details/113846421
[JQuery-_02_JQuery]: https://blog.csdn.net/weixin_44949135/article/details/113850915
[JQuery-_03_DOM]: https://blog.csdn.net/weixin_44949135/article/details/113852198
[JQuery-_04_JQuery]: https://blog.csdn.net/weixin_44949135/article/details/113857383
[JQuery-_05]: https://blog.csdn.net/weixin_44949135/article/details/113857980
[JQuery-_06_JQuery]: https://blog.csdn.net/weixin_44949135/article/details/113860817
[JQuery-_07_JQuery]: https://blog.csdn.net/weixin_44949135/article/details/113861878
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210219140131868.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/673c74c4b5074d10b4a6fe81a56089f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210219140303657.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3]: /images/20221024/ef45c57d129849278766181401285eeb.png
[20210219141432284.png]: /images/20221024/e2ec5c59b72849218a5bd1983ee34583.png
[20210219142340676.png]: https://img-blog.csdnimg.cn/20210219142340676.png
[20210219142350236.png]: /images/20221024/9b51a6688fb4497b8ac9dff1f7639aba.png