window.onload和jQuery的ready函数区别

先说结论：非常重要！！！

1.onload只能有一个，如果存在多个，后面的覆盖前面的，ready函数可以有无数个，按照顺序依次执行（执行次数不同）
2.ready函数在DOM层渲染完毕则自动执行，onload需要等待页面所有资源加载完毕才执行（执行时机不同）

上代码：

window.onload = function() {document.querySelector('.nav').addEventListener('click', function() {console.log("第一个onload函数 ");})
}window.onload = function() {document.querySelector('.nav').addEventListener('click', function() {console.log("第二个onload函数 ");})
}
$(document).ready(function() {$(".nav ").click(function() {console.log("第一个完整形式的ready函数 ");})
});$(function() {$('.nav').click(function() {console.log("第一个完整形式的ready函数 ");})
});
$(function() {$('.nav').click(function() {console.log("第二个完整形式的ready函数 ");})
});

jq根据js发展来的，那么对应js中的应该是怎样写？

知识点：window对象的常见事件 - 页面加载事件

window.addEventListener('click', function() {console.log("addEvent形式1-1， 没有单击事件");
}); // 可以有多个window.addEventListener('DOMContentLoaded', function() {console.log("DOMContentLoaded形式1-1");// 可以有多个 并且直接加载
});

区别二怎么验证

注意清理缓存
请求远程的图片，从服务器上加载的

window.onload和jQuery的ready函数区别相关推荐

【js的window.onload和jquery的.ready()什么区别】
JavaScript中的window.onload和jQuery中的.ready()都是页面加载完成后执行的事件处理函数,用于在页面加载完成后执行一些JavaScript代码.它们之间的主要区别如下: ...
js中的window.onload和jquery中的load区别的讲解
JavaScript 中的以下代码 [javascript] view plaincopyprint? Window.onload = function (){ // 编写代码 } Wind ...
window.onload和jquery中$(function(){ })的区别
为什么80%的码农都做不了架构师?>>> 今天调试js发现一个问题,我想页面加载完之后才执行我写的js方法,首先我用jqery中$(function(){ })调试了N久都没有 ...
Dom onload和jQuery document ready的区别
使用如下代码进行测试: <html> <script src="jquery_1.7.1.js"> </script> <script&g ...
JQuery的ready函数与JS的onload的区别详解
JQuery的ready函数与JS的onload的区别: 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结 ...
jquery (js中window.onload与jquery中$(document.ready())的区别)
jquery 学习之一(js中window.onload与jquery中$(document.ready())的区别) 耳听为虚,眼见为实.通过下面的实例可查看两者的异同(注意:aa.jpg最好是一张 ...
js中window.onload 与 jquery中$(document.ready()) 测试
js中window.onload 与 jquery中$(document.ready())区别,验证代码如下(调换js代码和Jquer代码书写顺序测试,运行结果一样,因此与代码书写位置没关系): &l ...
js window.onload 加载多个函数和追加函数
平时做项目经常需要使用window.onload, 用法如下: function func(){alert("this is window onload event!");ret ...
HTML里Dom onload和jQuery document ready这两个事件的区别
使用如下代码进行测试: <html> <script src="jquery_1.7.1.js"> </script> <script&g ...

window.onload和jQuery的ready函数区别

window.onload和jQuery的ready函数区别相关推荐

最新文章

热门文章