【浓缩精华版】jQuery入门宝典(三)

目录

一.事件处理

1.CDN

2.百度资源库

3.代码

二.动画功能

三.jQuery插件

四.jQuery封装原理

1.闭包的优点

2.代码

五.案例


 

一.事件处理

1.CDN

CDN的全称是Content Delivery Network,即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技 术主要有内容存储和分发技术。

2.百度资源库

        原本在百度静态资源公共库中有很多依托CDN技术分发的文件,如jQuery的各版本文件,但是选现在度静态资源公共库已经挂了。所以给大家推荐字节跳动静态资源公共库,内容较为齐全。在搜索栏搜索jquery,在J栏找到jquery并点击,

【浓缩精华版】jQuery入门宝典(三)

选择版本并点击,引入jQuery有两种方法,一种是引入js文件,另一种是直接令src为对应网址!

【浓缩精华版】jQuery入门宝典(三)

 点击复制TAG(引入代码,就不用自己手敲了,直接黏贴即可),黏贴在代码里即可。

3.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <script src="../js/jquery-1.9.1.js" type="text/javascript" charset="UTF-8"></script> -->
		<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/1.7/jquery.min.js" type="application/javascript"></script>
		<script type="text/javascript">
			/* ready事件:页面加载完执行的操作,相当于JS的onload*/
			// $(function(){})
			// jQuery(function(){})
			// $(document).ready(function(){})
			
			$(function(){
				/*****************事件的基础绑定******************/
				//其他事件的绑定方式和下面相同,换个事件名称就可以啦!!!
				//放在ready事件当中是为了将页面加载完就将单击事件绑定到对应按钮上
				$("#btn1").click(function(){
					alert("单击事件");
				})
				
				/*****************bind事件绑定******************/
				// $("#btn2").bind('click',function(){
				// 	alert("bind单击事件绑定");
				// });
				//适合同一对象绑定多个事件时使用,减小代码量,即json格式
				$("#text1").bind({
					'mouseover':function(){
						//输出到控制台
						console.log("鼠标放上bind");
					},
					'focus':function(){
						alert("光标移入");
					}
					//and so on
				})
				
				/*****************一次事件绑定******************/
				//只绑定一次,即事件执行一次之后就失效了
				$("#btn3").one('click',function(){
					alert("一次事件绑定");
				})
				
				/*****************trigger事件操作******************/
				$("#btn4").click(function(){
					// 调用其他对象的事件
					$("#btn1").trigger('click');
					$("#btn3").trigger('click');
				})
				
				/*****************事件的解绑******************/
				$("#btn5").click(function(){
					//解绑指定对象上的所有事件
					$("#btn1").unbind();
					//解绑指定对象上的指定事件
					$("#text1").unbind("focus");
				})
				
				// $(".btn6").click(function(){
				// 	alert("单击事件的绑定");
				// })
				//下面的方法可以增加元素,但不能增加相应事件
				$("body").append('<input type="button" name="" class="btn6" value="事件操作2" />');
				//执行如下操作可以使上面方法增加的元素绑定事件(live方法在1.7之前都可以用,之后不行)
				$(".btn6").live('click',function(){
					alert("btn6单击事件已绑定");
				})
			
			})//ready事件
			
			
			
		</script>
	</head>
	<body>
		<input type="button" name="" id="btn1" value="事件绑定" />
		<input type="text" name="" id="text1"/>
		<input type="button" name="" id="btn3" value="一次事件绑定"/>
		<input type="button" name="" id="btn4" value="trigger"/>
		<input type="button" name="" id="btn5" value="事件解绑" />
		<input type="button" name="" class="btn6" value="事件操作" />
	</body>
</html>

二.动画功能

了解即可。因为我本来也是为学后端学习铺垫而学的前端,所以浅尝辄止。

推荐一个插件库:www.jq22.com/   ,里面有很多现成的动画啥的,网页,功能啥的,五花八门的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1{
				height: 200px;
				background-color: #00A40C;
			}
			#div2{
				height: 200px;
				background-color: yellow;
				/* 隐藏 */
				/* display: none; */
			}
		</style>
		<script src="../js/jquery-1.9.1.js" type="text/javascript" charset="UTF-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#btn1").click(function(){
					//获得div对象
					var div1=$("#div1");
					//3s内隐藏动画(渐变)
					//div1.hide(3000);
					//3s内显示动画(渐变)
					//div1.show(3000);
					//隐藏的显示,显示的隐藏
					//$("div").toggle(3000);
					//滑动上
					//div1.slideUp(3000);
					//滑动下
					//div1.slideDown(3000);
					//滑动上的变成滑动下,滑动下的变成滑动上
					//$("div").slideToggle(3000);
					//淡出
					div1.fadeOut(3000);
					// 淡入
					div1.fadeIn(3000);
				})
			})
		</script>
	</head>
	<body>
		<input type="button" id="btn1" value="动画触发" />
		<hr />
		<div id="div1"></div>
		<div id="div2"></div>
	</body>
</html>

三.jQuery插件

jQueryUI:略,想看的去菜鸟教程看看就行了,用的不多。

四.jQuery封装原理

1.闭包的优点

(1)可以减少全局变量的对象,防止全局变量过去庞大,导致难以维护
(2)防止可修改变量,因为内部的变量外部是无法访问的,并且也不可修改的。安全。
(3)读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

2.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		
		//()是函数执行符
		
		/***************匿名函数的自调用***************/
			// 无参数的匿名函数的执行
			// (function (){
			// 	alert("我是匿名函数"); 
			// })()
			
			//有参匿名函数的执行(匿名函数只执行第一个)
			// (function (a,b,c){
			// 	alert("我是匿名函数"+a+'---'+b+'---'+c);
			// })(100,200,300)
			
		/**************局部变量的挂载****************/
			(function (){
				var a=100;//局部变量
				//在运行的时候把a挂载到window对象上
				window.vv=a;
				alert(a);
			})()
			
			function test(){
				alert('调用匿名函数的局部变量'+window.vv);//等价于alert(vv);
			}
			test();
		/*****************闭包原理******************/
		function testA(){
			var a=10;
			function testB(){
				alert(a);
				var b=100;
				//window.tmp=b;
				return b;
			}
			var c=testB();
			//alert(tmp);
			alert(c);
		}
		testA();
		</script>
	</head>
	<body>
		 <h1>jQuery中的封装原理</h1>
		 <h2>匿名函数的自调用</h2>
		 <h3>闭包原理</h3>
		 <h4>
			 
		 </h4>
	</body>
</html>

五.案例

上一篇:jQuery 效果 - 滑动


下一篇:jQuery弹幕插件