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

在一个页面上包含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的方法都有哪些?

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程