一、jQuery介绍

（1）JavaScript库

JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。

简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。

比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。

常见的JavaScript库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等，这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，我们主要学习的是 jQuery。

（2）jQuery的概念

jQuery是一个快速、简洁的JavaScript框架，它封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

• jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

• 它具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

• 同时，jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

（3）jQuery的优势

1. 轻量级。核心文件才几十kb，不会影响页面加载速度。
2. 跨浏览器兼容，基本兼容了现在主流的浏览器。
3. 链式编程、隐式迭代。
4. 对事件、样式、动画支持，大大简化了DOM操作。
5. 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。
6. 免费、开源。

二、jQuery的基本使用

（1）jQuery的下载

类似于python中的模块，在前端技术不叫模块，叫 “类库”

• 官网下载：Download jQuery | jQuery

  • 中文文档：jQuery API中文文档

• 引入cdn链接：jquery (v3.7.1)

  • 缺点：必须联网，而且链接有时候会失效

（2）版本介绍

• 1.x ：兼容 IE 678 等低版本浏览器， 官网不再更新

• 2.x ：不兼容 IE 678 等低版本浏览器， 官网不再更新

• 3.x ：不兼容 IE 678 等低版本浏览器， 是官方主要更新维护的版本

（3）官网下载使用

• 点击上方官网链接

Download the compressed, production jQuery 3.6.4, 就是压缩过的

• 点击上方箭头，然后得到下方图片上显示的源码，右击另存为，保存到本地。

• 保存到本地所形成的js文件

（4）html页面导入类库文件使用

• 将类库文件保存在项目目录中，并在 HTML 文件中使用<script>标签来导入类库文件。

• 在<script>标签中，使用src属性指定类库文件的路径，让浏览器能够加载并执行该文件。

  // 方式一 ： src指向本地文件
  <script src="path/to/jquery-3.7.1.min.js"></script>
  
  // 方式二 ： src直接指向引入的cdn链接
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  

  这样，当浏览器解析到这两个中任意一个<script>标签时，就会下载并执行对应的类库文件。

（5）jQuery的入口函数

• 一旦类库文件被加载和执行，就可以使用其中提供的功能了。

• 通常，类库会扩展或增强原生 JavaScript 的功能，通过在页面中引入类库文件，我们可以使用类库提供的函数、方法或特性。

  // 第一种: 简单易用。
  $(function () {   
      ...  // 此处是页面 DOM 加载完成的入口
  }) ; 
  
      
  // 第二种: 繁琐，但是也可以实现
  $(document).ready(function(){
     // 在文档加载完成后执行一些代码
    // 使用类库提供的函数或方法
  });
  

• 上述代码示例中，$符号是 jQuery 的别名，通过调用.ready()方法，我们可以确保在文档加载完成后执行传入的函数。

（6）总结

• 总结起来，导入 jQuery 类库涉及获取类库文件、在 HTML 文件中导入类库文件，并通过调用类库提供的功能来实现对页面元素的操作、动态加载和事件处理等功能。

三、jQuery对象和DOM对象

（1）jQuery中的顶级对象$

$是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $ 。

$是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

（2）DOM 对象（标签对象）

• DOM（文档对象模型）是浏览器提供的一种接口，用于操作网页的结构。每个 HTML 元素都是一个 DOM 对象，可以通过 JavaScript 来访问和操作。
• 通过原生 JavaScript 可以使用 DOM 方法和属性来操作页面元素，例如 document.getElementById()、element.innerHTML 等。

（3）jQuery对象

• jQuery 对象是由 jQuery 库封装的对象，用于简化对 DOM 元素的操作。当你使用 jQuery 选择器选取一个或多个元素时，返回的就是 jQuery 对象。
• jQuery 对象具有 jQuery 提供的方法，可以方便地对选取的元素进行操作，如添加类、修改内容、绑定事件等。

（4）转换关系（重要）

• 可以通过 jQuery() 或 $() 函数将 DOM 对象转换为 jQuery 对象，这样就可以使用 jQuery 提供的方法来操作这些 DOM 元素。
• 例如，可以使用 $(document) 或 $(element) 将 DOM 对象转换为 jQuery 对象，然后就可以使用 jQuery 的方法来操作这些对象。

// 1.DOM对象转换成jQuery对象，方法只有一种
var box = document.getElementById('box');  // 获取DOM对象
var jQueryObject = $(box);  // 把DOM对象转换为 jQuery 对象


// 2.jQuery 对象转换为 DOM 对象有两种方法：
//   2.1 jQuery对象[索引值]
var domObject1 = $('div')[0]

//   2.2 jQuery对象.get(索引值)
var domObject2 = $('div').get(0)

（5）区别

• 最大的区别在于操作的便利性和方法的丰富性。jQuery 对象提供了更多实用的方法和功能，能够简化开发过程。
• 另外，jQuery 对象是由 jQuery 库创建的对象，而 DOM 对象是浏览器原生提供的对象。

（6）总结

使用 jQuery 方法和原生JS获取的元素是不一样的，总结如下 :

• 用原生 JS 获取来的对象就是 DOM 对象。

• jQuery 方法获取的元素就是 jQuery 对象。

• jQuery 对象本质是： 利用 $ 对DOM 对象包装后产生的对象（伪数组形式存储）。

注意：只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。

总的来说，jQuery 对象是对 DOM 对象的封装和扩展，提供了更便捷的方法和功能来操作页面元素，使前端开发更加高效和简单。在实际开发中，可以根据需求选择使用原生 JavaScript 操作 DOM 对象或者使用 jQuery 操作 jQuery 对象。