JS学习日记（jQuery库）

news2024/11/19 1:21:30

前言

今天先更新jQuery库的介绍，它是一个用来帮助快速开发的工具

介绍

jQuery是一个快速，小型且功能丰富的JavaScript库，jQuery设计宗旨是“write less，do more”，即倡导写更少的代码，做更多的事，它封装JavaScript常用的功能代码，提供一种简便的方式进行使用，大大提高了开发效率，jQuery目前支持的浏览器包括Chrome，edge，firefox，ie9+,Safari，Oper等。

jQuery的优势：

1.轻量级：jQuery非常轻巧，压缩后只有30kb

2.强大的选择器，jQuery支持css1.0到3.0的几乎所有选择器以及jQuery自定义的选择器

3.出色的DOM封装，jQuery封装了大量常用的DOM操作，开发者无需关心细节轻松上手使用

4.jQuery有着可靠的事件处理机制

5.出色的浏览器兼容

6.链式操作方式

7.丰富的插件支持

8.完善的文档

9.最重要的一点，它是开源的

搭建开发环境

工欲善其事，必先利其器，我们先学会如何搭建jQuery的开发环境，首先，它并不需要安装，只需把jQuery文件放在网站上一个公共的位置，在页面使用时，直接通过script标签进行引入

jQuery获取方法：

1.官网下载

2.使用CDN的形式载入jQuery

jQuery官网：http://jquery.com/

后续就是一点开发版（未压缩）和发布版（有压缩）的区别了，这里没有太大区别，这里就不过多赘述

CDN方式

如果不希望下载jQuery，则可以使用CDN的方式载入jQuery：

Google CDN：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

jQuery官方CDN:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

百度：

<script src="https://apps.bdimg.com/libs/jquery/3.6.0/jquery.min.js"></script>

阿里云CDN:

<script src="https://lib.aliyun.com/js/jquery-3.6.0.min.js"></script>

在HTML中引入jQuery

将选定的CDN链接添加到HTML文件的<head>或<body>标签中。通常建议在<head>标签中引入，以便在页面加载时尽早加载jQuery：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery CDN</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- 其他头部内容 -->
</head>
<body>
    <!-- 页面内容 -->
    <script>
        $(document).ready(function(){
            // 在这里编写使用jQuery的代码
            console.log("jQuery已加载，版本：" + $.fn.jquery);
        });
    </script>
</body>
</html>

注意事项

版本选择: 根据项目需求选择合适的jQuery版本。较新的版本通常包含更多功能和更好的性能，但可能不兼容旧浏览器。
缓存策略: 使用CDN可以提高加载速度，因为许多用户可能已经缓存了相同的jQuery文件。
安全性: 确保从可信的CDN提供商获取jQuery文件，以避免潜在的安全风险

webAPI与jQuery的区别

1. jQuery的适用性

简化DOM操作和事件处理：
- jQuery在早期Web开发中非常流行，因为它简化了复杂的JavaScript操作，如DOM选择、事件处理和动画效果。这使得开发者能够更快速地构建动态网页。
- 然而，现代JavaScript（ES6及以上版本）已经引入了许多新特性，如querySelector、addEventListener、fetch等，这些功能在很大程度上替代了jQuery的核心功能。
浏览器兼容性：
- jQuery的一个重要优势是其跨浏览器的兼容性，解决了不同浏览器之间的兼容性问题。然而，现代浏览器对JavaScript的支持已经非常完善，许多jQuery的功能在原生JavaScript中也能很好地工作。
社区和生态系统：
- 尽管jQuery仍然有庞大的用户基础和丰富的插件生态系统，但近年来，许多开发者转向使用更现代的框架和库（如React、Vue.js、Angular等），这使得jQuery的社区活跃度有所下降。
适用场景：
- 如果项目需要快速开发简单的网页应用，或者需要兼容非常旧的浏览器，jQuery仍然是一个不错的选择。
- 然而，对于大型、复杂的单页应用（SPA），jQuery可能显得力不从心。

2. Web API的适用性

构建RESTful服务：
- Web API主要用于构建RESTful服务，提供数据接口供前端应用调用。它是前后端分离架构的核心部分。
- 现代Web应用通常采用前后端分离的模式，前端使用JavaScript框架（如React、Vue.js）构建用户界面，后端通过Web API提供数据服务。
跨平台和跨语言支持：
- Web API基于HTTP协议，使用JSON或XML格式进行数据传输，具有良好的跨平台和跨语言支持。这使得Web API可以轻松地与其他系统和服务集成。
可扩展性和维护性：
- Web API具有良好的可扩展性和维护性。通过定义清晰的接口规范，可以方便地扩展功能和维护代码。
- 使用Web API可以更好地组织代码结构，提高开发效率和代码质量。
适用场景：
- 对于需要构建复杂、动态的Web应用，特别是需要与多个服务或系统集成的应用，Web API是必不可少的。
- 现代Web开发中，Web API广泛应用于单页应用（SPA）、移动应用、桌面应用等场景。

3. 比较与选择

功能定位不同：
- jQuery是一个前端库，专注于简化JavaScript开发；而Web API是一个后端工具，用于构建数据接口。
- 两者在功能和应用场景上有明显的区别，不能直接比较谁更“适合”现代Web开发，因为它们解决的问题不同。
现代开发趋势：
- 现代Web开发越来越倾向于前后端分离的架构，前端使用JavaScript框架（如React、Vue.js）构建用户界面，后端通过Web API提供数据服务。
- 在这种架构下，Web API是不可或缺的，而jQuery的使用则逐渐减少。
选择建议：
- 如果项目需要构建复杂、动态的Web应用，特别是需要前后端分离的架构，建议使用Web API来构建后端服务。
- 如果项目需要快速开发简单的网页应用，或者需要兼容非常旧的浏览器，可以考虑使用jQuery。
- 对于大多数现代Web开发项目，建议使用更现代的JavaScript框架（如React、Vue.js）和Web API来构建应用。