Jquery加载顺序之$(document).ready用法

2016-12-02 15:33:00 3651 1 编辑:网站设计前端伍林 来源:程序建站书籍

我们经常用js做网页特效,或者用js增添一些功能,那么你有没有遇到过在js正确的情况下实现不了它所应有的效果呢?对于经常折腾网页代码的人来说,是一定会有这种经验的,js代码没有错误,但是却不执行。因为我们忽略了网页在浏览器加载是有顺序规则的,包括html,css,js以及三者混合页面。今天着重说说$(document).ready(function(){})的用法,在jq中这一句等同于jquery(document).ready(function(){})也等同于$(function(){})。

举个例子:有时候我们在js文件中直接用

function juli(){

var tags = $("#footer");....//功能函数

}

juli();

写功能函数,然后我们在网页头部加载这个js文件,就会出现效果不出来的现象,原因在于当浏览器加载这个js文件的内容的时候,#footer这个id在网页后面,还在就绪阶段,还没加载也即不存在#footer,当这个js读不到这个id的时候自然就不能成功给#footer添加功能。

而解决办法除了把这个js放在网页最后加载之外,还有一个办法就是通过$(document).ready(function(){})包住,这样就可以解决加载顺序造成的错误。如:

$(document).ready(function(){

function juli(){

var tags = $("#footer");....//功能函数

}

juli();

});

因为$(document).ready(function(){})里面的内容是规定在DOM(网页文档)加载完成之后网页内容加载之前再执行的,也许很难理解,可以理解成html加载完成之后,图片加载之前。当所有id都加载完成之后再去查找#footer这样就能找到了,既可以完成js的功能实现。


阅读延伸:

跟$(document).ready(function(){})类似的还有原生js的windows.onload(),如:

window.onload=function(){

alert("深正互联");

}

window.onload()与$(document).ready(function(){})类似但又不同,window.onload()是在页面所有元素(包括图片,引用文件)加载完后才执行,既整个页面所有东西都加载完成后再加载。

跟window.onload()和$(document).ready(function(){})类似还有body.onload,这个加载顺序等同于windows.onload,只不过这个写在html的body标签上。如:<BODY onload="alert('body onload');alert(document.getElementById('testdiv').innerText)" onclick="alert('深正互联');">

好网站建设公司

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询
微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

深正互联微信
扫描即可沟通