ready 方法是 jQuery 实现的在 html 页面在 DOM(Document Object Model, 文档对象模型) 树完全加载完成后触发的一个方法. 因为它接收的方法在页面中所有的 DOM 都可访问时才执行, 所以此时你完全可以访问和操作 html 中的元素.
在 jQuery 3.0 之前, 典型的匿名函数方式的用法如下:
$(document).ready(function() { // 在 .ready() 被触发时执行.});在 jQuery 3.0 中 ready() 的变化
在 jQuery 3.0 发布之前, 有以下几种 ready 方法的使用方式:
在 document 对象上: $(document).ready(handler);
在一个空元素上: $().ready(handler);
或直接使用 (即: 不在一个指定的元素上): $(handler);
以上的几种方式是等价的. 传入的 handler 会在页面所有的 DOM 都加载完成后执行, 不管它被哪个指定元素执行. 也就是, 在 image 元素 $("img") 与 document 对象上调用 ready 方法不表明要等待这些元素加载完成后就触发 handler, 而是在整个 DOM 树加载完成后才触发.
在 jQuery 3.0 中, 除了 $(handler); 方法其它的都被弃用了. 官方的理由是:
因为这个选择与 .ready() 方法的行为没有关系, 它是低效的并且会误导用户猜测这个方法的行为.
Ready 和 Load 事件的不同点
ready 事件在页面 DOM 完全加载后触发并能正确的访问到元素. 而 load 事件在页面 DOM 及资源文件(图片,视频等)都加载完成后才触发.
load 事件可以像下面这样使用:
$(window).on("load", function(){ // 当页面所有资源(图片,视频等)全加载完成后才加载执行});这会等待 DOM 加载完成以及图片加载完成(根据图片的大小, 需要加载一定的时间).
对于常规的 DOM 操作你多半不需要 load 事件, 但如果你想做一个等待页面所有资源加载的一个加载效果或者是计算图片的大小时这应该是一个不错的选择.
你可能并不需要 jQuery.ready()
ready 方法确保了其内部的代码都能正确的操作 DOM 元素. 这是什么意思? 当你把 JavaScript 代码放到 HTML 文档中时它会确保回调函数里面的代码在浏览器在已经加载页面中所有的元素时执行:
<!doctype html><html> <head> <meta charset="utf-8"> <title>.ready() 教程</title> <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script> <script> $(function(){ // .ready() 的回调方法, 在 DOM 完全加载完后执行 var length = $("p").length; // 下面会在console控制台中输出 1, 表示有段落 p 存在. // 这就证明了这个回调方法在 DOM 完全加载完后执行. console.log(length); }); </script> </head> <body> <p>I'm the content of this website</p> </body></html>
新闻热点
疑难解答
图片精选
