如何在你的项目中使用一个jQuery库

在这篇文章中，我们将看到如何在一个项目中使用jQuery库。有两种方法可以在项目中添加jQuery库，它们是

包括来自CDN链接的jQuery库
从官方网站下载jQuery库

从CDN链接中包含jQuery库： CDN代表内容交付网络，基本上是一组用于存储和交付数据的服务器。基本上，这些jQuery库文件已经被上传到各种CDN，我们可以直接在我们的网页上使用它们。然后，我们不需要在我们的本地机器上下载任何文件。

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

我们可以看到 “src “属性中的CDN链接。我们已经成功地将jQuery添加到我们的网页中。我们可以在我们的页面上使用jQuery的所有功能。在加载页面时，浏览器会自动从CDN链接中下载jQuery库文件。

示例:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
 
    <!-- Including jQuery -->
    <script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
</head>
 
<body style="text-align: center;">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <h3>
        Include jQuery library from CDN link
    </h3>
 
    <h2>Welcome to GeeksforGeeks</h2>
 
    <button id="id_attr">Add Style</button>
 
    <script>
        (document).ready(function() {
            ('#id_attr').click(function() {
                $('h2').css("color", "green");
            });
        });
    </script>
</body>
 
</html>

输出:

如何在你的项目中使用一个jQuery库？

下载jQuery库：在这一部分，首先我们从可下载的链接中下载jQuery库。下载完文件后，我们将以这种方式把下载的文件添加到我们的网页上。

<script src=”file_name_with_full_path”></script>

示例:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
 
    <!-- Including jQuery -->
    <script src="jquery-3.6.0.js">
    </script>
</head>
 
<body style="text-align: center;">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <h3>
        Download the jQuery library
    </h3>
 
    <h2>Welcome to GeeksforGeeks</h2>
 
    <button id="id_attr">Add Style</button>
 
    <script>
        (document).ready(function() {
            ('#id_attr').click(function() {
                $('h2').css("color", "green");
            });
        });
    </script>
</body>
 
</html>