在使用 jQuery 时，我们经常会看到 $(function() {}) 这样的代码块出现在页面中。那么这段代码具体有什么作用呢？不写它和写它有什么区别？
不写 $(function() {})
首先，我们来看看不写 $(function() {}) 会发生什么。
// 不写 $(function() {})
$(document).ready(function() {
// 在 DOM 加载完毕后执行的任务
});在这里，我们使用了 $(document).ready() 函数来确保 DOM 元素已经加载完毕之后再执行 JavaScript 代码。如果我们不写这个函数，有可能会遇到以下问题：
- 在 JavaScript 中尝试操作还未出现在 DOM 中的元素，从而导致错误。
- 尝试绑定事件给还未出现在 DOM 中的元素，从而导致事件无效。
- 希望在视觉上改变元素属性，但由于元素还未加载完毕，所以不能准确地确定其属性。
因此，在实际开发中，为了防止这些问题的出现，我们通常会添加 $(document).ready() 函数，确保所有的 DOM 元素都已经加载完毕后再进行 JavaScript 操作。
写 $(function() {})
在前面我们提到了 $(document).ready() 函数，但是每次都写这个函数有点繁琐。因此，为了更方便地处理 DOM 元素，jQuery 提供了一种快捷方式，也就是 $(function() {})。
// 写 $(function() {})
$(function() {
// 在 DOM 加载完毕后执行的任务
});这个简写方式与使用 $(document).ready() 的效果是一样的，但是更加简洁明了，可以使代码更具可读性和易维护性。
示例代码
下面是一个示例代码，展示了如何在 jQuery 中使用 $(function() {})。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- ---------------
------- -----------------------------------------------------------
-------
------
---------- ------------
-- ------------------- ----------
--------
-- -- -------------------
---------------------------- -
-------------------------- ----------
---
-- -- ------------ ---
------------ -
-------------------------- -------
---
---------
-------
-------运行这个页面之后，你应该会看到 #message 元素中显示的文本从 "Hello, world!" 变成了 "Hello, $()!"，证明了我们成功使用了 $(function() {}) 函数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/3879