10.1 jQuery介绍及安装

作者: liufeisheng

创建时间: 2024-05-21 00:55:07

基本介绍

jQuery是一个非常流行且广泛使用的JavaScript库，由John Resig在2005年创建。它的设计宗旨是“Write Less, Do More”（写得更少，做得更多），意在通过提供一系列简洁、强大的API来简化Web开发中的JavaScript编程任务。以下是关于jQuery的一些关键点：

  • 简化DOM操作：jQuery极大地简化了对HTML文档对象模型（DOM）的操作，使得查找、修改和操作页面元素变得异常简单快捷。

  • 事件处理：它提供了一套统一的API来处理各种网页事件，如点击、鼠标悬停等，使得事件绑定和解绑工作变得高效且兼容性好。

  • 动画效果：jQuery内置了一系列方法来实现页面元素的动画效果，如淡入淡出（fadeIn/fadeOut）、滑动（slideDown/slideUp）和自定义动画，使得网页交互更加生动。

  • AJAX支持：jQuery简化了异步JavaScript和XML（AJAX）请求的编写，使得与服务器的无刷新数据交换变得轻松易行。

  • 兼容性：jQuery在设计时充分考虑了跨浏览器的兼容性问题，确保在不同浏览器上运行时的行为一致，包括对老旧浏览器如Internet Explorer的支持。

  • 链式操作：jQuery支持链式调用，允许开发者在一行代码内连续调用多个方法，使得代码更加紧凑和易读。

  • 插件丰富：拥有庞大的开发者社区，创建了大量的插件，几乎可以满足任何网页特效或功能需求，进一步扩展了jQuery的功能。

  • 核心函数 $：$ 是jQuery的别名，也是其核心函数，用于选择元素、执行方法和创建插件等，是使用jQuery的基础。

尽管随着现代浏览器对原生JavaScript API支持的增强，以及像Vue.js、React这样的前端框架的兴起，jQuery的使用有所减少，但它仍然是许多遗留系统和新项目中不可或缺的一部分，特别是在需要快速原型开发或与旧代码集成时。

javascript介绍

JavaScript库是预先编写好的JavaScript代码集合，它们为开发者提供了一系列实用功能，以便更高效地实现网页交互、数据处理、动画效果等。这些库封装了许多复杂的操作，使开发者能够以更简洁的方式完成任务，提高开发速度并减少错误。以下是一些知名的JavaScript库及其特点简介：

  1. React.js：
  2. 类型：用户界面库。

  3. 特点：由Facebook维护，用于构建组件化的用户界面。React采用虚拟DOM来优化性能，支持服务器端渲染，常与Redux等状态管理库配合使用。

  4. Angular：

  5. 类型：全功能框架。

  6. 特点：由Google支持，适合构建大型企业级应用。Angular是一个完整的解决方案，包含模板语法、依赖注入、模块化等特性，支持TypeScript开发。

  7. Vue.js：

  8. 类型：渐进式框架。

  9. 特点：易于上手，同时支持复杂应用的开发。Vue的核心库关注视图层，可与其他库或现有项目整合，也提供了路由、状态管理的官方解决方案。

  10. jQuery：

  11. 类型：通用JS库。

  12. 特点：已介绍过，重点在于简化DOM操作、事件处理、Ajax请求等，适合快速开发及兼容性要求高的项目。

  13. Lodash/Underscore.js：

  14. 类型：实用工具库。

  15. 特点：提供一系列函数来处理数组、对象、函数等，增强JavaScript原生能力，如遍历、过滤、映射等，提升代码的简洁性和效率。

  16. Axios：

  17. 类型：HTTP客户端库。

  18. 特点：用于浏览器和node.js中发起HTTP请求，支持Promise API，易于处理异步请求和响应。

  19. Moment.js / Day.js：

  20. 类型：日期时间处理库。

  21. 特点：简化日期和时间的解析、验证、 manipulation和显示。Day.js是Moment.js的轻量级替代，专为现代浏览器设计，体积更小。

  22. D3.js：

  23. 类型：数据可视化库。

  24. 特点：强大的数据驱动文档库，用于生成各种复杂的可交互的数据可视化图表，适用于Web端的数据展示和分析。

  25. Three.js：

  26. 类型：3D图形库。
  27. 特点：基于WebGL，使得在浏览器中创建和展示3D图形成为可能，适用于游戏、产品展示、数据可视化等领域。

这些库各有侧重，选择时应根据项目需求、团队熟悉度及生态系统的支持情况来决定。

jQuery如何获取及安装

jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等方面的操作。以下是获取及安装jQuery的步骤：

获取jQuery

  1. 从官方网站下载： 访问jquery.com/download/，你可以选择下载不同版本的jQuery。有两个主要版本可供选择：
  2. Production version（生产版本）：这是已经压缩过的版本，适用于实际部署的网站，文件较小，加载速度快。
  3. Development version（开发版本）：这个版本没有经过压缩，包含注释，便于阅读和调试，适用于开发环境。

image.png 2. 使用CDN： 为了简化流程，可以直接在HTML文件中通过内容分发网络（CDN）链接引入jQuery。这样可以减少服务器带宽消耗，并且由于CDN的全球分布，可以加快加载速度。常用的CDN链接包括： - Google CDN: html <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> - jQuery CDN: html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 请替换版本号以获取特定版本的jQuery。

安装到项目中

  1. 手动下载后引入： 如果从官网下载了jQuery文件，将下载的.js文件放到项目的相应目录下，然后在HTML文件的<head>部分通过<script>标签引入： ```html

`` 其中path/to/`应替换为实际的文件路径。

  1. 使用包管理器安装： 对于现代前端开发，通常使用包管理器如npm（Node.js包管理器）或yarn来安装jQuery：
  2. npm: 在命令行中运行： sh npm install jquery
  3. Yarn: 在命令行中运行： sh yarn add jquery 安装后，如果你使用的是模块打包工具（如webpack或rollup），可以通过ES6模块导入语句来使用jQuery： javascript import $ from 'jquery'; 或在非模块环境中（如通过