在一个页面上包含jQuery的方法都有哪些

在这篇文章中，我们将探讨如何将jQuery添加到网页中。jQuery是一个开源的JavaScript库，它简化了HTML/CSS文档，或者更准确地说，文档对象模型（DOM）和JavaScript之间的互动。阐述这些术语，jQuery简化了HTML文档的遍历和操作，浏览器事件处理，DOM动画，Ajax交互，以及跨浏览器的JavaScript开发。

方法1：下载jQuery库。

第1步：我们需要下载jQuery库的开发版本，我们将用于开发和测试目的。点击下面的下载链接。你会被转到jQuery文件的确切页面，现在在页面上点击右键，将文件保存在本地存储。

第2步：创建一个HTML文件和，并声明jQuery的文件路径。 <script>标签在HTML文件的<head>标签部分。注意，jQuery文件必须放在工作区里面。

<script src="jquery-3.6.0.min.js"></script>

例子：下载jQuery文件后将其添加到网页中。

<!DOCTYPE html>
<html>
 
<head>
    <script src="jquery-3.6.0.min.js">
    </script>
</head>
 
<body>
    <h1>Using jQuery by downloading it.</h1>
</body>
 
</html>

输出:

在一个页面上包含jQuery的方法都有哪些？

方法2：通过CDN使用jQuery：与前面的方法相比，这个方法相当容易使用。我们只需将以下代码粘贴到HTML文件的标题部分。

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

现在让我们来了解一下什么是CDN，它是内容交付网络的缩写，它是由几个网络服务的服务器组成的全球分布式小组，提供快速交付的互联网内容。因此，CDN包含了所有特定网络服务的基本信息，以便任何用户可以在全球范围内随时使用它。在我们的案例中，我们将使用jQuery的CDN，为了使用jQuery的CDN，我们必须连接到网络上，因为它是一个基于在线的服务。

例子：在这个例子中，我们将使用CDN链接来包括jQuery到我们的网页。

<!DOCTYPE html>
<html>
 
<head>
 
    <!--jQuery CDN link-->
    <script src="
https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
</head>
 
<body>
    <p>GeeksforGeeks</p>
</body>
 
</html>

输出:

在一个页面上包含jQuery的方法都有哪些？

我们上面讨论的方法都是关于在页面中包含jQuery的方法。现在我们将做一些检查，以确定jQuery是否被加载。我们将看到一些具有适当输出的例子，以便用户能够清楚地了解它们。下面这段代码将检查jQuery是否被加载到我们的页面上。我们将把这段代码添加到我们的页面。

语法:

window.onload = function () {
  if (window.jQuery) {
    alert("jQuery is loaded.");
  } else {
    alert("jQuery is not loaded.");
  }
};

例子1：在这个例子中，我们不会通过任何一个方法故意添加jQuery，并使用上述代码检查jQuery。在输出的图片中，我们可以清楚地看到，它检测到jQuery没有被加载。

<!DOCTYPE html>
<html>
 
<head>
    <script src="jquery-3.6.0.min.js"></script>
</head>
 
<body>
    <script>
        window.onload = function () {
            if (window.jQuery) {
 
                alert("jQuery is loaded.");
            } else {
 
                alert("jQuery is not loaded.");
            }
        };
    </script>
</body>
 
</html>

输出:

在一个页面上包含jQuery的方法都有哪些？

例子2：在这个例子中，我们将看到，在添加jQuery到页面后，它将检测到页面中的jQuery。

<!DOCTYPE html>
<html>
 
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
</head>
 
<body>
    <script>
        window.onload = function () {
            if (window.jQuery) {
 
                alert("jQuery is loaded.");
            } else {
 
                alert("jQuery is not loaded.");
            }
        };
    </script>
</body>
 
</html>

输出：我们可以看到，它检测到页面上包含jQuery。

在一个页面上包含jQuery的方法都有哪些？

例子3：在这个例子中，我们将检查页面上是否有jQuery。如果jQuery已经加载，那么就很好，但是，如果它没有加载，那么我们将把jQuery库添加到页面上。

<!DOCTYPE html>
<html>
 
<!--jQuery CDN link-->
<!-- Initially we haven't added the jQuery CDN link -->
 
<body>
    <button onclick="addJQuery()">Add</button>
    <button onclick="check()">Check</button>
 
    <script>
        function check() {
            if (window.jQuery) {
 
                // jQuery is included in the page
                alert("jQuery is loaded");
            } else {
 
                // jQuery is not included in the page
                alert("jQuery is not Loaded, click "
                    + "add button to add jQuery");
            }
        };
 
        function addJQuery() {
 
            // When we click the add button it will
            // check for availability of jQuery
            if (window.jQuery) {
                alert("jQuery already loaded!");
            } else {
 
                // If its not present then these code
                // will add jQuery to the page
                var script = document.createElement("script");
                script.type = "text/javascript";
                script.src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js";
 
                document.getElementsByTagName("head")[0]
                            .appendChild(script);
                             
                alert("now jQuery is loaded");
            }
        }
    </script>
</body>
 
</html>

输出:

在一个页面上包含jQuery的方法都有哪些？