文档章节

$(document).ready()与$(window).load()的区别

huoyoung
 huoyoung
发布于 2016/06/17 10:19
字数 599
阅读 19
收藏 0
点赞 0
评论 0

       首先说说window和document,直观上来讲,window代表的是浏览器窗口,而document代表的是浏览器窗口中加载的dom元素,进一步说,document是window的一个属性,window是最顶级的对象。

1.执行时间不同:

从字面的意思上理解,$(document).ready()就是文档准备好了。也就是浏览器已经解析完整个html文档,dom树已经建立起来了,这时就可以通过class属性或者id属性等等对dom进行操作等。而$(window).load()就是整个页面已经加载完毕。与前者的区别是dom树虽然已经建立起来了,但页面不一定加载完毕,如一些大的图片等,加载完成就需要一定的时间;但是页面加载完毕后,dom肯定也就建立起来了;但是有些文字或者图片链接等需要在文档加载完毕前,dom树建立后就进行的,这时就要用到$(document).ready()了。ready事件可以同时注册多个,执行时,按照注册的先后顺序执行。注意,就算是注册不同元素的ready事件,也是按照先后顺序执行。

2.可以被执行的次数不同:

$(document).ready()可以在JavaScript代码中出现多次,并且里面的函数或者代码都可以得到执行;而$(window).load()只能在JavaScript代码中出现一次,如果有多个$(window).load(),那么只有最后一个$(window).load()里面的函数或者代码才会执行,之前的$(window).load()都将被覆盖;

<script>
$(document).ready(function(){
    alert("document1");//这段代码会被执行
  });
  $(document).ready(function(){
        alert("document2");//这段代码会被执行
  });
  $(window).load(function(){
    alert("window1");//这段代码不会被执行
  });
  $(window).load(function(){
    alert("window2");//这段代码将被执行
  });
  </script>

3.执行的效率不同:
如要在dom的元素节点中添加onclick属性节点,这时用$(document).ready()就要比用$(window).load()的效率高;但是在某些时候还必须得用$(window).load()才行,如之前写的app下载,如果要关闭这个下载框,则必须要在整个下载框加载完毕后,才能点击关闭图标,对app下载框执行隐藏。

  <script>
  $(document).ready(function(){
    $(".add_btn").attr("onclick","alert('add...')");
  });
  $(window).load(function(){
    $(".close_btn").click(function(){
      $("#app_down").hide();
    });
  });
  </script>

© 著作权归作者所有

共有 人打赏支持
huoyoung
粉丝 0
博文 18
码字总数 11674
作品 0
浦东
jquery $(document).ready() 与window.onload的区别

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的。 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕...

_xiaotudou ⋅ 2014/04/23 ⋅ 0

$(document).ready();和$(window).load();的区别

1.执行时间不同: 从字面的意思上理解,$(document).ready()就是文档准备好了。也就是浏览器已经解析完整个html文档,dom树已经建立起来 了,这时就可以通过class属性或者id属性等等对dom进行...

issac宝华 ⋅ 2016/03/16 ⋅ 0

window.onload 、document.onload、$(document).ready()

关于onload: onload 事件 window.onload只会执行一次。 window.onload 、document.onload的区别 stackoverflow中的讨论:window.onload vs document.onload window.load用的多一些。 jquery......

樂天 ⋅ 2015/11/20 ⋅ 0

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

jquery $(document).ready() 与window.onload的区别作者: 字体:[增加 减小] 类型:转载 Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onlo...

wangwenya ⋅ 2014/05/08 ⋅ 0

window.load 和$(document).ready() 区别

1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。 2.编写个数不同 window.onload不能同时...

ke_ry ⋅ 2016/08/26 ⋅ 0

jQuery $(document).ready()和JavaScript onload事件详解区别

jQuery $(document).ready()和window.onload   根据ready()方法的API说明http://api.jquery.com/ready/   这个方法接收一个function类型的参数ready(handler), 方法的作用是: Specify a...

X_H ⋅ 2015/10/12 ⋅ 0

window.onload 与 $(document).ready() 区别

A Windows load event fires when all the content on your page is fully loaded including the DOM (document object model) content and asynchronous JavaScript, frames and images. Yo......

巨轮 ⋅ 2016/09/22 ⋅ 0

jQuery中的$(window)与$(document)的用法区别

[window对象] 它是一个顶层对象,而不是另一个对象的属性,即表示浏览器中打开的窗口。 1、属性   defaultStatus 缺省的状态条消息   document 当前显示的文档(该属性本身也是一个对象)  ...

艺晨光 ⋅ 2017/05/28 ⋅ 0

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

document.ready和onload的区别——JavaScript文档加载完成事件 页面加载完成有两种事件 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件) 二是onload,指示页面包含图片等...

lovethe51cto ⋅ 2016/08/25 ⋅ 0

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

document.ready和onload的区别 页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件); 二是onload,指示页面包含图片等文件在内的所有元素都加载完...

widely ⋅ 2013/12/09 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Jenkins实践3 之脚本

#!/bin/sh# export PROJ_PATH=项目路径# export TOMCAT_PATH=tomcat路径killTomcat(){pid=`ps -ef | grep tomcat | grep java|awk '{print $2}'`echo "tom...

晨猫 ⋅ 今天 ⋅ 0

Spring Bean的生命周期

前言 Spring Bean 的生命周期在整个 Spring 中占有很重要的位置,掌握这些可以加深对 Spring 的理解。 首先看下生命周期图: 再谈生命周期之前有一点需要先明确: Spring 只帮我们管理单例模...

素雷 ⋅ 今天 ⋅ 0

zblog2.3版本的asp系统是否可以超越卢松松博客的流量[图]

最近访问zblog官网,发现zlbog-asp2.3版本已经进入测试阶段了,虽然正式版还没有发布,想必也不久了。那么作为aps纵横江湖十多年的今天,blog2.2版本应该已经成熟了,为什么还要发布这个2.3...

原创小博客 ⋅ 今天 ⋅ 0

聊聊spring cloud的HystrixCircuitBreakerConfiguration

序 本文主要研究一下spring cloud的HystrixCircuitBreakerConfiguration HystrixCircuitBreakerConfiguration spring-cloud-netflix-core-2.0.0.RELEASE-sources.jar!/org/springframework/......

go4it ⋅ 今天 ⋅ 0

二分查找

二分查找,也称折半查找、二分搜索,是一种在有序数组中查找某一特定元素的搜索算法。搜素过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜素过程结束;如果某一特定元素大于...

人觉非常君 ⋅ 今天 ⋅ 0

VS中使用X64汇编

需要注意的是,在X86项目中,可以使用__asm{}来嵌入汇编代码,但是在X64项目中,再也不能使用__asm{}来编写嵌入式汇编程序了,必须使用专门的.asm汇编文件来编写相应的汇编代码,然后在其它地...

simpower ⋅ 今天 ⋅ 0

ThreadPoolExecutor

ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, ......

4rnold ⋅ 昨天 ⋅ 0

Java正无穷大、负无穷大以及NaN

问题来源:用Java代码写了一个计算公式,包含除法和对数和取反,在页面上出现了-infinity,不知道这是什么问题,网上找答案才明白意思是负的无穷大。 思考:为什么会出现这种情况呢?这是哪里...

young_chen ⋅ 昨天 ⋅ 0

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

实验楼—MySQL基础课程-挑战3实验报告

按照文档要求创建数据库 sudo sercice mysql startwget http://labfile.oss.aliyuncs.com/courses/9/createdb2.sqlvim /home/shiyanlou/createdb2.sql#查看下数据库代码 代码创建了grade......

zhangjin7 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部