Jquery中$(function(){})


1. 在哪書寫js文件

如果我們要執行一段js代碼,我們該怎么辦呢?

1.我們可以寫一個js文件,在js文件里寫執行函數,然后再<script src='...'> ... </script>,進行引用;

2.我們可以直接在HTML頁面下,插入腳本,同樣是<script src='...'> ... </script>,兩種方式沒什么區別,唯一的區別就是程序的解耦,所以當我們執行的js代碼不太多時候,我推薦在HTML頁面下直接書寫,反則...。

2. $(function(){}); 其實是一個簡寫,它等同於 jquery 的 $(document).ready(function(){})。

我們知道HTML頁面在JavaScript里面有BOM對象和DOM對象,BOM是瀏覽器對象模型,用來獲取或設置瀏覽器的屬性、行為,例如:新建窗口、獲取屏幕分辨率、瀏覽器版本號等。
DOM是文檔對象模型,用來獲取或設置文檔中標簽的屬性,例如獲取或者設置input表單的value值。
BOM的內容不多,主要還是DOM。

同樣的,我們可以用Jquery來操作BOM和DOM,這兒就引出了本文主旨:$(document).ready(function(){})

現在我們開始執行js文件,但這樣有個問題,就是對於某些瀏覽器來說,如果其中的代碼涉及到某個 dom 節點的位置在這段代碼之后的話就可能會失敗。原因是代碼在 html 文檔的前面,瀏覽器讀到它的時候就執行了,而 dom 節點在它后面瀏覽器還沒讀取到呢,所以不知道怎樣去操作這個節點,於是報錯了。你會說為什么不等到所有節點都讀取完了再回頭執行 js 代碼呢?關鍵是有些代碼就是想在頁面出來一部分時就執行了啊。所以對於那些在頁面讀取完才執行的代碼通常會放到 onload 中去。但 onload 又有自己的問題,比如 onload 的 window 的還有 body 的,執行的時機很是不好確定。於是 jquery 推出了 $(document).ready(function(){}) 它的設計目標有以下幾個(可看作 jquery 的 ready 函數與 js 的 onload 的區別):

1.執行時間

window.onload 必須等到頁面內包括圖片的所有元素加載完畢后才能執行;

$(document).ready() 是 dom 結構繪制完畢后就執行,不必等到加載完畢。

2.編寫個數不同

window.onload不能同時編寫多個,如果有多個window.onload方法,只會執行一個

$(document).ready()可以同時編寫多個,並且都可以得到執行。

特別是第二點,大大的方便了代碼初始化的分離操作(解耦),確實是 jquery 對開發人員的巨大貢獻。否則各個代碼塊中都要自己想辦法在初始化函數中加入自己的那一部分,會相當的混亂。

另外傳統是 onload 是這樣寫的:

<body onload="fn1(),fn2()"></body>

而我們提到的 $(document).ready() 是 dom 解析完成后,不用等待圖片等資源加載即可開始執行了,那么要等待的話怎么辦呢?難道要寫上面那種傳統的代碼嗎?當然不是,jquery 中是使用 $(window).load(function()。例如:

$(window).load(function() {alert("hello,我是jQuery!");});

而且這個函數同樣可以寫多個,它們之間同樣不會覆蓋。會依次順序執行


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM