$.ready() – 記下來 https://noter.tw 一路上踩到的坑、遇到的問題，一點一滴記下來，希望能幫助到需要的人~ Wed, 04 Dec 2019 01:23:05 +0000 zh-TW hourly 1 https://wordpress.org/?v=6.6.3 https://noter.tw/wp-content/uploads/cropped-old-1130742_1920-1-32x32.jpg $.ready() – 記下來 https://noter.tw 32 32 jQuery $(document).ready() https://noter.tw/2301/jquery-document-ready/ https://noter.tw/2301/jquery-document-ready/#respond Tue, 25 Sep 2012 14:05:22 +0000 http://wazai.net/?p=2301 前陣子跟新同事聊天的時候聊到，$(document).ready(function(){}});的問題，有同事就舉了個例子來說明，其實小蛙沒有真正去研究過為什麼要寫這個，只知道「寫了比較保險」，聽過例...

這篇文章 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 官網 或 此討論串。

這篇文章 jQuery $(document).ready() 最早出現於 記下來。

]]> https://noter.tw/2301/jquery-document-ready/feed/ 0