`

$(document).ready()

阅读更多
$(document).ready()

$(document).ready(function(){XX})

window.onload = function(){   if(document.readyState == "complete"){XX}}

http://www.cnblogs.com/lhb25/archive/2009/07/30/1535420.html

一、两者比较
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。

2.编写个数不同
window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
$(document).ready()可以同时编写多个,并且都可以得到执行

3.简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});


二、解释
jQuery有一个用来作为DOM快速载入javascript的得心应手的小函数,那就是ready… 他在页面加载完成之前执行。 (也许window.onload()能实现同样的功能,但当window.onload函数执行的时候,要说明所有东西已经载入,包括图像和横幅等等。要知道较大的图片下载速度会比较慢,因此用户必须等待大图片下载完毕才能看到window.onload()执行的代码效果,这样就花费了很长的等待时间,这不是我们想要的。)。
$(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。 简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数.

$(document).ready(function(){
// 你的代码
}); 
       $(document)意思是说,获取整个网页文档对象(类似的于window.document),$(document).ready意思就是说,获取文档对象就绪的时候。 
       上面这段代码的意思是检查文档对象直到它能够允许被操作(译者注:这样做比window.onload()函数要快的多,因为只要文档对象载入完成就能够执行代码了,而不需要等待页面中的图片下载是否已经完成)---这是我们想要的。


三、bind函数的参数传递问题
bind函数的定义: $(selector).bind(event,[data,]function)
function句柄中调用的this参数 不是绑定的元素,而是bind绑定的事件
想再函数句柄中传递参数 可以采用下面的方法, 个人偏向第二种方法,代码易读、简单
1. 默认方法 event.data
想传递参数给function 可以通过data传递,function中 event.data.* 来调用
$(“#id”).bind(“click”, { a: $(“#id”).val() } ,function(){alert(event.data.a)});
2. 全局变量
var a = $(“#id”).val();
$(“#id”).bind(“click”, function(){alert(a)});
3. 内部函数
$(“#id”).bind(“click”, function(){Say (“id”)});
function Say(id){alert( $(“#”+id).val() )}



四、Demo
demo01:
JQuery API对 $(document).ready() 的解释是:当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
我的理解:$(document).ready() 用于当前页面加载完成后,就执行其定义的方法,用于异步加载,提交页面响影的速度,用于在一个页面中包含多个页面的情况(一个页面中使用多个iframe)。

1. 将页面中使用iframe的地方使用div代替;并定义div的ID属性。代码示例如下:
 
<div id="MyNoticesDiv" width="100%" height="195px"></div>

<script language="JavaScript" type="text/javascript">
	$(document).ready(function(){ 
		$.ajax({			url : '${base}/merchantHome/findMyNotices.action?merchantNoticeDto.limit=3',
			type : 'post',
			dataType : "text",
			success : function(text) {
				isPro = false;
				if(null != text && "" != text){
					$('#MyNoticesDiv').html(text);				}
			}
		});		
	})
</script>

2.页面完成后,通过js再加载div中要显示的内容。

demo02















分享到:
评论

相关推荐

    jQuery(document).ready(function($) { });的几种表示方法

    `jQuery(document).ready()`函数是jQuery中的一个重要概念,它确保了在执行任何JavaScript代码之前,DOM已经完全加载和解析完成。这个特性使得开发者可以在不担心元素未定义的情况下操作DOM。以下是几种常见的表示...

    $(document).ready(function() {})不执行初始化脚本

    在网页开发中,JavaScript 的 `$(document).ready()` 函数是一个非常重要的工具,它确保了在DOM(文档对象模型)完全加载并准备就绪后,才会执行包裹在其内的代码块。这有助于避免由于元素未加载而导致的错误,尤其...

    jquery中的$(document).ready()使用小结

    $(document).ready(function(){…. })这个函数是用来取代页面中的[removed]; document.ready()和传统的方法&lt;body onload=”load()”&gt; 相似,不同的是onload()的方法是在页面加载完成后才发生,这包括DOM元素和...

    JQuery 引发两次$(document.ready)事件

    在JavaScript和jQuery编程中,`$(document).ready`是一个常用的方法,用于确保DOM(文档对象模型)加载完毕后执行特定的函数。然而,有时我们可能会遇到`$(document).ready`被触发两次的情况,这通常会导致代码执行...

    浅析document.ready和[removed]的区别讲解

    `document.ready`是jQuery库提供的一种方法,它的全称是`$(document).ready()`,它的主要作用是在DOM结构构建完成,但图像或其他资源可能尚未加载完毕的时候执行。这意味着,只要DOM树构建完成,`document.ready`...

    jquery操作菜单

    $(document).ready(function(){ $(".menu ul li ul").hide(); $(".menu&gt;ul&gt;li&gt;a").on('click',function(){ $(".menu&gt;ul&gt;li&gt;a").css('background-image',"url('../image/collapsed.gif')"); $(".menu ul li ul...

    Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解

    本文着重讲解了在JQuery中使用$(document).ready()函数的详细方法和它的重要性。 在JQuery中,$符号是JQuery库的简写和引用。例如,$()函数等同于jQuery()函数。它为开发者提供了一种方便的方式来选择和操作文档中...

    ionic中的$ionicPlatform.ready事件中的通用设置

    这个事件类似于基于 `document` 的 `deviceready` 事件,但它是专门为 Ionic 应用程序设计的,提供了更友好的跨平台兼容性。在 `$ionicPlatform.ready` 事件内部执行的代码可以确保在处理设备特定的功能或设置时不会...

    jQuery之$(document).ready()使用介绍

    在学习jQuery框架时,了解$(document).ready()函数的作用至关重要。这一函数是管理页面加载顺序和时机的核心部分,它确保了页面的DOM元素完全加载并可被脚本操作之后,才执行包裹在其中的代码。 ### 知识点:jQuery...

    jquery的$(document).ready()和onload的加载顺序

    3. 使用jQuery的`$.holdReady(true)`和`$.holdReady(false)`组合,来控制`$(document).ready`的执行时机。 4. 如果可能,避免在frame中加载页面,或者确保frame内页面的资源都能正确访问。 理解`$(document).ready...

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

    jQuery(document).ready(function(){}); 使用jQuery的好处是它包装了各种浏览器版本对DOM对象(javascript的DOM对象你应该知道吧,就是它了)的操作. 比如jquery写法:$(“div p”); // (1)$(“div.container”); // ...

    多个$(document).ready()的执行顺序实例分析

    在JavaScript和jQuery的世界里,`$(document).ready()`是一个非常重要的事件处理函数,它用于确保DOM(文档对象模型)完全加载后才执行指定的代码。这样可以避免在页面元素未加载完毕时尝试操作它们,从而可能导致...

    用javascript实现jquery的document.ready功能的实现代码

    ### 使用JavaScript实现jQuery的`document.ready`功能 在前端开发中,经常需要用到DOM操作,而这些操作往往需要等到整个文档加载完成之后才能进行。在jQuery中,提供了非常方便的`$(document).ready()`方法来帮助...

    比Jquery的document.ready更快的方法

    从给定的文件内容中,我们可以提炼出一些知识点,包括Jquery的$(document).ready()的替代方法、浏览器的DOMContentLoaded事件、以及兼容性处理。 首先,文件中提到的更快的方法实际上是指一种JavaScript的编码实践...

    JQuery下关于$.Ready()的分析

    $(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法 接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载在”Body”的Onload事件里. 对于Body的Onload事件...

    全面解析jQuery $(document).ready()和JavaScript onload事件

    这两个阶段分别对应了jQuery中的$(document).ready()方法和JavaScript的onload事件。 $(document).ready()是jQuery提供的一个方法,它允许我们在DOM结构完全加载并且解析后立即执行代码。在描述中提到,$(document)...

Global site tag (gtag.js) - Google Analytics