jquery的ready与js的onload

最新推荐文章于 2024-06-13 10:12:32 发布

Jancy1072

最新推荐文章于 2024-06-13 10:12:32 发布

阅读量382

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： javascript jquery

本文链接：https://blog.youkuaiyun.com/shelly1072/article/details/61615001

前端开发专栏收录该内容

46 篇文章

订阅专栏

本文详细介绍了JavaScript中的window.onload与DOMContentLoaded事件的区别，以及如何在页面加载过程中有效地执行脚本。此外，还探讨了jQuery中$符号冲突的问题及解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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());