jQuery $(document).ready()

前陣子跟新同事聊天的時候聊到,$(document).ready(function(){}});的問題,有同事就舉了個例子來說明,其實小蛙沒有真正去研究過為什麼要寫這個,只知道「寫了比較保險」,聽過例子之後恍然大悟,原來有這麼一層原因在。

$(document).ready(function(){}});
用最最白話的方式來說,就是說當整個HTML元素都被載入之後,才開始做以下動作。咦?還是覺得不重要?同事舉了一個簡單的例子
<html>
  <head>
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
      alert($('#mydiv').text());
    </script>
  </head>
  <body>
    <div id="mydiv">mydiv</div>
  </body>
</html>

上面的例子執行後會發現,alert出來空白的東西,並不符合我們的預期,預期應該要印出mydiv的字樣。如果把alert包在$(function(){}});裡面試試

<html>
  <head>
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
      $(function(){alert($('#mydiv').text());});
    </script>
  </head>
  <body>
    <div id="mydiv">mydiv</div>
  </body>
</html>

就如同預期的印出 mydiv 字樣了!會造成這個結果的原因是,head部分的JS程式碼在整個網頁還沒完整載入前就已經先執行,因此找不到 mydiv 這個 DOM 元素,而將alert程式碼放在 $(function(){}); 之中,等到整個網頁元素載入完成後才執行,自然就可以找到 mydiv 這個元素而印出當中的值了。其實這部分應該算是JavaScript基礎班,小蛙真是覺得不太好意思。

附帶一提,小蛙為什麼有時候忘記加$(function(){});也還是可以正常執行呢?是因為小蛙習慣把JavaScript寫在網頁的最後,如果沒有”意外”的話,會是可以正常執行的(寫$(function(){});是好習慣!記下來吧!)。例如:

<html>
  <head>
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
  </head>
  <body>
    <div id="mydiv">mydiv</div>
  </body>
</html>
<script type="text/javascript">
  alert($('#mydiv').text());
</script>

另外在 jQuery官網 中提到

All three of the following syntaxes are equivalent:
$(document).ready(handler)
$().ready(handler) (this is not recommended)
$(handler)

也就是說$(document).ready(function(){}); 可以縮寫成 $(function(){}});,這兩個是一樣的意思(既然一樣,為什麼不選短的來用呢 @@?)

更多內容可參考 jQuery 官網此討論串

    發佈留言

    發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

    這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料