首先$(function(){}) 和 $(document).ready(function(){}) 是一个方法,$(function(){})为简写(用的多)

$(document).ready和window.onload都是在都是在页面加载完执行的函数,大多数情况下差别不大,但也是有区别的。

$(document).ready:是DOM结构绘制完毕后就执行,不必等到加载完毕。 意思就是DOM树加载完毕,就执行,不必等到页面中图片或其他外部文件都加载完毕。并且可以写多个.ready

window.onload:是页面所有元素都加载完毕,包括图片等所有元素。只能执行一次。


所以,$(document).ready的执行时间要早于window.onload。并且可以写多个,看代码:

 1 //以下代码无法正确执行:
2 window.onload = function()
3 {
4 alert(“text1”);
5 };
6 window.onload = function()
7 {
8 alert(“text2”);
9 };
10 //结果只输出第二个 能同时编写多个
11 //以下代码正确执行:
12 $(document).ready(function()
13 {
14 alert(“Hello World”);
15 });
16 $(document).ready(function()
17 {
18 alert(“Hello again”);
19 });
20 //结果两次都输出

如果需要获取DOM绑定元素的属性值时,最好使用window.onload,因为他是在所有元素加载完毕才执行,如果使用$(document).ready,DOM已经加载,但是DOM绑定的元素属性没有加载,所以属性不生效。要解决这个问题,可以使用 Jquery 中另一个关于页面加载的方法 ---load() 方法。 Load() 方法会在元素的 onload 事件中绑定一个处理函数。如果处理函数绑定给 window 对象,则会在所有内容 ( 包括窗口、框架、对象和图像等 ) 加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。

//Jquery 代码如下:
$(window).load(function ()
{ });
//等价于 JavaScript 中的以下代码
Window.onload = function ()
{ }

window.onload()和$(document).ready的区别( $(document).ready == $(function(){ }) )的更多相关文章

  1. window.onload和$(docunment).ready的区别

    浏览器加载完DOM后,会通过javascript为DOM元素添加事件,在javascript中,通常使用window.onload()方法. 在jquery中,则使用$(document).ready ...

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

    以浏览器装载文档为例,在页面加载完毕后,浏览器会通过 JavaScript 为 DOM 元素添加事件.在常规的 JavaScript 代码中,通常使用 window.onload 方法 ,而在 jQu ...

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

    对于很多初学者来说,window.onload出现在代码中的频率非常高,这似乎变成了一种习惯,可是并不知道具体为什么要加这句代码,可以做几个试验对比: 实验一: <script> docu ...

  4. window.onload和$(document).ready()的区别

    window.onload和$(document).ready()的区别,如下表所示   window.onload $(document).ready() 执行时间 在页面所有内容(图片.文件)加载 ...

  5. 【jQuery】window.onload 和 $(document).ready() 的区别

    ... 在Stack Overflow上看到了这个问题,自己翻译了过来. The onload event is a standard event in the DOM, while the read ...

  6. JS点击任意标签获得该标签属性,以获得ID为例,以及AJAX的异步原理和 $(document).ready()与window.onload加载方法的区别

    js代码: //$(document).click(function (e) { // 在页面任意位置点击而触发此事件 // var select = ""; // var i = ...

  7. window.onload与document.ready的区别

    1. window.onload必须等到网页中所有的内容加载完(包含图片)才执行 document.ready网页中所有DOM结构绘制完执行,可能DOM并没有加载完 所有document.ready比 ...

  8. jQuery中的$(window).load()与$(document).ready()以及jquery $(document).ready() 与window.onload的区别

    大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件.虽然$(document).ready 事件在大多数情况下都OK,但是它的解析顺序是在文档准备 ...

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

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

  10. window.onload和document.ready的区别

    window.onload和document.ready虽然两个方法的运行效果都一样,但他们之间是存在着区别的: 一.从执行的时间 window.onload在dom文档结构加载完毕以后就可以执行,不 ...

随机推荐

  1. Vue知识整理4:v-html标签

    可以在数据绑定中使用html标签,这样在变量里可以使用html标签输出结果,如下所示:

  2. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_01 Collection集合_7_增强for循环

    collections实现了interable接口.实现了interable接口就可以使用Foreach int i是临时 变量

  3. Vuex模块:不开启命名空间

    模块不开启命名空间时,会共享全局命名空间. { state: { 模块1: "局部状态1", 模块2: "局部状态2" }, getters: { getter ...

  4. mysql恢复备份导出

    MySQL-5.7 备份与恢复   一.备份分类 按介质分类: 物理备份指通过拷贝数据库文件方式完成备份,适用于数据库很大,数据重要且需要快速恢复的数据库. 逻辑备份指通过备份数据库的逻辑结构和数据内 ...

  5. idea多行注释缩进

    选中多行代码 - 按下tab键——向后整体移动 选中多行代码 - 按下shift + tab键——向前整体缩进(整体去掉代码前面的空格)

  6. GARENA面试

    约了2019年10月16日下午2点现场面 岗位:数据开发 下午2点准时到了公司,公司环境棒棒哒,hr小姐姐也是贴心,整个面试的过程真的棒棒哒. 在我所有的面试经历中,这个是体验感最棒的,其次是上中的面 ...

  7. 安全运维 - Windows系统维护

    Windows系统加固 账户管理和啊认证授权 日志配置操作 IP协议安全配置:启用SYN攻击保护 文件权限 服务安全 安全选项:启动安全选项.禁用未登录前关机 其他安全配置: 防病毒管理.设置屏幕保护 ...

  8. debian下使用shell脚本时出现了 declare:not found 解决方法

    问题:出现declare:not found的提示 解决:原来,UBUNTU用的是dash(后来证明这个其实这个不是错误的原因:从#!/bin/bash到#!/bin/dash,依旧无法运行,在这写出 ...

  9. mysql中【update/Delete】update中无法用基于被更新表的子查询,You can't specify target table 'test1' for update in FROM clause.

    关键词:mysql update,mysql delete update中无法用基于被更新表的子查询,You can't specify target table 'test1' for update ...

  10. 【sql server复制】不重新初始化快照的情况下新增表/存储过程/函数等

    转发自:https://www.cnblogs.com/datazhang/p/5498789.html sqlserver同步后在不重新初始化快照的情况下新增表        在已有事务复制中,时长 ...