JQuery一款优秀的Javascript库
能让我们对HTML文档便利和操作、时间处理、动画以及Ajax变得更加简单

如何使用JQuery？

1. 不用下载直接引用：

<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>

2. 先下载JQuery库到本地目录，然后引用下载的库

jQuery与JavaScript入口函数加载模式对比

1. 原生JS和jQuery入口函数的加载模式不同

原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行

<script>
window.onload = function (ev) {
   // 1.通过原生的JS入口函数可以拿到DOM元素
    var images = document.getElementsByTagName("images")[0];
    console.log(images);//能显示图片
   // 2.通过原生的JS入口函数可以拿到DOM元素的宽高
    var width = window.getComputedStyle(images).width;
    console.log("onload", width);//能正确显示图片的宽
 }
</script>

jQuery会等到DOM元素加载完毕,但**不会**等到图片也加载完毕就会执行

<script>
$(document).ready(function () {
   //通过jQuery入口函数可以拿到DOM元素
    var $images = $("images");
    console.log($images);//能显示图片
    //通过jQuery入口函数不可以拿到DOM元素的宽高
    var $width = $images.width();
    console.log("ready",$width);//不能正确显示图片的宽高
});
</script>

2. 覆盖问题

   原生的JavaScript如果编写了多个入口函数，后面编写的会覆盖前面编写的

   <script>
           window.onload = function () {
               alert("hello lnj1"); // 不会显示
           }
           window.onload = function () {
               alert("hello lnj2"); // 会显示
           }
   </script>
   

   jQuery中编写多个入口函数后面编写的不会覆盖前面编写的

   <script>
           $(document).ready(function () {
               alert("hello lnj1"); //会显示
           });
           $(document).ready(function () {
               alert("hello lnj2"); // 会显示
           });
   </script>
   

   
   

入口函数的写法

1. $(document).ready(function () { });
2. jQuery(document).ready(function () { });
3. $(function () { });（推荐）
4. jQuery(function () { });

$符号冲突问题

解决方法：

1. 释放$的使用权

   写法：jQuery.noConflict();
   注意：释放操作必须在编写其他jQuery代码之前编写
   释放之后就不能再使用$，改用jQuery

2. 自定义一个访问符号
   写法：var nj = jQuery.noConflict();
   然后nj就可以类似于$那样用了

jQuery核心函数

$();代表调用jQuery的核心函数

1. jQuery(callback)
   当DOM加载完成后执行传入的回调函数

   <script>
           $(function () {
               alert("123");
           });
   </script>
   

2. jQuery([sel,[context]])
   接收一个包含CSS选择器的字符串，然后用这个字符串去匹配一组元素，并包装成jQuery对象

   <script>
           $(function () {
               // 利用jquery获取所有div,得到的是一个jQuery对象
               var $box = $("div");
               console.log($box);
   
               // 利用js原生语法获取所有div,得到的是一个js对象
               var box = document.getElementsByTagName("div");
               console.log(box);
           });
   </script>
   

   原生JS对象和jQuery对象相互转换

   <script>
           $(function () {
               var $box = $("#box");
   //            $box.text("新的数据");
   //            jQuery对象不能使用原生js对象的方法
   //            $box.innerText = "新的数据";
   //            将jQuery对象转换为原生js对象
   //            注意: 不是eq(0),eq函数返回的是jQuery类型对象,get函数返回的是原生类型对象
   //            var box = $box.get(0);
               var box = $box[0];
               box.innerText = "新的数据";
   
               var box2 = document.getElementById("box");
   //            原生js对象不能使用jQuery对象的方法
   //            box2.text("新的数据2");
   //            原生js对象只能使用原生的js方法
   //            box2.innerText = "新的数据2";
   
   //            将原生js对象转换为jQuery对象
               var $box2 = $(box);
              $box2.text("新的数据2");
           });
   </script>
   

3. jQuery(html,[ownerDoc])
   根据HTML标记字符串，动态创建DOM元素

   <script>
           $(function () {
               var $eles = $("<p>我是span</p><u>我是u</u>");
               // 无论是jQuery找到的还是创建的,我们最终拿到的永远都是jQuery对象
               console.log($eles);
               // 将创建好的DOM元素添加到body中
               $("body").append($eles);
           });
   </script>