2.9学习

Posted on 2020-02-09 22:16  九天龙凤  阅读(89)  评论(0)    收藏  举报

什么是jQuery？：https://baike.baidu.com/item/jQuery/5385065?fr=aladdin

Jquery它是javascript的一个轻量级框架，对javascript进行封装，它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。

下载：链接: https://pan.baidu.com/s/19lHW8JsV7n_JAJwTcCl2bg 提取码: c8vz

Jquery它是一个库(框架)，要想使用它，必须先引入！

jquery-1.8.3.js：一般用于学习阶段。

jquery-1.8.3.min.js：用于项目使用阶段

Jquery的简单入门
所有的jquery代码写在页面加载函数
$(function(){
Jquery代码
});

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jquery入门</title>
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				alert("Hello jquery!");
			})
		</script>
	</head>
	<body>
	</body>
</html>

JQ与JS页面加载区别

script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			window.onload = function(){
				alert("张三");
			}
			
			//传统方式页面加载会存在覆盖问题，加载比JQ慢（整个页面加载完毕<包括里面的其他内容，比如图片>）
			window.onload = function(){
				alert("老王");
			}
			
			//JQ的加载比JS的加载要快！（当整个dom树结构绘制完毕就会加载）
			jQuery(document).ready(function(){
				alert("李四");
			});
			
			//JQ不存在覆盖问题，加载的时候是顺序执行
			$(document).ready(function(){
				alert("王五");
			})
			
			//简写方式
			$(function(){
				alert("汾酒");
			})
		</script>

JQ与JS获取区别

<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
//				1.JS方式获取
//				document.getElementById("btn").onclick = function(){
//					location.href="惊喜.html";
//				}
				
//				2.JQ方式获取=====>>>$("#btn")
				$("#btn").click(function(){
					location.href="惊喜.html";
				});
				
			})
		</script>

Jquery对象与DOM对象转换
注意：
JQ对象只能操作JQ里面的属性和方法
JS对象只能操作JS里面的属性和方法。

实现步骤
第一步：引入jQuery相关的文件
第二步：书写页面加载函数
第三步：在页面加载函数中，获取显示广告图片的元素。
第四步：设置定时操作(显示广告图片的函数)
第五步：在显示广告图片的函数中，使用jQuery的方法让广告图片显示(show())
第六步：清除显示广告图片的定时操作
第七步：设置定时操作(隐藏广告图片的函数)
第八步：在隐藏广告图片的函数中，使用jQuery的方法让广告图片隐藏(hide())
第九步：清除隐藏广告图片的定时操作

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				//1.书写显示广告图片的定时操作
				time = setInterval("showAd()",3000);
			});
			
			//2.书写显示广告图片的函数
			function showAd(){
				//3.获取广告图片并让其显示
//				$("#img2").show(1000);
//				$("#img2").slideDown(5000);
				$("#img2").fadeIn(4000);
				//4.清除显示图片的定时操作
				clearInterval(time);
//				//5.设置隐藏图片的定时操作
				time = setInterval("hiddenAd()",3000);
			}
			
			function hiddenAd(){
				//6.获取广告图片让其隐藏
//				$("#img2").hide();
//				$("#img2").slideUp(5000);
				$("#img2").fadeOut(4000);
				//7.清除隐藏图片的定时操作
				clearInterval(time);
			}
		</script>

toggle的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>toggle的使用</title>
		<style>
			div{
				border: 1px solid white;
				width: 500px;
				height: 350px;
				margin: auto;
				text-align: center;
			}
		</style>
		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("#btn").click(function(){
					$("#img1").toggle();
				});
			});
		</script>
	</head>
	<body>
		<div>
			<input type="button" value="显示/隐藏" id="btn" /><br />
			<img src="../img/飞机05.gif" width="100%" height="100%" id="img1" />
		</div>
	</body>
</html>