JavaScript window.onload 和 jQuery $(document).ready() 的差異
在撰寫頁面的 JavaScript 或 jQuery 時,通常會利用 window.onload 事件或 $(document).ready() 事件來確保 DOM 完全載入,不過兩者仍有以下差異。
window.onload 會等網頁的全部內容,包括圖片,CSS及 <iframe> 等外部內容都載入後才會觸發,但 $(document).ready() 在 Document Object Model (DOM) 載入後就會觸發,所以順序上$(document).ready() 會比 window.onload 先執行。
window.onload 是 JavaScript 的原生事件,而 $(document).ready() 是 jQuery 的事件(其實是透過監聽 JavaScript 的 DOMContentLoaded 事件來實現)。
window.onload 的用法如下:
window.onload = function() {
// console.log("window loaded")
};
$(document).ready() 的用法如下:
$(document).ready(function() {
console.log("document ready");
});
// 也可簡寫成
$(function() {
console.log("document ready");
});
jQuery 轉為 JavaScript: var jsObject=$("#id").get(0);
JavaScript 轉為 jQuery: var $object=$(document.getElementById("id"));
JavaScript 呼叫 jQuery 方法:
function getResult(){
$().getFuc();
};
$(function(){
$.fn.getFuc=function(){
alert("1111111111111");
}
});
jQuery 呼叫 JavaScript 方法:
$("#button3").click(function () {
getFuc();
});
function getFuc(){
alert("111111");
}
在 HTML 中使用 onclick 方法與 jQuery 的事件監聽有何差異 (JS 亦能實現) ?
onclick 通常是在滿足以下條件時才優先於 .click 的方法: