📌  相关文章
📜  jquery 在页面加载后运行 - Javascript (1)

📅  最后修改于: 2023-12-03 14:43:17.411000             🧑  作者: Mango

jQuery 在页面加载后运行

jQuery 是一种非常流行的 JavaScript 库，在前端开发中得到了广泛应用。使用 jQuery 可以方便地操作 DOM，完成页面的各种交互。

为了确保 jQuery 能够正确地运行，我们需要在页面加载后进行操作。本文将介绍如何使用 jQuery，在页面加载后执行某些操作。

jQuery 的安装

首先，我们需要在页面中引入 jQuery 库。可以通过以下方式：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

也可以下载 jQuery 库，并本地引入：

<script src="jquery.min.js"></script>
在页面加载后执行操作

为了确保 jQuery 能够在页面加载后执行，我们通常会把代码放在 $(document).ready() 中。这个函数会在页面加载完成后执行指定的代码：

$(document).ready(function() {
  // 在这里编写代码
});

我们也可以使用简写方式：

$(function() {
  // 在这里编写代码
});

此时，我们就可以在函数中编写操作 DOM 的代码了。例如，我们可以使用以下代码隐藏一个按钮：

$(function() {
  $("#btn").hide();
});
示例代码

以下是一个完整的示例代码，演示了如何在页面加载后使用 jQuery 操作 DOM：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery 示例</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <button id="btn">点击我</button>
  <script>
    $(function() {
      $("#btn").click(function() {
        alert("Hello, jQuery!");
      });
    });
  </script>
</body>
</html>

以上代码中，我们在页面加载完成后，给按钮绑定了一个 click 事件。当用户点击按钮时，会弹出一个提示框，显示 "Hello, jQuery!"。

总结

jQuery 是一种非常实用的 JavaScript 库，在页面交互中有着广泛的应用。为了确保 jQuery 能够正确地运行，我们需要在页面加载后进行操作。通过 $(document).ready() 函数，我们可以在页面加载完成后执行指定的代码。在函数中，我们可以使用 jQuery 的各种方法，操作 DOM，完成页面的各种交互。