本篇文章主要是对jquery中的$(document).ready()使用方法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助 window.onload = function(){ alert("welcome"); } 这样的写法作用是希望在页面加载完，自动执行定义js代码（function）。

$(document).ready(function(){.... })这个函数是用来取代页面中的window.onload;

document.ready()和传统的方法<body onload=”load()”> 相似，不同的是onload()的方法是在页面加载完成后才发生，这包括DOM元素和其他页面元素（例如图片）的加载，因此，使用document.ready()方法的执行速度比onload()的方法要快。

Javascript 只有在DOM元素已经定义以后才可以对其执行某种操作，jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行。

比如：

代码如下:

<script type="text/javascript">

$(document).ready(function () {

alert("我的第一个jQuery代码!");

});

</script>

这段代码的意思是：当Dom Tree加载完成后，显示警告信息。document.ready()和传统的方法<body onload=”load()”> 相似，不同的是onload()的方法是在页面加载完成后才发生，这包括DOM元素和其他页面元素（例如图片）的加载，因此，使用document.ready()方法的执行速度比onload()的方法要快。

最后要注意两点：

确保在 <body> 元素的onload事件中没有注册函数，否则可能不会触发$(document).ready()事件。( 我尝试用下面的例子来演示这个情况，但是没有成功，所以我想这种情况只是可能发生。)

代码如下:

<html>

<head>

<title>My second jQuery</title>

<script type="text/javascript" src="/js/jquery.js"></script>

<script type="text/javascript"> //下面是load的函数含有jquery注册函数

$ function load(){

$("p").append("<b>Hello</b>");

} //下面是jQuery的代码

$(document).ready(function () {

$("p").append("我的第一个jQuery代码!");

$("p").append("<b>Hello</b>");

});

</script>

</head>

<body onload="load()">

<h2>jQuery 简单例子2</h2>

<p>I would like to say: </p>

</body>

</html>

可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。

详细出处参考：http://www.jb51.net/article/46780.htm

jquery中的$(document).ready()使用小结的更多相关文章

  1. jquery中的$(document).ready()

    window.onload = function(){ alert("welcome"); } 这样的写法作用是希望在页面加载完,自动执行定义js代码(function). $(d ...

  2. jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()的区别

      body中的onload()和window.onload以及$(document).ready()的区别: 1.前两者都表示当页面加载元素(包括图片等信息)完毕后执行的操作,而且两者在各种浏览器中 ...

  3. jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()、DomContentLoaded()区别

    $().ready().$(handler).$(document).ready(handler)均不是原生JS中的,都是jQuery中封装的方法.这些事件在当页面的dom节点加载完毕后就执行,无需等 ...

  4. jQUery中的$(document).ready()方法和window.onload()方法的区别

    1.常规的Javascript代码中,通常使用window.onload方法 window.onload = function(){//代码} 2.jquery中,则使用$(document).rea ...

  5. jquery中的$(document).ready(function(){})和$(window).load()比较

    1.执行时间 window.onload()即jquery写法中的$(window).load(function(){})必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document). ...

  6. body中的onload()函数和jQuery中的document.ready()有什么区别？

    1.我们可以在页面中使用多个document.ready(),但只能使用一次onload(). 2.document.ready()函数在页面DOM元素加载完以后就会被调用,而onload()函数则要 ...

  7. jquery中的$(document).ready(function() {});

    当文档载入时执行function函数里的代码, 这部分代码主要声明,页面加载后 "监听事件" 的方法.例如: $(document).ready( $("a") ...

  8. jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较

    想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  9. jquery中常见问题及解决办法小结

    1 在开发开放聊天室的过程中,遇到使用ajax提交表单插入数据库时会插入两条数据的情况 解决办法,在ajax函数返回后,return false. $("#btn").click( ...

随机推荐

  1. 2017-4-24 WinForm开发基础、窗体的属性CenterScreen

    WinForm中文名称: Windows窗体,是·Net开发平台中对Windows Form的一种称谓. 客户端应用程序:C/S 客户端很重要的特点:可以操作用户电脑上的文件 窗体属性:窗体种类: + ...

  2. Linux如何配置bond

    Q:什么是BOND? A: 将多块网卡虚拟成为一块网卡的技术,通过bond技术让多块网卡看起来是一个单独的以太网接口设备并具有相同的ip地址.   Q:为什么要配置bond? A:  在linux下配 ...

  3. Html5浏览器支持

    HTML5 浏览器支持 把 HTML5 元素定义为块级元素 语义块级displayblock实例 header, section, footer, aside, nav, main, article, ...

  4. nginx源码分析——configure脚本

    源码:nginx 1.13.0-release   一.前言      在分析源码时,经常可以看到类似 #if (NGX_PCRE) .... #endif 这样的代码段,这样的设计可以在不改动源码的 ...

  5. poj2785双向搜索

    The SUM problem can be formulated as follows: given four lists A, B, C, D of integer values, compute ...

  6. Maven的简单搭建

    Maven这个个项目管理和构建自动化工具,越来越多的开发人员使用它来管理项目中的jar包.接下来将从下面几个方向介绍maven: (1)Maven简单介绍 (2)Maven安装与配置 (3)Maven ...

  7. scala 异常处理机制

    有经验的码农都知道,程序开发的差不多的时候,为了提高程序的稳健性,是一定要加上异常处理机制的 在scala中,用try/catch/finally实现该功能,这个在我的博客,数字转汉字小工具中有体现, ...

  8. java环境安装之不能安装exe文件

    经过多年,打算再学下java 从官网下载java8安装包,但因为我的计算机的cd-room被卸载掉了,安装是报错说cab文件损坏之类的错误. 从stackOverflow中找到一篇眼前一亮的解决办法. ...

  9. [玩耍]C++控制台扫雷

    其实是大一还不会GUI时闲着无聊写的.都是硬编码,也不支持自定义棋盘大小,现在看看这代码惨不忍睹.下载地址:http://download.csdn.net/download/xienaoban/98 ...

  10. [刷题]算法竞赛入门经典(第2版) 5-14/UVa1598 - Exchange

    题意:模拟买卖,当出售价bid等于或低于出售价ask,则交易. 代码:(Accepted,0.330s) //UVa1598 - Exchange //Accepted 0.330s //#defin ...