什么是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;
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>