在网页中包含jQuery的不同方法

在网页中包含jQuery的不同方法

在这篇文章中,我们将学习在一个页面上包含jQuery的不同方法。基本上,我们知道jQuery有很多令人兴奋的功能。因此,如果我们想使用这些功能,我们只需要将jQuery库添加到我们的网页上。

有两种方法可以将jQuery库添加到我们的网页上。

  • 包括来自CDN(内容交付网络)的jQuery
  • 从官方网站下载jQuery库

1.从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库文件。

例子1:在这个例子中,我们将添加jQuery CDN链接来执行jQuery代码。

<!DOCTYPE html>
<html>
  
<head>
    <!-- jQuery library -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
</head>
  
<body>
    <p></p>
      
    <script>
        $('p').text('Hello geeks. CDN Working');
    </script>
</body>
  
</html>

输出:

在网页中包含jQuery的不同方法

2.下载jQuery库:通过这种方式,我们将把jQuery库添加到我们的页面。首先,我们将从jQuery网站下载jQuery库文件到我们的本地主机。下载完成后,我们将以这种方式把下载的文件添加到我们的网页中。

<script src="file_name_with_full_path"></script>

例子2:在这个例子中,我们将从下载的路径中添加jQuery链接来执行jQuery代码。

<!DOCTYPE html>
<html>
  
<head>
    <!-- jQuery library -->
    <script src="jquery-3.6.0.js"></script>
</head>
  
<body>
    <p></p>
      
    <script>
        $('p').text('Hello geeks. Downloaded files');
    </script>
</body>
  
</html>

输出:

在网页中包含jQuery的不同方法

在上述案例中,网页和jQuery库文件都在同一个文件夹中。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程