JQuery中DOM加载与事件执行实例分析

$(window).load(function(){
    // 编写代码
})

等价于JavaScript中的以下代码：

window.onload = function(){
    // 编写代码
})

现在详细讲解下windows.onload方法和$(document).ready()方法的区别：

假设网页中有两个函数，JavaScript代码如下：

function one(){
  alert("one");
}
function two(){
  alert ("two");
}

当网页加载完毕后，通过如下JavaScript代码来分别调用one函数和two函数：

window.onload = one;
window.onload = two;

然而当运行代码后，发现只弹出字符串“two”对话框。字符串“one”对话框不能被弹出的原因是JavaScript的onload事件一次只能保存对一个函数的引用，它会自动用后面的函数覆盖前面的函数，因此不能在现有的行为上添加新的行为。

为了达到两个函数顺序触发的效果，只能再创建一个新的JavaScript方法来实现，Javascript代码如下：

window.onload = function(){
    one();
    two();
}

虽然这样编写代码能解决某些问题，但还是不能满足某些需求，例如有多个JavaScript文件，每个文件都需要用到window.onload方法，这种情况下用上面提到的方法编写代码会非常麻烦。而jQuery的$(document).ready()方法能够很好地处理这些情况，每次调用$(document).ready()方法都会在现有的行为上追加新的行为，这些行为函数会根据注册的顺序依次执行。例如如下jQuery代码：

function one(){
    alert("one");
}
function two(){
    alert("two");
}
$(document).ready(function(){
    one();
})
$(document).ready(function(){
    two();
});

运行代码后，会先弹出字符串“one”对话框，然后弹出字符串“two”对话框。

下面看看ready()与onload()的耗时：

jQuery的ready()耗时 : 498 ms

简写方式

上面我们ready函数写成这样：

$(document).ready(function(){
    // 编写代码
})

也可以简写成这样：

$(function(){
  // 编写代码
})

另外，$(document)也可以简写为$()。当$()不带参数时，默认参数就是“document”，因此可以简写为：

$().ready(function(){
    // 编写代码
})

3种方式都是一样的功能，读者可以根据自己的喜好，选择其中的一种。

希望本文所述对大家的jQuery程序设计有所帮助。