在Rails 4中，我们可以使用jQuery来简化前端的操作。其中，最为常见的就是用$(document).ready()函数来保证DOM加载完成后再执行JavaScript代码。下面，我将详细讲解如何正确地使用这个函数。
函数基础
在介绍具体的应用场景之前，我们先来看一下.ready()函数的基本用法。
----------------------------- -- ------------- ---
这段代码的作用就是在文档加载完成后执行花括号内的JavaScript代码。其中，我们也可以使用更短的语法：
------------- -- ------------- ---
这两种写法是等价的，都是为了确保JavaScript代码在DOM加载完成后才会被执行。
使用场景
绑定事件处理程序
我们经常需要在页面加载完成后绑定事件处理程序。比如，当用户点击一个按钮时，我们需要触发相应的事件。如果不使用.ready()函数，在页面还未完全加载完成时，可能无法找到我们要绑定事件的元素。
-----------------------------
--------------------------------
------------ ---------
---
---在这个例子中，我们使用jQuery选择器选中一个id为myButton的按钮，并绑定了一个点击事件。由于该代码包裹在.ready()函数中，所以只有当DOM加载完成后才会执行这段代码。
加载页面元素
在某些情况下，我们需要在页面加载完成后再加载一些额外的元素。比如，在一个表格中，我们想要通过AJAX技术异步加载更多数据。如果不使用.ready()函数，可能会出现找不到要添加数据的容器的问题。
-----------------------------
--------
------------------------------
-----------------------
---------------------------
-
---
---在这个例子中，我们使用了jQuery的.ajax()方法来异步请求数据，并将返回的数据添加到id为myTable的表格中。由于该代码包裹在.ready()函数中，所以只有当DOM加载完成后才会触发AJAX请求。
注意事项
尽管.ready()函数能够保证JavaScript代码在DOM加载完成后被执行，但也需要注意以下几点：
- 在默认情况下，.ready()函数只在文档加载完成后执行一次，如果通过AJAX或其他方式动态添加内容，可能需要重新绑定事件处理程序。
- .ready()函数不能保证所有的图片等资源都已经加载完成，如果需要确保所有资源都已加载完成，可以使用window.onload事件。
结论
在Rails 4中，使用$（document）.ready()函数可以确保JavaScript代码在DOM加载完成后才被执行，这在绑定事件处理程序和加载页面元素时非常有用。但需要注意，.ready()函数只在文档加载完成后执行一次，不能保证所有资源都已经加载完成。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/8304