jQuery的Read()方法取代原生JS詳解
- 高洛峰原創
- 2016-12-07 14:00:17913瀏覽
在jQuery 3.0的版本前, ready經典用法是用一個匿名函數，像這樣：
$(document).ready(function() {
// Handler for .ready() called.
});
jQuery 3.0 ready() 變化
jQuery 3.0 ready() 變化
jQuery 3.0 ready() 變化jQuery 3.00yQueryd ready方法：
在document元素上操作： $(document).ready(handler);
在空元素上操作: $().ready(handler);
）操作: $(handler);
上述所有命名的變種在功能上是等價的。無論是哪個元素，在DOM載入完畢之後其指定的處理程序都會被呼叫。換句話說，這裡的DOM載入完畢並不表示在文件中的某個具體的元素，例如img元素，載入完畢。相反，這裡表示的是整個DOM樹載入完畢。
在jQuery 3.0中,除了$(handler) 其他的ready方法都被棄用。
當DOM載入完成且元素能夠被安全存取時就會觸發ready事件。另一方面，load事件卻在DOM和所有資源載入後觸發。
可以像下面這樣使用load事件：
$(window).on("load", function(){
// Handler when all assets (including images) are loaded
});
ready 方法可以確保程式碼只在所有DOM元素能被安全操縱時才執行。 但這意味著什麼呢？這表示當你要執行的js程式碼嵌在HTML中某個片段中時，瀏覽器也要載入完以下元素才能執行。
就像下面這個例子一樣:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>.ready() tutorial</title>
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script>
$(function(){ // .ready() callback, is only executed when the DOM is fully loaded
var length = $("p").length;
// The following will log 1 to the console, as the paragraph exists.
// This is the evidence that this method is only called when the
// DOM is fully loaded
console.log(length);
});
</script>
</head>
<body>
<p>I'm the content of this website</p>
</body>
</html>
如果你要執行的javascript程式碼放在body末尾，你可能不需要使用ready()方法，因為瀏覽器解析到javascript時你可能試圖操縱而存取的DOM元素已經載入完了：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>.ready() tutorial</title>
</head>
<body>
<p>I'm the content of this website</p>
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script>
var length = $("p").length;
// The following will log 1 to the console, as the paragraph exists.
console.log(length);
</script>
</body>
</html>
原生JavaScript ready()替代
對於現代瀏覽器以及IE9+，你可以透過監聽DOMContentLoaded 事件內容的內容？
但是，請注意，如果事件已經發射，回呼將不會被執行。為了確保回呼總是運行，jQuery檢查文檔reference)的「readyState」屬性，如果屬性值變為 complete，則立即執行回呼函數：
document.addEventListener("DOMContentLoaded", function(){
// Handler when the DOM is fully loaded
});
包括domReady庫，已經實現了這個解決方案。
舊版的IE瀏覽器
對於IE8及以下的瀏覽器，你能使用onreadystatechange 事件去監聽文件的readyState 屬性：
var callback = function(){
// Handler when the DOM is fully loaded
};
if (
document.readyState === "complete" ||
(document.readyState !== "loading" && !document.documentElement.doScroll)
) {
callback();
} else {
document.addEventListener("DOMContentLoaded", callback);
}
任何瀏覽器上運行。這也會導致一個時間延遲，因為它會等待所有的資產被載入。