html如何调用外部jquery-猿码集

1. 引入jQuery文件

在使用jQuery之前，我们需要在HTML文档中引入jQuery文件。可以通过以下两种方式来引入jQuery文件：

1.1 通过CDN引入jQuery文件

这是最简单的方法之一，它允许我们在HTML文件中直接引用jQuery的CDN链接，如下所示：

 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

这是从BootstrapCDN引用的jQuery库。我们可以使用任何CDN链接，包括Google的CDN链接。

1.2 下载jQuery文件

我们可以从jQuery的官方网站下载jQuery文件。下载下来的文件通常是压缩过的，其中包括一个带有.min.js扩展名的文件，以及一个未压缩的文件。

下载下来后，我们可以将这些文件存放在项目文件夹中的一个合适位置，然后在HTML文档中引用它们，如下所示：

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

2. $和jQuery的区别

在jQuery中，$符号和jQuery是等价的，使用它们之间没有差别。但是，在某些情况下，我们可能会遇到与其他库中使用的$符号混淆的情况。

为了避免这种情况，jQuery允许我们使用一个没有冲突的简写符号代替$符号。为此，我们可以使用jQuery.noConflict()函数，它将返回一个jq变量，该变量可以代替$符号。下面是一个例子：

 <script src="jquery.min.js"></script>
 <script>
     var jq = jQuery.noConflict();
     jq(document).ready(function() {
         //我们现在可以使用jq变量代替$符号 
         jq("p").click(function() {
             jq(this).hide();
         });
     });
 </script>

在上面的代码中，我们使用了noConflict函数来定义了一个新的简写符号，代替了标准的$符号。

3. 如何使用jQuery

现在，我们已经成功引入了jQuery，接下来，我们将讨论如何使用jQuery来执行一些常见的JavaScript任务。

在讨论之前，我们需要知道一个有关jQuery的重要事实：jQuery是一个函数库。它提供了许多函数，可以通过调用它们进行操作，如修改HTML或CSS、处理事件、发送AJAX请求等等。

3.1 在页面加载完成后执行函数

当页面加载完成后，我们经常需要执行一些函数。我们可以使用jQuery的.ready()函数，在文档加载完成后执行函数。

例如，我们想隐藏页面上的所有段落。那么可以使用以下代码：

 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
 <script>
     jQuery(document).ready(function($) {
         $("p").hide();  //隐藏所有段落
     });
 </script>

在上面的代码中，我们在jQuery函数中使用了一个$符号，这样我们可以使用简单的$符号来访问jQuery函数，而不用写冗长的jQuery()函数，这样变得更加可读。

3.2 显示和隐藏元素

我们可以使用.show()和.hide()函数来显示或隐藏任何元素。例如，以下代码将隐藏所有段落：

 <script>
     $("p").hide();//隐藏所有段落
 </script>

这段代码可以放在jQuery的.ready()函数里面，当页面加载完成时执行。

此外，我们可以使用.toggle()函数来切换元素的显示或隐藏状态。例如，以下代码将切换ID为para的段落的显示或隐藏状态：

 <script>
     $("#para").toggle(); //切换ID为para的段落的显示或隐藏状态
 </script>

3.3 修改CSS属性

我们可以使用.css()函数来修改CSS属性。例如，以下代码将ID为para的段落文本变为红色，背景色变为浅灰色：

 <script>
     $("#para").css({"color": "red", "background-color": "lightgray"});//修改CSS属性
 </script>

3.4 处理事件

jQuery使用.on()函数来处理事件。以下代码示例将在单击按钮时显示文本：

 <script>
     $("button").on("click", function() {
         $("p").show();
     });
 </script>

在上面的代码中，我们使用.on()函数来处理按钮的单击事件。当按钮被单击时，我们显示所有段落。

4. 总结

在本文中，我们讨论了如何引用和使用jQuery，如何通过使用.ready()函数执行函数，如何使用.show()、.hide()和.toggle()函数来显示和隐藏元素，如何使用.css()函数来修改CSS属性，以及如何使用.on()函数处理事件。

jQuery是一个非常流行和强大的JavaScript库，它可以简化与HTML文档和CSS样式相关的各种任务。我们希望该文能够为您介绍一些基本的jQuery编程概念，帮助您更好地开始使用这个强大的工具。

html如何调用外部jquery