在官方网站下载包，下载不带有min的包
http://jquery.com/download/
案例一：使用JQ完成首页定时弹出广告图片
01_JQ入门
01_jQuery入门.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery入门</title>
<script type="text/javascript" src="../../js/jquery-3.2.1.js"></script>
<script>
$(function() {
alert("hello jquery!");
});
</script>
</head>
<body>
</body>
</html>
02_JQ页面加载与JS页面加载区别.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ页面加载与JS页面加载区别</title>
<script type="text/javascript" src="../../js/jquery-3.2.1.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>
</head>
<body>
</body>
</html>
03_JQ的获取.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ的获取</title>
<script type="text/javascript" src="../../js/jquery-3.2.1.js"></script>
<script>
$(function() {
//1.JS方式获取
document.getElementById("btn").onclick = function() {
location.href = "01_jQuery入门.html";
}
//2.JQ方式获取
$("#btn").click(function() {
location.href = "01_jQuery入门.html";
});
})
</script>
</head>
<body>
<input type "button" value="点我有惊喜" id="btn" />
</body>
</html>
02_DOM对象与JQ对象的转换
DOM对象与JQ对象的转换.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM对象与JQ对象的转换</title>
<script type="text/javascript" src="../../js/jquery-3.2.1.js"></script>
<script>
function write1() {
//1.JS的DOM操作
document.getElementById("span1").innerHTML = "萌萌哒！";
var spanEle = document.getElementById("span1");
//将DOM对象转换成JQ对象
$(spanEle).html("思密达");
}
$(function() {
$("#btn").click(function() {
$("#span1").html("呵呵");
//JQ对象向DOM对象转换方式一
$("#span1").get(0).innerHTML = "美美哒！";
//JQ对象向DOM对象转换方式二
$("#span1")[0].innerHTML = "美美哒！";
})
})
</script>
</head>
<body>
<input type="button" value="JS写入" onclick="write1()" />
<input type="button" value="JQ写入" /><br /> 班长：
<span id="span1">你好呀！</span>
</body>
</html>