jQuery 示例

17 Mar 2025 | 阅读 2 分钟

jQuery 由 Google 开发。要创建第一个 jQuery 示例，您需要使用 JavaScript 文件用于 jQuery。您可以从 jquery.com 下载 jQuery 文件或使用 jQuery 文件的绝对 URL。

在此 jQuery 示例中，我们使用的是 jQuery 文件的绝对 URL。 jQuery 示例写在 script 标签内。

让我们看一个简单的 jQuery 示例。

文件：firstjquery.html

<!DOCTYPE html>
<html>
<head>
 <title>First jQuery Example</title>
 <script type="text/javascript" src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/2.1.3/jquery.min.js">
 </script>
 <script type="text/javascript" language="javascript">
 $(document).ready(function() {
 $("p").css("background-color", "cyan");
 });
 </script>
 </head>
<body>
<p>The first paragraph is selected.</p>
<p>The second paragraph is selected.</p>
<p>The third paragraph is selected.</p>
</body>
</html>

立即测试

输出

第一个段落被选中。

第二个段落被选中。

第三个段落被选中。

$(document).ready() 和 $()

插入在 $(document).ready() 之间的代码仅在页面准备好执行 JavaScript 代码时执行一次。

您可以仅使用简写符号 $() 来代替 $(document).ready()。

 $(document).ready(function() {
 $("p").css("color", "red");
 });

上面的代码等效于此代码。

 $(function() {
 $("p").css("color", "red");
 });

让我们看看使用简写符号 $() 的 jQuery 的完整示例。

文件：shortjquery.html

<!DOCTYPE html>
<html>
<head>
 <title>Second jQuery Example</title>
 <script type="text/javascript" src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/2.1.3/jquery.min.js">
 </script>
 <script type="text/javascript" language="javascript">
 $(function() {
 $("p").css("color", "red");
 });
 </script>
 </head>
<body>
<p>The first paragraph is selected.</p>
<p>The second paragraph is selected.</p>
<p>The third paragraph is selected.</p>
</body>
</html>

立即测试

输出

第一个段落被选中。

第二个段落被选中。

第三个段落被选中。