📌  相关文章
📜  如何在页面上使用 javascript 和 jquery 编程 (1)

📅  最后修改于: 2023-12-03 15:24:40.869000             🧑  作者: Mango

如何在页面上使用 JavaScript 和 jQuery 编程

当今的网页设计需要更高的交互性和动态性，JavaScript 和 jQuery 是实现这些效果的绝佳工具。本文将介绍如何在页面上使用 JavaScript 和 jQuery 编程。

一、使用 JavaScript 编程
1. HTML 中嵌入 JavaScript 代码

在 HTML 页面中，可以通过 <script> 标签将 JavaScript 代码嵌入到页面中。以下是一个例子：

<!DOCTYPE html>
<html>
  <head>
    <title>MyPage</title>
  </head>
  <body>
    <h1>My Page</h1>
    <script>
      alert("Hello, world!");
    </script>
  </body>
</html>

上面的代码中，通过 <script> 标签将 alert("Hello, world!"); 这行 JavaScript 代码嵌入到了 HTML 页面中。打开页面后，会显示一个弹窗，里面是 Hello, world! 字符串。

2. 外部 JavaScript 文件

将 JavaScript 代码嵌入到 HTML 页面中虽然可以实现功能，但是会使得 HTML 代码变得臃肿。为了解决这个问题，我们可以将 JavaScript 代码单独放在一个 .js 后缀的文件中，然后在 HTML 页面中通过 <script> 标签引入这个文件。

在 HTML 页面中加入以下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>MyPage</title>
    <script src="index.js"></script>
  </head>
  <body>
    <h1>My Page</h1>
  </body>
</html>

上面的代码中，通过 <script> 标签的 src 属性引入了名为 index.js 的 JavaScript 文件。

3. 使用 document 对象操作 HTML

JavaScript 可以通过 document 对象来操作 HTML，例如修改元素的内容或样式。以下是一个例子：

<!DOCTYPE html>
<html>
  <head>
    <title>MyPage</title>
    <script>
      document.getElementById("my-heading").innerHTML = "My New Heading";
    </script>
  </head>
  <body>
    <h1 id="my-heading">My Heading</h1>
  </body>
</html>

上面的代码中，通过 document.getElementById("my-heading") 获取 id 为 my-heading 的元素，并将元素的内容修改为 My New Heading。

二、使用 jQuery 编程

jQuery 是一个流行的 JavaScript 库，它可以帮助开发者更方便地操作 HTML 元素，处理事件，以及处理 Ajax 请求。

1. 在 HTML 页面中引入 jQuery

要使用 jQuery，我们需要先将 jQuery 库引入到 HTML 页面中。有两种方式可以引入 jQuery：使用本地文件或使用 CDN。

使用本地文件引入 jQuery：

<!DOCTYPE html>
<html>
  <head>
    <title>MyPage</title>
    <script src="jquery-3.5.1.min.js"></script>
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

使用 CDN 引入 jQuery：

<!DOCTYPE html>
<html>
  <head>
    <title>MyPage</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>
2. 使用 jQuery 操作 HTML 元素

通过 jQuery，我们可以使用 $ 符号简单地获取 HTML 元素，并对其进行操作。以下是一个例子：

<!DOCTYPE html>
<html>
  <head>
    <title>MyPage</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
      $(document).ready(function() {
        $("#my-heading").html("My New Heading");
      });
    </script>
  </head>
  <body>
    <h1 id="my-heading">My Heading</h1>
  </body>
</html>

上面的代码中，使用 $ 符号获取 id 为 my-heading 的元素，并将元素的内容修改为 My New Heading。

3. 使用 jQuery 处理事件

通过 jQuery，我们可以很容易地处理 HTML 元素发生的事件，例如点击、鼠标进入等。以下是一个例子：

<!DOCTYPE html>
<html>
  <head>
    <title>MyPage</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
      $(document).ready(function() {
        $("#my-button").click(function() {
          alert("Button clicked!");
        });
      });
    </script>
  </head>
  <body>
    <button id="my-button">Click me</button>
  </body>
</html>

上面的代码中，使用 $ 符号获取 id 为 my-button 的按钮元素，并给它添加一个点击事件处理函数。当按钮被点击时，将显示一个弹窗，里面是 Button clicked! 字符串。

以上就是如何在页面上使用 JavaScript 和 jQuery 编程的介绍。当然，这只是一个非常简单的入门教程，如果您想专研这个领域，还需要进一步学习。