JQuery入门+js库文件分享

作者: 众泰保安队长
来源: 51数据库
2021-09-05

资料

链接：https://pan.baidu.com/s/1ahunfpcs1vjaas5zj5abqa
提取码：b1hb

包括本章节需要的js库文件，以及jquery的api文档

什么jquery

jquery是一个快速、简洁的javascript框架，是继prototype之后又一个优秀的javascript代码库（或javascript框架）。jquery设计的宗旨是“write less，do more”，即倡导写更少的代码，做更多的事情。它封装javascript常用的功能代码，提供一种简便的javascript设计模式，优化html文档操作、事件处理、动画设计和ajax交互。

jquery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对css选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jquery兼容各种主流浏览器，如ie 6.0+、ff 1.5+、safari 2.0+、opera 9.0+等

jquery的作用

写更少的代码,做更多的事情: write less ,do more
将我们页面的js代码和html页面代码进行分离

jq的入门

导入js库文件

 <script type="text/javascript" src="js/jquery-1.11.0.js"></script>

<script>
			//js文档加载完成的事件
			window.onload = function(){
				alert("window.onload   111");
			}
			
			window.onload = function(){
				alert("window.onload   222");
			}
			
			/*文档加载完成的事件*/
			jquery(document).ready(function(){
			 	alert("jquery(document).ready(function()");
			});
			/*
			 	jquery  简写成 $
			 */
			$(document).ready(function(){
			 	alert("$(document).ready(function()");
			});
			
			/*
				最简单的写法 
			*/
			$(function(){
				alert("$(function(){");
			});
			
		</script>

实验发现只输出了window.onload 222和jquery的三个输出，说明js的第二个输出方法替换了之前的输出，而jquery没有

jq中根据id查找元素

全都是根据选择器去找的
#id{}
.类名{}
$("#id的名称")

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		
		
		<script>
			//文档加载顺序
			$(function(){
				$("#div1").html("李四");
				
//				div1.innerhtml = "王五"; 
			});
//			alert($("#div1"));
			
		</script>
	</head>
	<body>
		<div id="div1">张三</div>
	</body>
</html>

jq和js之间的转换

jq对象,只能调用jq的属性和方法
js对象只能调用js的属性和方法

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		<script>
			function changejs(){
				var div = document.getelementbyid("div1");
//				div.innerhtml = "js成功修改了内容"

				//将js对象转成jq对象
				$(div).html("转成jq对象来修改内容")
			}
			
			$(function(){
				//给按钮绑定事件
				$("#btn2").click(function(){
					//找到div1
//					$("#div1").html("jq方式成功修改了内容");

					//将jq对象转成js对象来调用
					var $div = $("#div1");
//		            第一种方法		
//                  var jsdiv = $div.get(0);
					var jsdiv = $div[0];
					jsdiv.innerhtml="jq转成js对象成功";
				});
			});
			
			
		</script>
	</head>
	<body>
		<input type="button" value="js修改div内容" onclick="changejs()" />
		<input type="button" value="jq方式修改div内容" id="btn2" />
		<div id="div1">
			这里的内容一会要被js/jq代码修改掉
		</div>
		<div id="div1">
			这里的内容一会要被js/jq代码修改掉1111
		</div>
	</body>
</html>

jq的开发步骤

将我们页面的js代码和html页面代码进行分离

1. 导入jq相关的文件
2.  文档加载完成事件: $(function)  : 页面初始化的操作: 绑定事件, 启动页面定时器
3. 确定相关操作的事件
4. 事件触发函数
5. 函数里面再去操作相关的元素

jq中的动画效果

显示和隐藏 img.style.display

show()
hide()
slideup
slidedown
fadein
fadeout
animate : 自定义动画

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		
		<!--
			1. 导入jq相关的文件
			2.  文档加载完成事件: $(function)  : 页面初始化的操作: 绑定事件, 启动页面定时器
			3. 确定相关操作的事件
			4. 事件触发函数
			5. 函数里面再去操作相关的元素
		-->
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		
		<script>
			$(function(){
				
				//显示页面图片
				//给按钮绑定事件
				$("#btn1").click(function(){
//					$("#img1").show();
//                  滑动
//					$("#img1").slidedown();
//                   淡入淡出
//					$("#img1").fadein(5000);

					$("#img1").animate({ width:"800px",opacity:"1"},5000);
					
				});
				
				//隐藏页面图片
				$("#btn2").click(function(){
					//获得img
//					$("#img1").hide(10000);
//					$("#img1").slideup(500);
//					$("#img1").fadeout(5000);
					$("#img1").animate({ width:"1366px",opacity:"0.2"},5000);
				});
			});
		</script>
	</head>
	<body>
		<input type="button" value="显示" id="btn1" /> 
		<input type="button" value="隐藏" id="btn2"/> <br />
		<img src="../../img/333.png" id="img1" width="500px" />
	</body>
</html>