在页面上包含 jQuery 的所有方法是什么？

在本文中，我们将探讨将 jQuery 添加到网页的方法。 jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档，或者更准确地说是文档对象模型 (DOM) 和 JavaScript 之间的交互。详细说明这些术语，jQuery 简化了 HTML 文档遍历和操作、浏览器事件处理、DOM 动画、Ajax 交互和跨浏览器 JavaScript 开发。

方法一：下载jQuery库

第 1 步：我们需要下载 jQuery 库的开发版本，我们将用于开发和测试目的。点击下面的下载链接。您将被重定向到 jQuery 文件的确切页面，现在右键单击该页面并将文件保存在本地存储中。

第 2 步：创建一个 HTML 文件并 在 HTML 文件的 标记部分内的

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

HTML

  

    
    

  

    Using jQuery by downloading it.

  

输出：

方法二：通过 CDN 使用 jQuery：与之前的方法相比，这种方法非常容易使用。我们只需要将以下代码粘贴到 HTML 文件的头部。

现在让我们了解什么是 CDN，它代表内容交付网络，它是一个全球分布的多个 Web 服务的服务器组，可提供快速交付的互联网内容。因此，CDN 包含特定 Web 服务的所有基本信息，因此任何用户都可以在全球范围内随时随地使用它。对于我们的案例，我们将使用 jQuery 的 CDN，为了将 jQuery 与 CDN 一起使用，我们必须连接到网络，因为它是基于在线的服务。

示例：在此示例中，我们将使用 CDN 链接将 jQuery 包含到我们的网页中。

HTML

  

  
    
    
    

  

    GeeksforGeeks

  

输出：

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

句法：

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

示例 1：在本示例中，我们不会通过任何一种方法有意添加 jQuery，而是使用上面的代码检查 jQuery。在输出图像中，我们可以清楚地看到它检测到 jQuery 没有加载。

HTML

  

    

  

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

  

输出：

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

HTML

  

    
    

  

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

  

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

示例 3：现在在这个示例中，我们将检查页面上的 jQuery。如果 jQuery 已加载，那很好，但是，如果它没有加载，那么我们会将 jQuery 库添加到页面中。

HTML

  


  

    Add
    Check
  
    
        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 availablity 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");
            }
        }
    

  

输出：