前端基础之jQuery引入

news/发布时间2024/5/13 6:51:09

一、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的优势

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

二、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)