Rails 4：如何使用$（document），链接ready()涡轮

在Rails 4中，我们可以使用jQuery来简化前端的操作。其中，最为常见的就是用$(document).ready()函数来保证DOM加载完成后再执行JavaScript代码。下面，我将详细讲解如何正确地使用这个函数。

函数基础

在介绍具体的应用场景之前，我们先来看一下.ready()函数的基本用法。

$(document).ready(function(){
  // 在此处编写你需要执行的代码
});

这段代码的作用就是在文档加载完成后执行花括号内的JavaScript代码。其中，我们也可以使用更短的语法：

$(function(){
  // 在此处编写你需要执行的代码
});

这两种写法是等价的，都是为了确保JavaScript代码在DOM加载完成后才会被执行。

使用场景

绑定事件处理程序

我们经常需要在页面加载完成后绑定事件处理程序。比如，当用户点击一个按钮时，我们需要触发相应的事件。如果不使用.ready()函数，在页面还未完全加载完成时，可能无法找到我们要绑定事件的元素。

$(document).ready(function(){
  $('#myButton').click(function(){
    alert('Hello World!');
  });
});

在这个例子中，我们使用jQuery选择器选中一个id为myButton的按钮，并绑定了一个点击事件。由于该代码包裹在.ready()函数中，所以只有当DOM加载完成后才会执行这段代码。

加载页面元素

在某些情况下，我们需要在页面加载完成后再加载一些额外的元素。比如，在一个表格中，我们想要通过AJAX技术异步加载更多数据。如果不使用.ready()函数，可能会出现找不到要添加数据的容器的问题。

$(document).ready(function(){
  $.ajax({
    url:'http://example.com/data',
    success:function(data){
      $('#myTable').append(data);
    }
  });
});

在这个例子中，我们使用了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