在网页中包含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>
输出:
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库文件都在同一个文件夹中。