本篇文章主要是对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. IDEA第二章----配置git、tomcat(热部署)、database，让你的项目跑起来

    第一节:下载git客户端,整合idea 由于博主公司用的git版本管理,所以本系列都是基于git版本工具的,当然SVN与git配置类似.git同样支持安装版和解压版,支持各种操作系统,我这里下载的是W ...

  2. [效率]Source insight标题栏中路径显示完整路径的方法

    使用Source insight的时候,默认是不显示文件的全路径的,这一点有那么一段时间让我很纠结,因为很多函数都是基于硬件架构的,一个函数有很多时间.查看文件的全路径是非常有必要,可以通过以下实现: ...

  3. IDEA2017使用Maven方式配置Mybatis-Generator

    一,创建Maven项目 至此Maven项目创建完成. 二,在Maven项目的pom.xml中添加mybatis-generator-maven-plugin插件 创建Maven项目后,打开pom.xm ...

  4. [笔记]我的Linux入门之路 - 04.Eclipse安装

    首先,要安装ecliose自然是先要有Java环境.在上一篇已经安装好了,不再赘述. 一.下载 Eclipse官网 下载下来的文件":eclipse-inst-linux64.tar.gz ...

  5. [刷题]算法竞赛入门经典(第2版) 5-5/UVa10391 - Compound Words

    题意:问在一个词典里,那些单词是复合词,即哪些单词是由两个单词拼出来的. 渣渣代码:(Accepted, 30ms) //UVa10391 - Compound Words #include<i ...

  6. ng-class改变css样式

    而在这所谓的样子当然就是改变其css的属性,而实现能动态的改变其属性值,必然只能是更换其class属性 这里有三种方法: 第一种:通过数据的双向绑定(不推荐) 第二种:通过对象数组 第三种:通过key ...

  7. Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目

    [TOC] 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admi ...

  8. WPF 杂谈——自定义控件

    如果只是使用现有的WPF控件的话,是很难满足当前社会多复杂的业务.所以用户自己订制一系列控件也是一种不可避免的情势.WPF在控制方面分为俩种:用户控件和自定义控件.相信看过前面章节的就明白他们俩者之间 ...

  9. JSP Cookie的使用

    Cookie 通常用于网站记录客户的某些信息,比如客户的用户名及客户的喜好等.一旦用户下次登录,网站可以获取到客户的相关信息,根据这些客户信息,网站可以对客户提供更友好的服务. Cookie sess ...

  10. （数字IC）低功耗设计入门（一）

    低功耗设计这个专题整理了好久,有一个月了,有图有证据: 然而最近一直有些烦心事.郁闷事,拖延了一下,虽然现在还是有点烦,但是还是先发表了吧.下面我们就来聊聊低功耗设计吧,由于文章比较长,因此我就不一次 ...