html页面加载完毕时运行某个js脚本

2014-10-29 hfreeze linux

方法1:

<script type="text/javascript"> 

window.onload=function(){ 

var userName="xiaoxiao"; 

alert(userName); 
} 

</script>

方法2:

以下为jQuery方法,需要引用jQuery文件。

<script src="http://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>

代码如下:

<script type="text/javascript"> 

$(document).ready(function(){ 

var userName="xiaoxiao"; 

alert(userName); 
}); 

</script>

或者其简写

代码如下:

$(function(){ 
var userName="xiaoming"; 
alert(userName); 
});

当dom加载完就可以执行(比window.onload更早)。在同一个页面里可以多次出现.ready()

PS:两者的主要区别

window.onload:

当一个文档完全下载到浏览器中时,才会触发window.onload事件。这意味着页面上的全部元素对js而言都是可以操作的,也就是说页面上的所有元素加载完毕才会执行。这种情况对编写功能性代码非常有利,因为无需考虑加载的次序。

$(document).ready{ }:

会在DOM完全就绪并可以使用时调用。虽然这也意味着所有元素对脚本而言都是可以访问的,但是,并不意味着所有关联的文件都已经下载完毕。换句话说,当HMTL下载完成并解析为DOM树之后,代码就会执行。

注:文章由seo技术http://www.618sale.com/ 进行编辑,转载需注明来源。

标签: php

Powered by emlog