$(document).ready()

时间 2019-12-02

标签 document ready 繁體版

原文原文链接

document.ready和onload的区别——JavaScript文档加载完成事件

页面加载完成有两种事件

一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）

二是onload，指示页面包含图片等文件在内的全部元素都加载完成。

用jQ的人不少人都是这么开始写脚本的：

$(function(){

// do something

});

其实这个就是jq ready()的简写，他等价于：

$(document).ready(function(){

//do something

})

//或者下面这个方法，jQuer的默认参数是：“document”；

$().ready(function(){

//do something

})

这个就是jq ready()的方法就是Dom Ready，他的做用或者意义就是:在DOM加载完成后就能够能够对DOM进行操做。

通常状况先一个页面响应加载的顺序是：域名解析-加载html-加载js和css-加载图片等其余信息。

学习jQuery的第一件事是：若是你想要一个事件运行在你的页面上，你必须在$(document).ready()里调用这个事件。全部包括在$(document).ready()里面的元素或事件都将会在DOM完成加载以后当即加载，而且在页面内容加载以前。javascript

实例

在文档加载后激活函数：css

$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").slideToggle();
  });
});

亲自试一试html

定义和用法

当 DOM（文档对象模型）已经加载，而且页面（包括图像）已经彻底呈现时，会发生 ready 事件。java

因为该事件在文档就绪后发生，所以把全部其余的 jQuery 事件和函数置于该事件中是很是好的作法。正如上面的例子中那样。jquery

ready() 函数规定当 ready 事件发生时执行的代码。浏览器

ready() 函数仅能用于当前文档，所以无需选择器。ide

容许使用如下三种语法：函数

语法 1

$(document).ready(function)

语法 2

$().ready(function)

语法 3

$(function)

If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as theDOM is loaded and before the page contents are loaded. 学习

复制代码代码以下:

 
$(document).ready(function() { 
 
// put all your jQuery goodness in here. 
 
});

有不少方法能够确保事件在页面上正常工做，$(document).ready()比其它方法要更有优点。首先，你没必要在HTML上放置任何“ 行为性的”标记。另外，你能够将JavaScript/jQuery写入一个独立的js文件，这样既容易维护，又保证了js与页面内容的隔离。若是你在浏览网页时更加细心，你就会经常看见这种状况：当你将鼠标悬停在一个链接时，有时状态栏中会在显示“javascript:void()”这样的消息。这就是你把一个事件直接放在<a href>标签里所形成的。

在一些使用traditional JavaScript的页面，你会在<body>标签中看见“onload”属性。这会致使一个问题：它限定了在body上只能有一个函数事件。是的，由于它又往内容中添加的“行为性的”标签。若是你想解决这个问题，请参考Jeremy Keith的书：DOM Scripting，里面讲述了如何在一个单独的js文件里建立一个 “addLoadEvent” 函数，它容许多个函数能够在body里被加载。可是这种方法须要为原本很简单的问题编写至关数量的代码，另外，这种方法是在加载window时触发这些事件的，这不得不让我再一次想起 $(document).ready()的好处。

使用 $(document).ready()，你能让你的事件在window加载以前加载或触发。全部你写在这个方法里面的都准备在最先的时刻加载或触发。也就是说，一旦DOM在浏览器中注册后，$(document).ready()里的代码就开始执行。这样用户在第一眼看见页面元素时，特效就能够运行了。 spa