1.关于jQuery
jQuery是一种快速简洁的JavaScript代码库，用最少的代码，做最多的事 即“write less,do more”。jQuery具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件，除了它自己的插件，你也可以给它写插件，都说人与动物最大的区别是会制造工具，一个有技术的程序员也应该具备造程序工具的能力。
2.jQuery库的引入
既然jQuery是一个代码库 ，所以在使用之前当然是需要把文件引入啦，它的链接方式也就是js问的引入方式。并且应该在jQuery代码之前，也应在插件文件文件引入之前，实在担心这种问题，可以把jQuery代码包含在加载页面完成函数里即可。
<!--引入jQuery库文件-->
<script type="text/javascript" src="/Jquery-01/lib/jquery-3.2.1.js" ></script>
<!--引入jQuery库插件文件，要在库文件之后-->
<script type="text/javascript" src="/Jquery-01/lib/jquery.easing.1.3.js" ></script>
<script>
//等页面资源全部加载完后执行，这里主要除了标签选择器，还有图片等所有资源
$(window).ready(function(){ })
//等dom资源全部加载完后执行，这里主要是指标签选择器，
//其中 $(document).ready(function(){ }) 与 $(function(){}) 等价
$(document).ready(function(){ })
</script>
在引入jQuery库，特别注意的是路径
(1)相对路径：
js/jquery-3.2.1.js 相对于当前html文件来说
../ 当前html文件 的上一级目录
./ 代表当前html文件 所在目录
(2)绝对路径:
/js/jquery-3.2.1.js / 代表服务器根目录
例如在 HBuilder 服务器中：
http://127.0.0.1:8020
http://www.baidu.com/1.jpg
c:/1.jpg(少用)
我在书写js代码有一个习惯，将js写在</body>之前，即在body所有元素之后，可以省去很多麻烦。
3.write less,do more
//获取或修改css样式,如改变多个div颜色
//获取或修改css样式,如改变多个div颜色
//js代码
var oDiv=document.getElementsByTagName("div");
for (var i = 0; i < oDiv.length; i++) {
console.log("nijj")
oDiv[i].style.background="red";
}
//代码
$("div").css({background:"red"});
诸如此类的例子数不胜数，所以一个工具被选中，不是没有原因的。
4常用方法总结
还记得当初封装动画的代码，飞了很大的劲，而在jQuery库，却是一件积极简单的事情，毕竟是制造跟使用的区别，但不可否认的是，封装的过程帮助我们深入理解，特别是对于我这种喜欢转牛角尖的人儿来说，啊哈哈哈。何况学习不仅是学习知识，更重要的是掌握方法嘛。
//$()是一个函数，所以有打点的方式
//特别说明的是，jQuery的很多方法属性都跟js差别不大，就是多了一个$符号，以及点击事件中少了on等小变化。
//1.动画
$(".BOX").animate({"left":500,"top":200} , 2000, "easeInQuad",function(){}）
// 对象 动画目标 动画时间 动画方式 回调函数
//与js；类似，也有this，不过要加上$符号，即$(this).
//2.滚动+点击事件
$(document).scroll(function(){
var y=$(document).scrollTop();
$("#box").animate({"top":y+200})
$(document).click(function(){
$(document).scrollTop("0");
});
})
//3.定时器：不意外 定时器的使用也照旧
$(function(){
setInterval(move,3000);
function move({$("#box").animate({"left":500,"top":200},2000, "easeInQuad",function(){
$("#box").animate({"left":0,"top":0},1000);
});
})
})
//4.隐藏、显示事件,返回值是div1这个物体，所以可以类似地使用链式方式访问，实现一个不断反复显示隐藏的效果.
$("#div1").hide();
$("#div1").show();
$("#div1").show().hide().show().hide();
end.
