JQuery的基本介绍

一.什么是 jQuery?

jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。
js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里即可。

二.jQuery 的使用

使用 jQuery 的步骤:
（1）引包

<script type="text/javascript" src="jquery-3.3.1.js"></script>

（2）入口函数

  $(document).ready(function(){})

（3）功能实现代码（事件处理）

$(document).ready(function(){
           ......//代码块
        })

三.Jquery的入口函数:

入口函数函数有三种写法:
(1)

       $(document).ready(function () {
           alert(1);
       })

(2)简单的写法

$(function () {
       alert(1);
   });

(3)

   $(window).ready(function () {
           alert(1);
       })

2.jQuery入口函数与js入口函数的区别：

区别一：书写个数不同：
Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。
jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。

区别二：执行时机不同：
Js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。
jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

文档加载的顺序：从上往下，边解析边执行。

四.Jquery中的$()和JQuery()理解:

首先看代码:

<script src="jquery-3.3.1.js"></script>
    <script>

        console.log($);
        console.log(jQuery);
        console.log($===jQuery);//打印结果为true
            </script>

从打印结果可以看出，$ 代表的就是 jQuery。
jQuery 里面的 $ 函数，根据传入参数的不同，进行不同的调用，实现不同的功能。返回的是jQuery对象。

五.js中的DOM对象 和 jQuery对象:

通过 jQuery 获取的元素是一个数组，数组中包含着原生JS中的DOM对象。
举例说明:

<div></div>
<div id=”app”></div>
<div class=”box”></div>
<div class=”box”></div>
<div></div

通过原生 js 获取这些元素节点的方式是：

  var myBox = document.getElementById("app");           //通过 id 获取单个元素
    var boxArr = document.getElementsByClassName("box");  //通过 class 获取的是伪数组
    var divArr = document.getElementsByTagName("div");    //通过标签获取的是伪数组

通过 jQuery 获取这些元素节点的方式是：（获取的都是数组）

2.DOM对象和JQuery对象可以相互转换的
(1) DOM 对象 转为 jQuery对象：

$(js对象);

(2)jQuery对象 转为 DOM 对象：

  jquery对象[index];      //方式1（推荐）
  jquery对象.get(index);  //方式2

jQuery对象转换成了 DOM 对象之后，可以直接调用 DOM 提供的一些功能。如：

$('div')[1].style.backgroundColor = 'yellow';
 $('div')[3].style.backgroundColor = 'green';

注意:jQuery 的两大特点(1)链式编程：比如.show()和.html()可以连写成.show().html()。(2)隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。