jQuery 使用 $(function, 等开始 JavaScript 代码

在本文中，我们将介绍在使用 jQuery 时，如何使用 $(function) 或者其他相关方式来开始 JavaScript 代码。

阅读更多：jQuery 教程

什么是 jQuery

jQuery 是一个流行的 JavaScript 库，旨在简化 HTML 文档遍历、事件处理、动画效果和 Ajax 等常见任务。它提供了一个简单而强大的 API，可以大大简化 JavaScript 编程。使用 jQuery，我们可以更快地编写代码，并且在跨浏览器兼容性方面更加可靠。

使用 jQuery 开始 JavaScript 代码的常用方式是在 $(function) 中编写代码，这种方式也被称为 “document ready” 或 “DOM ready”。在这个函数中的代码将在 HTML 文档完全加载并解析后执行。

下面是一个示例：

$(function() {
  // 在这里编写你的代码
  console.log("Hello, jQuery!");
});

在上面的示例中，当 HTML 文档加载完成后，控制台将输出 “Hello, jQuery!” 这条消息。

其他等价方式

除了 $(function) 外，还有其他等价方式可以开始 JavaScript 代码。以下是一些常见的用法：

$(document).ready()

与 $(function) 相似，$(document).ready() 方法用于指定在加载和解析完整个 HTML 文档后要执行的函数。这两种方式可以互换使用。

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

$.ready()

$.ready() 是 $(document).ready() 方法的简写形式。

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

示例

让我们通过一些示例来演示如何使用 $(function) 或其他方式开始 JavaScript 代码：

示例 1：隐藏元素

<button id="hideButton">Hide</button>
<p id="message">Hello, jQuery!</p>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
(function() {
  // 当点击按钮时，隐藏消息元素("#hideButton").click(function() {
    $("#message").hide();
  });
});
</script>

在上面的示例中，当点击 “Hide” 按钮时，消息元素将被隐藏。

示例 2：获取表单值

<input type="text" id="nameInput" placeholder="Your name">
<button id="submitButton">Submit</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
(function() {
  // 当点击提交按钮时，获取输入框的值并显示在控制台("#submitButton").click(function() {
    var name = $("#nameInput").val();
    console.log("Hello, " + name + "!");
  });
});
</script>

在上面的示例中，当点击 “Submit” 按钮时，控制台将输出 “Hello, [输入的名字]!”。

总结

通过本文，我们学习了如何使用 $(function) 或其他方式开始 JavaScript 代码。无论是 $(function)、$(document).ready() 还是 $.ready()，它们都提供了一种在 HTML 文档加载完成后执行 JavaScript 代码的简便方式。我们还通过示例演示了如何使用 jQuery 来隐藏元素、获取表单值等常见操作。希望本文能够帮助您更好地理解并运用 jQuery。