前陣子跟新同事聊天的時候聊到,$(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 官網此討論串

 

相關文章

SSL For Free – 免費又有綠色鎖頭的 SSL Certificates

之前聽說 Google 會優先搜尋有 https 的網頁 (參考:
2016-07-07 23:00:54
hans

8

Android Vuforia with jPCT-AE (5) – 多重模型載入,以 obj 為例

要進到這系列最後一篇文章了,這篇文章拖了很久,一直沒有時間整理,結果到最後 ... 程式碼留下來了,記憶卻有些模糊了,這邊小蛙配著程式碼盡可能的把還記得的東西寫下來。
2016-07-06 11:24:19
hans

8

Android Vuforia with jPCT-AE (4) – 載入 3DS 測試

延續 jPCT-AE Loader 載入模型的部份,這篇要記錄載入 3ds 檔案格式的方法,基本上跟前面幾個 obj, md2 的方法差不多,只有一些小小的變化而已。
2016-07-06 10:24:33
hans

8

Android Vuforia with jPCT-AE (3) – 載入 md2 測試

前兩篇介紹如何直接透過 jPCT-AE 直接繪圖以及載入 .obj 檔案,這邊繼續介紹 jPCT-AE 載入 md2 的方法,載入動作大致上類似,唯一不同的只有 texture 設定部份。
2016-07-06 09:24:43
hans

8

Android Vuforia with jPCT-AE (2) – 載入 obj 測試

上一篇 Android Vuforia with jPCT-AE (1) –
2016-07-06 08:24:55
hans

8

Android Vuforia with jPCT-AE (1) – 基本範例

說來慚愧,從 Google Adsense 被 ban 之後,就好久沒有發文了,站上 Vuforia 的文章也已經是好久以前的事情了 (遠目),最近有專案要用到 Vuforia,爬以前的文回來看,蛙哩咧 ... 現在已經更新到 Vu
2016-07-06 07:57:58
hans

8

ClickForce (MobiForce) 當機問題

這真是個浪費時間又漫長的過程,CF 推出新版後台以及新版 SDK 的時候,小蛙就下載來測試,一開始小蛙直接套在「我的股票精算師」上,但只要一套上去就當機 ...
2015-09-02 10:32:51
hans

8

我的股票精算師備份功能

常遇到使用者詢問「我的股票精算師」要怎麼備份,這篇記錄一下,需要寫怎麼備份表示軟體設計上有很大的問題,造成使用者使用上的困難,但小蛙最近沒有時間去做修改 ... 只好委屈精算師的使用者了 ><
2015-02-06 18:32:07
hans

8

第一次從淘寶買小米盒子3

最近阿咕有在大螢幕上看韓劇的需求,剛好搭上 Chromecast 的上市,survey 了一些 Android 電視棒。這篇記錄這幾天的經過。

2015-01-04 23:36:33
hans

8




 回覆

你可以使用以下語法 HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="">

(required)

(required)

   
© 2012 蛙齋 Suffusion theme by Sayontan Sinha