资料

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

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

JQuery入门+js库文件分享

什么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库文件

JQuery入门+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>

JQuery入门+js库文件分享

资料

什么JQuery

JQuery的作用

JQ的入门

JQ中根据ID查找元素

JQ和JS之间的转换

JQ的开发步骤

JQ中的动画效果

相关推荐