jQuery

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.