jquery的ready与js的onload

js中

window.onload=function(){ console.log(1); }

一个页面如果有多个window.onload，只会执行最后一个window.onload，这是因为覆盖了前面的window.onload。

window.addEventListener('load',function(){ console.log(1); }) window.addEventListener('load',function(){ console.log(2); })

用addEventListener可以绑定多个监听函数。

jquery中

$(function(){ console.log(1); }) //相当于 $(document).ready(function(){ console.log(1); })

一个页面中可以有很多个$(document).ready。

DOM文档加载的步骤

（1）解析HTML结构 （2）加载外部脚本和样式表文件 （3）解析并执行脚本代码 （4）构造HTML DOM模型//ready （5）加载图片等外部文件 （6）页面加载完毕//load load事件必须等到网页中所有内容全部加载完毕之后才被执行。如果一个网页中有大量的图片的话，则就会出现这种情况：网页文档已经呈现出来，但由于网页数据还没有完全加载完毕，导致load事件不能够即时被触发。 ready事件在DOM结构绘制完成之后就绘执行。这样能确保就算有大量的媒体文件没加载出来，JS代码一样可以执行。

jquery的$冲突

法1

index.html

<div> 1 </div> <div id="box2"> 2 </div> <script src="1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="2.js"></script> <script src="3.js"></script>

1.js

var $=function(id){//自定义了$,先引入1.js再引入jquery.js return document.getElementById(id); }

2.js

jQuery.noConflict();//让Jquery放弃对$的所有权，否则后引入的jquery占有$的所有权。如果先引入jquery再引入1.js，则不用这句代码 jQuery(function($){//传入参数$，在内部使用jquery的$ var a=$('div').html(); console.log(a); }); //或者 jQuery.noConflict(); （function($){ var a=$('div').html(); console.log(a); }）(jQuery)

3.js

var box=$('box2'); console.log(box.innerHTML);

法2自定义jquery的别名

index.html

<div id="box1"> 1 </div> <div id="box2"> 2 </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="1.js"></script> <script src="2.js"></script> <script src="3.js"></script>

1.js

var $=function(id){ return document.getElementById(id); }

2.js

var $j=jQuery.noConflict();//自定义jquery的别名

3.js

var box=$('box2'); console.log(box.innerHTML); var box2=$j('#box1'); console.log(box2.html());