第一部分：JQ介绍
（1）什么是JQ？
JQ是JS写的插件库，说白了，就是一个js文件。
（2）JS和JQ的区别：
凡是用jq能实现的，js都能实现；js能实现的，jq却不一定能实现。
（3）JQ的理念：
Write less,do more！
1.JQ的引入：
JQuery官方网址！！！
进入JQ官网之后：
我们选择第二个或者第三个都可以，第一个和最后两个只是JQ的部分，有些功能没有。
第二个和第三个的区别：第二个是正常版；第三个是压缩版。
（1）第一种引入方式：网址引入！
直接点击第二个或者第三个的两个选项都可以，效果一样!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ的引入</title>
</head>
<body>
<!--第一种方法：网址引入-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
// $是JQ里面的代表符号
$(function () { //如果页面弹出123，则证明引入JQ正常！
alert(123)
})
</script>
</body>
</html>
（2）第二种引入方式：本地引入！
直接将JQuery复制粘贴到本地保存即可!
<script src="本地的Jquery地址"></script>
2.JQ的选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ的选择器</title>
</head>
<body>
<p>我是一个段落标签</p>
<script src="JQuery.js"></script>
<script>
// JQ选择器获取元素的方法和CSS一模一样！！！ 固定格式：$("") 双引号里面写选择器！！！
$("p").click(function () { //注意：JQ里的单击事件是click，注意这个写法和JS是有所不同的！
alert("我出来了");
});
</script>
</body>
</html>
第二部分：基本使用
1.基本使用一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ的基本使用一</title>
</head>
<body>
<div>
<p id="p1">我是段落</p>
<p id="p2">我是段落666</p>
</div>
<script src="JQuery.js"></script>
<script>
// 1.修改内容
// JS的写法
var p = document.getElementById("p1");
p.innerText = "我不是段落";
// JQ的写法
$("#p1").text("我不是段落1");
$("#p1").html("我就是段落2");
//2.JQ和JS相互转换
// JQ转JS $("#p1")是JQ的获取元素； .get([0])是将JQ转换为JS； innerText = "111"是使用JS方法。
$("#p1").get([0]).innerText = "111";
$("#p1")[1].innerText = "222";
// JS转JQ 先是JS的方法获取元素； $(p11)是将JS转换为JQ； text("123")是使用JQ方法。
var p11 = document.getElementById("p1");
$(p11).text("123");
//单击事件
// 如果不加下标，JQ可以同一时间给多个元素设置同一事件；下面代码会给选中的两个段落标签都设置单击事件；但是JS就不行，需要加下标！
// 如果只想选中段落标签里的某一个，那就加下标 .eq(下标) 加在获取元素之后。 即$("p")之后！
$("p").click(function () {
alert(456);
});
// 鼠标滑入滑出事件
$("#p1").hover(function () {
$("#p1").text(111);
}),function () { //如果只写第一个函数，就只是鼠标滑入事件；两个都写，就是滑入滑出事件。
$("#p1").text(222);
};
//追加和添加 注意：这是加到p1标签里面，是p1的子元素！！！
$("#p1").append("<p>111</p>"); //追加 后缀
$("#p1").prepend("<p>222</p>"); //添加 前缀
//前和后 注意：这里加之后是p1的同级标签，是p1的兄弟元素。
$("#p1").after("<p>333</p>");
$("#p1").before("<p>444</p>");
//清空 清空所选元素里面的所有东西（包括文本内容和标签）
$("div").empty();
//移除 清空所有，包括自己本身以及其内所有东西！
$("div").remove();
</script>
</body>
</html>
2.基本使用二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ的基本使用二</title>
<style>
div{
width: 1200px;
height: 1200px;
}
</style>
</head>
<body>
<div>
<p id="p1">我是段落1</p>
<p id="p2">我是段落2</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script src="JQuery.js"></script>
<script>
// 操作标签属性
// 第一部分：自定义属性
// 1.增加属性
$("div").attr("id","div1");
// 2.改变属性
$("div").attr("id","div2");
// 3.删除属性
$("div").removeAttr("id");
// 4.查
console.log($("div").attr("id"));
// 第二部分：合法属性
// 1.增加属性
$("div").addClass("div1");
// 要注意：常规的如果增加重复标签属性就是变相的改，但是此处不是改，仍然是增，一个class可以对应多个值！！！
$("div").addClass("div2");
// 2.修改属性 得先删然后增，变相的改！
$("div").removeClass("div1").addClass("div2");
// 3.删除属性
$("div").removeClass("div2");
// 查
console.log($("div").hasClass("div2"));
// 注意：如果只是删除属性，那么只是删除了属性对应的属性值，属性名还会存在
$("div").removeClass("div2"); //就像这样，删的不彻底哎，所以用下面的移除方法：
$("div").removeAttr("class"); //这样就删除的很彻底了！ 属性名也没了！
// 遍历
$("li").each(function () {
alert($(this).text()); //this代表当前元素。
});
//索引 获取当前文本的下标！
$("li").click(function () {
alert($(this).index());
});
//滚动条事件 scroll()里面写函数，当网页的滚动条发生变化时，执行其内的函数！
$(window).scroll(function () {
console.log("顶部："+$(document).scrollTop()); //弹出滚动条相对于浏览器顶部的偏移
console.log("左边："+$(document).scrollLeft()); //弹出滚动条相对于浏览器左边的偏移
})
</script>
</body>
</html>
3.基本使用三
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ的基本使用三</title>
<style>
div{
position: relative;
}
</style>
</head>
<body>
<div>
<p id="p1">我是段落1 </p>
<p id="p2">我是段落2 </p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<button id="btn1">移除事件</button>
</div>
<script src="JQuery.js"></script>
<script>
// 查找父元素
console.log($("#p1").parent()); //div
// 查找子元素
console.log($("div").children()); //p1 p2 ul
// 查找兄弟元素
console.log($("#p1").siblings()); //p2 ul
// 查找后代元素 必须要指明要查找的是哪个后代，不然查找不到哦！
console.log($("div").find("p")); //p1 p2
//查找祖先元素
console.log($("div").parents()); //body html
// 定位父级（绝对定位，参考对象是设置了定位的父级，没有即为浏览器） 当前元素距离它父级的位置，单位是px
var box = $("#p1").position(); //id为p1的标签的父级是div，而且我们给div设置了定位，所以绝对定位参考对象是div。
console.log(box.left); //0px
console.log(box.top); //-16px
//定位窗口 相对于当前文档偏移的坐标！ 注意：如果定位父级的父级没有设置定位，那么这两个定位效果一样！
var box1 = $("div").offset();
console.log(box1.left); //8
console.log(box1.top); //16
// 宽高
console.log($("div").width());
console.log($("div").height());
// 循环添加 添加的是事件
$("p").on("click",function () {
$(this).css("background-color","red"); //.css是JQ里设置样式的方法
});
//移除 移除的也是事件。注意：移除的是后续的事件。
//比如：下面是通过点击按钮移除上面的循环添加事件，在没有点击按钮之前事件可以执行，如果点击按钮，也只是后续事件，
//再点击按钮之后事件不能实现，但是之前实现的事件仍存在！
$("#btn1").click(function () {
$("p").pff("click");
})
</script>
</body>
</html>
第三部分：操作样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ操作样式</title>
</head>
<body>
<div>
<p id="p1">我是段落1 </p>
<p id="p2">我是段落2 </p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<button id="btn1">移除事件</button>
<button id="btn2">操作样式</button>
</div>
<script src="JQuery.js"></script>
<script>
// 单个样式的操作方法
$("#btn2").click(function () {
$("div").css("color","red");
});
// 多个样式的操作方法
$("btn2").click(function () {
$("div").css({
"width":300, //注意：不同样式间逗号隔开；宽高之类的默认单位是px，如果加px，需要双引号括住！！！
"height":400,
"border":"3px solid bule",
"color":"red"
})
})
</script>
</body>
</html>
第四部分：动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style>
div{
width: 300px;
height: 300px;
background-color: #ff25ec;
}
</style>
</head>
<body>
<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<div></div>
<script src="JQuery.js"></script>
<script>
//隐藏 隐藏，显示，向上隐藏，向下显示，取反都可在括号里加时间，单位是ms！
$("#btn1").click(function () {
$("div").hide();
});
//显示
$("#btn2").click(function () {
$("div").show();
});
// 向上隐藏
$("#btn1").click(function () {
$("div").slideUp();
$("div").slideToggle(); //取反，向上隐藏取反即是向下显示；同理：向下显示取反即是向上隐藏！！！
});
//向下显示
$("#btn2").click(function () {
$("div").slideDown();
});
//淡入
$("#btn1").click(function () {
$("div").fadeOut();
$("div").fadeToggle(1000); //取反，淡入取反即是淡出；淡出取反即是淡入！！！
});
//淡出
$("#btn2").click(function () {
$("div").fadeIn();
});
//自定义
$("#btn1").click(function () {
$("div").fadeTo(2000,0.1); //默认是全显示状态，即为1。可调节范围是：0到1。
});
$("#btn2").click(function () {
$("div").fadeTo(2000,0.8);
});
//动画
$("#btn1").click(function () {
$("div").animate({ //如果不给设置动画的元素设置定位，那这个元素默认是静态定位，设置动画只会进行元素本身的
width:500, //变化，如果想让元素发生移位，就需要给设置动画的元素设置定位！！！
height:500
},2000).delay(3000) //2000是以多长时间完成这个动画；
}); //delay是延迟，在动画途中如果执行停止，再继续执行这个事件，那么就会执行延迟！
//停止
$("#btn2").click(function () {
$("div").stop();
})
</script>
</body>
</html>
