[jQuery]教學-網頁載入後再執行,jQuery(document).ready()與jQuery(window).load() 的差異

0. jQuery 介紹:

什麼是 jQuery?依照 jQuery 官方網站這麼說:

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

jQuery是一個快速、小巧,功能豐富的 JavaScriptc 函式庫。 透過易於使用的API在大量瀏覽器中運行,使得HTML文檔遍歷和操作,事件處理,動畫和Ajax更加簡單。 通過多功能性和可擴展性的結合,jQuery改變了數百萬人編寫JavaScript的方式。

jQuery 的優點有哪些?

1. 官方以及相關社群,提供非常廣泛、詳細的支援文件,這對於投入的開發者而言非常重要!
2. 簡潔、輕量的檔案,壓縮後檔案大約 32kB (v1.12.4)不算笨重。
3. 容易學習,學習曲線容易,只要你有 JavaScript 入門的基礎,不用再花費太多時間、心力重新再去學習新語法,網路社群提供非常大量、解決的支援。
4. 不用去煩惱跨瀏覽器 (cross-browser) 的問題,jQuery 已經幫你作好了 (IE, Firefox, Safari, Opera, Chrome)、並且支援 HTML5、以及 CSS3。
5. jQuery發揮Open Source開放程式碼的優點,社群也非常的活躍,開發者可以有很多網路上提供、支援、免費的 plugin 用

除了 jQuery 還有哪些類似的好用的函式庫呢?例如:Twitter 的 Bootstrap、Google 的 angular、Facebook 的 react三種比較盛行。

jQuery自2.0版本後,已經除去對IE 6-8的支援以提高效能,並降低檔案大小。使用時,要注意。

 

1. 如何載入引入 jQuery,語法非常的簡單:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

 

2. jQuery 二種網頁載入執行的語法:

● jQuery(document).ready(function(){...})或$(function(){...}):當「網頁本身HTML」載入後就觸發。

 jQuery(document).ready(function(){...}),也可以簡寫為 $(function(){...}),我們的習慣是直接使用後者$(function(){...}),簡潔俐落。

一般而言,不會等到網頁所有的元素都下載完才觸發程式,因為現在的網友沒有耐心等待,通常一半就開始下個動作了,因此,大多我們都會將程式寫在 $(function(){...})裡。

● jQuery(window).load(function(){...}):等到「網頁HTML標籤中引用的圖檔、內嵌物件(如Flash)、IFrame」所有的物件都載入後,才會被觸發。

而$(window).load(fn)比較適合一些需要等待圖檔或元素全部載完才可以進行的程式,例如: 檢查圖檔長寬。

另外,jQuery(window).load(fn)的事件和 JavaScript 裡的 window.onload 事件可說是一模一樣,寫在這裡面的事件,如剛剛說的都會等到整個視窗裡,所有的元素都已經全部下載完後才會執行,例如該頁面有 50 張圖片、2個flash,崁入2個iframe,就會等 50張圖片、2個flash、2個iframe都下載完畢才會開始執行寫在這裡面的事件。

 

3. jQuery 三種常見不同的架構

● 第一種$(function(){...});

$(function(){
        // Document is ready
});
其作用和 $(document).ready()一樣 ,用意在DOM載入後執行ready()方法。

● 第二種(function($) {...})(jQuery)

(function($) {
        // Here “$" is a jQuery reference
})(jQuery)
基本上是()(para)匿名方法(anonymous function),傳承jQuery的函式庫,jQuery plugins都是用這樣的架構。

● 第三種$.fn.myFunctionName = function(){...}

$.fn.myFunctionName = function(){
        // script codes
}
自己定義function

 

 

  • Top