jQuery ready() 方法

jQuery 事件ready() 方法用作 jQuery 中的一個函式，它確保您的程式碼僅在文件物件模型 (DOM) 完全載入後才執行。

使用此方法可以防止 JavaScript 程式碼在頁面上呈現 HTML 元素之前執行，這可能會導致錯誤。

語法

以下是 jQuery 事件ready() 方法的語法：

$(selector).ready(function)

引數

此方法接受一個可選引數作為函式，如下所述：

function - 一個可選函式，在 DOM 準備好時執行。

返回值

此方法沒有任何返回值。

示例 1

以下是 jQuery 事件ready() 方法的基本示例：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
</body>
<script>
    $(document).ready(function(){
       alert("Hi there...!");
    })
</script>
</html>

輸出

上述程式顯示一個彈出警報訊息：

示例 2

以下是 jQuery 事件ready() 方法的另一個示例。我們對段落標籤使用滑動效果，它只會在整個頁面完全載入後執行：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
    <p>To hide or show this message, click on the button below</p>
    <button>Toggle the above element</button>
</body>
<script>
    $(document).ready(function(){
        $('button').click(function(){
            $('p').slideToggle();
        });
    })
</script>
</html>

輸出

執行上述程式後，將顯示段落 (p) 和按鈕元素。單擊按鈕時，段落元素將在隱藏和顯示之間切換：

示例 3

以下程式更改 div 元素的背景顏色，一旦整個頁面完全載入：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    div{
        color: white;
        width: 200px;
        padding: 10px;
    }
</style>
</head>
<body>
    <div>Tutorialspoint</div>
</body>
<script>
    $(document).ready(function(){
        $('div').css({"background-color": "green"});
    })
</script>
</html>

輸出

執行上述程式後，將顯示一個帶有綠色背景的 div 元素：

jquery_ref_events.htm

列印頁面