前端js页⾯加载完成事件-onload，五种写法
在js和jquery使⽤中，经常使⽤到页⾯加载完成后执⾏某⼀⽅法。通过整理，⼤概是五种⽅式（其中有的只是书写⽅式不⼀样）。
1：使⽤jQuery的$(function){};
2：使⽤jquery的$(document).ready(function(){});
前两者本质上没有区别，第1种是第2种的简写⽅式。两个是document加载完成后就执⾏⽅法。
3：使⽤jQuery的$(window).load(function(){});
4：使⽤load = function(){}
jquery是什么选择器
第3种和第4种都是等到整个window加载完成执⾏⽅法体。两者也没有区别，只是⼀个使⽤dom对象，⼀个使⽤jQuery对象。
5：在标签上静态绑定onload事件，<body onload="aaa()">等待body加载完成，就会执⾏aaa()⽅法。
那么，这五种⽅式，执⾏的先后顺序是怎么样的呢？
通过下⽅代码验证发现：
使⽤第⼀种 jQuery的$(function){} 和第⼆种 jquery的$(document).ready(function(){});⽆论位置放置在哪⾥，总是优先其余三种⽅式（原因是：这两种⽅式是在document加载完成后就执⾏，后三种是等到整个window页⾯加载完成后才执⾏），这两者之间的执⾏顺序是谁在上⽅谁优先执⾏。
使⽤第三种 jQuery的$(window).load(function(){})；和第四种 load = function bbb(){}这两种⽅式，总是优先于<body
onload="aaa()">执⾏。他们两者执⾏顺序也是根据谁在上⽅谁先执⾏。
使⽤第五种 <body onload="aaa()">总是最后执⾏。
<script type='text/javascript'>
  load = function(){
    alert("页⾯加载完成====》onload");
  }
  $(window).load(function(){
    alert("jquery===》window load" );
  })
  $(document).ready(function () {
    alert("jquery====》document ready");
  });
  $(function(){
    alert("jquery====》document onload");
  });
  function aaa(){
    alert("静态标签====》onload");
  }
</script>
<body onload="aaa()"></body>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。