jQuery 簡化 ready() 函式的調用寫法

在使用jQuery的過程中,調用ready()這個函式相當常見,它允許我們省略調用 $() 所指定的 document ,簡化寫法如下:

$().ready() ; 

更進一步的,基於 ready() 方法會被自動呼叫,你甚至可以直接將調用的方法整個省略,得到最省略的寫法:

$() ; 

考慮以下的範例畫面:


網頁上有三行文字訊息,分別調用 ready() ,將其配置於不同背景顏色的標籤所構成的區塊中,而訊息的內容表示 ready() 的調用語法。配置以下三個標籤,並設定不同的背景顏色以方便示範說明:

<body>
    <style="background-color:black;color:white;"  id="msg0"></p>
    <style="background-color:gray;color:white;" id="msg1"></p>
    <style="background-color:silver;color:white;" id="msg2"></p>
</body>


接下來撰寫示範 ready() 調用方式的程式碼:

<script>
        $(document).ready(function () {
            $('#msg0').html('Hello $(document).ready() !');
        });
        $().ready(function () {
            $('#msg1').html('Hello $().ready() !');
        });
        $(function () {
            $('#msg2').html('Hello $() !');
        });
</script>


其中調用了三次 ready() 方法,第一次是完整的典型寫法,第二次則省略了 document 物件,第三次甚至省略了整個 ready() 方法名稱,讓 jQuery 進行 ready() 的隱含呼叫直接執行其中的 function 內容。


沒有留言: