Jquery加載順序之$(document).ready用法

2016-12-02 1520 1 編輯:網站設計前端伍林 來源:程序建站書籍

我們經常用js做網頁特效,或者用js增添一些功能,那么你有沒有遇到過在js正確的情況下實現不了它所應有的效果呢?對于經常折騰網頁代碼的人來說,是一定會有這種經驗的,js代碼沒有錯誤,但是卻不執行。因為我們忽略了網頁在瀏覽器加載是有順序規則的,包括html,css,js以及三者混合頁面。今天著重說說$(document).ready(function(){})的用法,在jq中這一句等同于jquery(document).ready(function(){})也等同于$(function(){})。

舉個例子:有時候我們在js文件中直接用

function juli(){

var tags = $("#footer");....//功能函數

}

juli();

寫功能函數,然后我們在網頁頭部加載這個js文件,就會出現效果不出來的現象,原因在于當瀏覽器加載這個js文件的內容的時候,#footer這個id在網頁后面,還在就緒階段,還沒加載也即不存在#footer,當這個js讀不到這個id的時候自然就不能成功給#footer添加功能。

而解決辦法除了把這個js放在網頁最后加載之外,還有一個辦法就是通過$(document).ready(function(){})包住,這樣就可以解決加載順序造成的錯誤。如:

$(document).ready(function(){

function juli(){

var tags = $("#footer");....//功能函數

}

juli();

});

因為$(document).ready(function(){})里面的內容是規定在DOM(網頁文檔)加載完成之后網頁內容加載之前再執行的,也許很難理解,可以理解成html加載完成之后,圖片加載之前。當所有id都加載完成之后再去查找#footer這樣就能找到了,既可以完成js的功能實現。


閱讀延伸:

跟$(document).ready(function(){})類似的還有原生js的windows.onload(),如:

window.onload=function(){

alert("深正互聯");

}

window.onload()與$(document).ready(function(){})類似但又不同,window.onload()是在頁面所有元素(包括圖片,引用文件)加載完后才執行,既整個頁面所有東西都加載完成后再加載。

跟window.onload()和$(document).ready(function(){})類似還有body.onload,這個加載順序等同于windows.onload,只不過這個寫在html的body標簽上。如:<BODY onload="alert('body onload');alert(document.getElementById('testdiv').innerText)" onclick="alert('深正互聯');">

好網站建設公司

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
七星彩头尾 建筑最赚钱的证书 蘑菇头赚钱头像 模拟人生免费快速赚钱 梦幻低端剧情团赚钱么 118彩票苹果 百基拉+赚钱吗 今日头条具体怎么赚钱 挖片赚钱 捕鱼游戏赢现金 麻将单机版下载2013 csgo是最赚钱的游戏吗 什么都不赚钱 幸运彩票首页 原创歌曲怎么发行赚钱 数吗喷绘赚钱吗 下乡去送财神赚钱吗