JQuery的ready函數與JS的onload的區別詳解

時間 2019-12-02

標籤 jquery ready 函數 onload 區別詳解欄目 JQuery 简体版

原文原文鏈接

JQuery的ready函數與JS的onload的區別：
1.執行時間
window.onload必須等到頁面內包括圖片的全部元素加載完畢後才能執行。
$(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢。javascript

2.編寫個數不一樣
window.onload不能同時編寫多個，若是有多個window.onload方法，只會執行一個
$(document).ready()能夠同時編寫多個，而且均可以獲得執行html

3.簡化寫法
window.onload沒有簡化寫法
$(document).ready(function(){})能夠簡寫成$(function(){});java

在我之前的開發中，通常用到javascript，我都是採用jquery的模式，也就是大多數時候，第一行寫的是：jquery

$(document).ready(function(){函數

…ui

});xml

這個時候，不必定要等全部的js和圖片加載完畢，就能夠執行一些方法，不過有些時候，必需要等全部的htm

元素都加載完畢，才能夠執行一些方法的時候，好比說，部分圖片或者什麼其餘方面尚未加載好，這個時候，點擊某些按鈕，會致使出現意外的狀況，這個時候，就對象

須要用到:圖片

$(window).load(function() {

…

});

eg:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<head>

<title>ready和js中的onload的區別</title>

//js中window對象的onload屬性執行jsFunction1函數

window.onload=jsFunction1;

//js中window對象的onload屬性執行jsFunction2函數

window.onload=jsFunction2;

//jquery的ready方法執行jqFunction1函數

$(document).ready(jqFunction1);

//jquery的ready方法執行jqFunction2函數

$(document).ready(jqFunction2);

//jsFunction1函數

function jsFunction1(){

alert("jsFunction1");

}

//jsFunction2函數

function jsFunction2(){

alert("jsFunction2");

}

//jqFunction1函數

function jqFunction1(){

alert("jqFunction1");

}

//jqFunction2函數

function jqFunction2(){

alert("jqFunction2");

}

</script>

</head>

<body>

<h1>ready和js中的onload的區別</h1>

</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。