jQuery 教程_jquery引入使用-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_56706777/article/details/145928116

一、jQuery 简介

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画效果和 AJAX 交互等操作。通过使用 jQuery，开发者可以用更少的代码实现更多的功能，提高开发效率。

优点

简洁的语法：提供了简洁的选择器和链式调用，使代码更易读和维护。
跨浏览器兼容性：解决了不同浏览器之间的兼容性问题，开发者无需担心在不同浏览器中代码的表现差异。
丰富的插件：拥有大量的插件，可以快速实现各种功能，如表单验证、图片轮播等。

二、jQuery 的引入

本地引入

从 jQuery 官方网站下载 jQuery 文件，有压缩版（用于生产环境）和未压缩版（用于开发环境）可供选择。
将下载的文件放在项目的合适目录下，然后在 HTML 文件中通过 <script> 标签引入：

收起

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入 jQuery</title>
    <!-- 引入本地 jQuery 文件 -->
    <script src="path/to/jquery.min.js"></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

CDN 引入

CDN（内容分发网络）可以提供更快的加载速度，并且用户可能已经在其他网站上缓存了该文件。可以使用以下方式引入 jQuery：

收起

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入 jQuery</title>
    <!-- 引入 CDN 上的 jQuery 文件 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

三、jQuery 基本语法

选择器

jQuery 选择器用于选取 HTML 元素，其语法与 CSS 选择器类似。

元素选择器

选取所有的 <p> 元素：

收起

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素选