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(){}});，這兩個是一樣的意思(既然一樣，為什麼不選短的來用呢 @@?)