<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
</style>
<title>jqueryy与原生js启动器</title>
</head>
<script src="E:\html_js_test\js\jquery-3.3.1.min.js" type="text/javascript"></script>
<script>
/**
以下此段代码一定要放在最上面,至少要放在你要使用document.ready(function(){}地方的上面，等同于script标签导入jquery.js：
功能同等于 jQuery 的 $(document).ready();
把这段代码放到你的页面中或者某个导入的脚本中，然后你就可以像下面这样使用了：
document.ready(function(){
});
*/
(function () {
var ie = !!(window.attachEvent && !window.opera);
var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
var fn = [];
var run = function () { for (var i = 0; i < fn.length; i++) fn[i](); };
var d = document;
d.ready = function (f) {
if (!ie && !wk && d.addEventListener)
return d.addEventListener('DOMContentLoaded', f, false);
if (fn.push(f) > 1) return;
if (ie)
(function () {
try { d.documentElement.doScroll('left'); run(); }
catch (err) { setTimeout(arguments.callee, 0); }
})();
else if (wk)
var t = setInterval(function () {
if (/^(loaded|complete)$/.test(d.readyState))
clearInterval(t), run();
}, 0);
};
})();
</script>
<script>
$(function(){
/**
Jquery中简便语法。$(document).ready(function(){})的简化写法。
*/
console.log("$(function(){}");
})
$(document).ready(function(){
/**
$(document).ready要比window.onload先执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕，不需要等大型文件加载或者不存在的连接等耗时工作完成才执行，效率高。
$(document).ready()和$(function(){})都是用于当页面的标准DOM元素被解析成DOM树后就执行内部函数。
可以在js文件里多次编写的，多个都可以执行。对于多人共同编写的js就有很大的优势，因为所有行为函数都会执行到。
*/
console.log("$(document).ready(function(){}");
})
document.ready(function(){
/**
要让此功能生效需要，导入一段(function(){XXX})()脚本:
最后提供压缩版 document.ready();
(function () {
var ie =!!(window.attachEvent&&!window.opera),wk=/webkit\/(\d+)/i.test(navigator.userAgent)&&(RegExp.$1<525);
var fn =[],run=function(){for(var i=0;i<fn.length;i++)fn[i]();},d=document;d.ready=function(f){
if(!ie&&!wk&&d.addEventListener){returnd.addEventListener('DOMContentLoaded',f,false);}if(fn.push(f)>1)return;
if(ie)(function(){try{d.documentElement.doScroll('left');run();}catch(err){setTimeout(arguments.callee,0);}})();
else if(wk)var t=setInterval(function(){if(/^(loaded|complete)$/.test(d.readyState))clearInterval(t),run();},0);};
})();
参考 :http://www.oicqzone.com/pc/2018122824413.html
*/
<!-- alert([[${'key'}]]); -->
console.log("document.ready(function(){}");
});
(function(){
console.log("(function(){})()");
})()
$( window ).on('load', function() {
console.log("$( window ).on('load', function() {}");
});
<!-- $( window ).load(function(){ -->
<!-- /** -->
<!-- jquery的window.onload写法,此写法报错！！！ -->
<!-- */ -->
<!-- console.log("$(window).onload(function(){}"); -->
<!-- }); -->
window.onload = function(){
/**
* window.onload()用于当页面的所有元素，包括外部引用文件，图片等都加载完毕时运行函数内的函数。load方法只能执行一次，如果在js文件里写了多个，只能执行最后一个。
*/
console.log("window.onload = function(){}");
}
</script>
<body>
</body>
</html>
最后执行顺序（固定死了，每次执行都是这顺序）：
(function(){})()
document.ready(function(){}
$(function(){}
$(document).ready(function(){}
$( window ).on('load', function() {}
window.onload = function(){}
总结：
（1）最先执行的是(function(){})()，即立即执行，最后一个括号可传参数
（2）jquery写法的window.onload不会被原生的window.onload覆盖