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

最新推荐文章于 2022-05-20 10:10:38 发布

ispotu

最新推荐文章于 2022-05-20 10:10:38 发布

阅读量556

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/superit401/article/details/103314102

版权

js 专栏收录该内容

55 篇文章 1 订阅

订阅专栏

<!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覆盖