学习jQuery的第一件事是：如果你想要一个事件运行在你的页面上，你必须在$(document).ready()里调用这个事件
学习jQuery的第一件事是：如果你想要一个事件运行在你的页面上，你必须在$(document).ready()里调用这个事件。所有包括在$(document).ready()里面的元素或事件都将会在DOM完成加载之后立即加载，并且在页面内容加载之前。 
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. 

//by www.jbxue.com

}); 
有很多方法可以确保事件在页面上正常工作，$(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()里的代码就开始执行。这样用户在第一眼看见页面元素时，特效就可以运行了。

jQuery之$(document).ready()使用介绍的更多相关文章

  1. JS的window.onload与JQuery的$(document).ready(function(){})的区别

    前段时间去面试被问及JS的加载(onload)与jQuery中加载(ready)方法的区别,瞬时懵逼了,关于这个知识点平时还真没怎么注意. 最近先来无事便查了一下资料, onload 事件(W3c上给 ...

  2. jQuery的document ready与 onload事件——你真的思考过吗？

    在进行实验和资料查询时,我遇到了几个关键问题: 1. window.onload到底是什么加载完触发? 2. body为什么会有onload事件? 3. 为什么是window.onload,而不是do ...

  3. jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解

    1.(function($) {…})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){…} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...

  4. javascript的window.onload()方法和jQuery的$(document).ready()的对比

    jQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 windo ...

  5. Jquery中$(document).ready()与传统JavaScript中的window.onload方法的区别(2016/8/3)

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间       ...

  6. jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解 ----转载

    1.(function($) {-})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){-} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...

  7. jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详解

    1.(function($) {…})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){…} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...

  8. Jquery中"$(document).ready(function(){ })"函数的使用详解

    Jquery是优秀的Javascrīpt框架,$是jquery库的申明,它很不稳定(我就常遇上),换一种稳定的写法jQuery.noConflict(); jQuery(document).ready ...

  9. 【jquery】$(document).ready() 与window.onload的区别

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1)执行时间  wind ...

随机推荐

  1. 总结 IOS 7 内存管理

    [iOS7的一些总结].iOS中的内存管理 我们知道,为了更加方便地处理内存管理问题,将开发人员从繁琐的内存的分配和释放工作中解放出来而专注于产品和逻辑,iOS提供了一种有效的方法, 即自动引用计数A ...

  2. iOS7.1 编译报错 解决方案 体会

    iOS升级到 iOS 7.1 了 ,开发人员必须与时俱进.果断下载更新了xcode5.1版本 ,试运行了一下已上线的应用,哇 报错了!好头疼 贴下报错地方: 都是关于第三方类库报的错 比如parse. ...

  3. Oracle 经典语法（四）

    1. 各个部门平均.最大.最小工资.人数,按照部门号升序排列.SELECT deptno AS 部门号,AVG(sal) AS 平均工资 ,MAX(sal) AS 最高工资,MIN(sal)  AS ...

  4. LRU在MySQL缓存池的实现

    MySQL的InnoDB引擎设置有索引及数据缓存池,其中用到的LRU算法来维持缓存的命中率 这里用到了顺序表list来作为缓冲池,每个数据节点称为block 该算法采用“中点插入法”:当插入一个新bl ...

  5. 重构2-Move Method（方法移动）

    重构同样非常简单,以至于人们并不认为这是一个有价值的重构.迁移方法(Move Method),顾名思义就是将方法迁移到合适的位置.在开始重构前,我们先看看一下代码: ) ) return 0.03; ...

  6. MVC4 Forms 验证,部署到Hyper-v上.FormsAuthentication.SetAuthCookie无效的问题

    这是IE10的一个bug或者说是asp.net4的一个Bug,在IE10里更改了http头,这样导致asp.net4认为客户端没有启用cookie,会导致验证失败.简单的解决方法是,在网站根目录,新增 ...

  7. Ajax 传统的异步登陆

    这是一个传统的异步登陆,利用Ajax实现的,主要代码如下: 客户端代码: var http; function Button1_onclick() { if (window.ActiveXObject ...

  8. [Fiddler]Unable to Generate Certificate

    I'm using Fiddler2 (or trying) to capture SSL traffic for a windows desktop gadget hitting an https ...

  9. MySQL中DATE_FORMATE函数内置字符集解析

    今天帮同事处理一个SQL(简化过后的)执行报错: 代码如下 复制代码 mysql> select date_format('2013-11-19','Y-m-d') > timediff( ...

  10. 集合框架学习之Collection和Map详解

    线性表,链表,哈希表是常用的数据结构,在进行Java开发时,JDK已经为我们提供了一系列相应的类来实现基本的数据结构.这些类均在java.util包中.本文试图通过简单的描述,向读者阐述各个类的作用以 ...