如何讓jquery開啟頁面就執行

在使用jQuery進行網頁開發時，有時候需要頁面載入後自動執行某些操作，例如設定初始顯示效果、顯示特殊的提示資訊等等。那麼要如何實現這個功能呢？本文就來介紹如何讓jQuery開啟頁面就執行。

一、使用jQuery的$(document).ready()函數

使用jQuery的$(document).ready()函數是最常用的一種方法，該函數指示當DOM載入完畢後，執行回呼函數中的程式碼。程式碼範例如下：

$(document).ready(function() {
  //执行的代码
});

如上程式碼所示，$(document).ready()函數中傳入的參數是一個函數，該函數會在DOM載入後執行。在該函數內可以編寫需要執行的jQuery程式碼。

二、使用jQuery的window.onload()函數

jQuery的window.onload()函數在頁面所有資源（包括圖片、樣式表等）載入完畢後才會執行。相對於$(document).ready()函數，window.onload()函數所包含的內容較為廣泛，因此執行時間會相對延長。程式碼範例如下：

$(window).on('load', function() {
  //执行的代码
});

與$(document).ready()函數不同的是，window.onload()函數的程式碼直到所有資源全部載入完畢才會執行。因此也可以在此處編寫一些需要等待資源載入完成後才能執行的程式碼。

三、使用立即呼叫函數

除了上述兩種方法，還可以使用立即呼叫函數的方式實作頁面載入後自動執行程式碼。立即呼叫函數是指將函數體封裝在一個小括號中，最後再加入另一個小括號執行函數。程式碼範例如下：

(function() {
  //执行的代码
})();

如上程式碼所示，程式碼中的$(function(){})等價於$(document).ready(function(){})。當程式碼內容較少時，可以使用封裝成匿名函數的方法來執行。

四、使用defer屬性

在頁面中引入外部的JavaScript資源時，可以使用defer屬性告訴瀏覽器繼續渲染頁面，同時等待JavaScript載入完成後再執行。例如下面的程式碼：

<script src="xxxx.js" defer></script>

在上述程式碼中，外部資源xxxx.js的載入、解析和執行過程不會影響頁面的渲染。當JavaScript載入完畢後，會等待解析佇列執行，直到該腳本的程式碼執行完成。

五、使用async屬性

與defer屬性不同，async屬性表示應該立即下載並且執行腳本，但是在執行該腳本的同時，不會停止解析文檔，也不會等待其他腳本的載入和執行。當網路速度較慢，下載和解析腳本需要一定時間時，可能會導致腳本在頁面的某些元素載入完成之前就開始執行了。用法如下：

<script src="xxxx.js" async></script>

以上是如何讓jQuery開啟頁面就執行的五種方法，其中$(document).ready()函數和立即呼叫函數是最常用的方法。在實際使用中，可以根據需要選用不同的方式進行操作。

以上是如何讓jquery開啟頁面就執行的詳細內容。更多資訊請關注PHP中文網其他相關文章！