$(window).load()与$(document).ready()的区别
1.执行时间不同:从字面的意思上理解,$(document).ready()就是文档准备好了。也就是浏览器已经解析完整个html文档,dom树已经建立起来了,这时就可以通过class属性或者id属性等等对dom进行操作等。而$(window).load()就是整个页面已经加载完毕。与前者的区别是dom树虽然已经建立起来了,但页面不一定加载完毕,如一些大的图片等,加载完成就需要一定的时间;但是页面加载完毕后,dom肯定也就建立起来了;但是有些文字或者图片链接等需要在文档加载完毕前,dom树建立后就进行的,这时就要用到$(document).ready()了。
2.可以被执行的次数不同:$(document).ready()可以在JavaScript代码中出现多次,并且里面的函数或者代码都可以得到执行;而$(window).load()只能在JavaScript代码中出现一次,如果有多个$(window).load(),那么只有最后一个$(window).load()里面的函数或者代码才会执行,之前的$(window).load()都将被覆盖;
Js代码
<script>
$(document).ready(function(){
alert("test1");//这段代码会被执行
});
$(document).ready(function(){
alert("test2");//这段代码会被执行
});
$(window).load(function(){
alert("test1");//这段代码不会被执行
});
$(window).load(function(){
alert("test2");//这段代码将被执行
});
</script>
3.执行的效率不同:如要在dom的元素节点中添加onclick属性节点,这时用$(document).ready()就要比用$(window).load()的效率高;但是在某些时候还必须得用$(window).load()才行,如之前写的app下载,如果要关闭这个下载框,则必须要在整个下载框加载完毕后,才能点击关闭图标,对app下载框执行隐藏。
Java代码
<script>
$(document).ready(function(){
$(".the_body a").attr("onclick","alert('test')");
});
$(window).load(function(){
$(".close_btn").click(function(){
$("#app_down").hide();
});
});
</script>
另外,$(document).ready()还有多种形式的写法,有$().ready( function(){} ); 有$(document).ready( function(){});还有$(function(){}).
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- CAS 服务端部署
- Spring Security 权限控制
- vue动态组件的用法
- elementUI中checekBox实现全选和反选以及实现在input中输入空格出现label分割
- centos 安装git
- centos 挂载硬盘
- centos 安装postgrep
- springboot集成PowerJob-openAPI和回调完整流程
- 使用 Redisson 实现的 redis 分布式锁在 SpringBoot 中的简单使用
- SpringBoot 的过滤器 Filter 配置
- CentOS 7 Redis 5.0.8 哨兵模式配置
- SpringBoot 项目的 Maven 多环境打包配置
- webRTC: 基于coturn项目的stun/turn服务器搭建
- 百度地图电子围栏功能
- opencv使用中出现的问题