當你第一眼看到“(function($){...})(jQuery)”的時候,你有什麼感覺?呵呵呵,我當時還是止不住的從心底裡罵了一句,這他媽什麼勞什子。時過境遷,對於現在無比倚重Jquery的我,自感當時的自己是那麼的無知,今天忙裡偷閒,解釋一下究竟“(function($){...})(jQuery)”該怎樣理解:
代碼一:
<html>
<head>
<title>代碼一</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
(function(name){
alert(name);
})("GaoHuanjie");
</script>
</head>
<body>
</body>
</html>
說明:在浏覽器中運行上面代碼,會彈出一個對話框,對話框的內容為GaoHuanjie。
上面代碼中執行的JavaScript腳本和“(function($){...})(jQuery)”是一樣的,也就是說“(function($){...})(jQuery)”中的函數會自動被執行,那麼究竟該怎樣理解“(function($){...})(jQuery)”呢?“(function($){...})(jQuery)”實際上表示的是已處於調用狀態的匿名函數:function($){...}是定義的匿名函數,參數為$(之所以將參數聲明為$是為了不與其他庫沖突);為了調用該函數則在該匿名函數的後面添上了括號和實參(這裡為jQuery),但又由於操作符的優先級,函數本身也需要用括號,所以又為匿名函數添加了括號。
釋疑解惑:
一、我運行下面代碼為什麼報錯——jQuery is not defined:
<html>
<head>
<title>代碼二</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
(function($){
alert($);
})(jQuery);
</script>
</head>
<body>
</body>
</html>
嗯嗯,浏覽器在解析上述js腳本時確實會出現問題,假如為jQuery添加英文雙引號,再次使用浏覽器運行上述腳本則不會出錯,為什麼不加就會出錯呢,呵呵呵,其實這裡的jQuery還是一個變量,如果為上述代碼引入jQuery庫,再次使用浏覽器運行上述代碼則不會出現問題:
<html>
<head>
<title>代碼三</title>
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
(function($){
alert($);
})(jQuery);
</script>
</head>
<body>
</body>
</html>
本示例代碼主要用於揭示Jquery中的(function($){...})(jQuery),歡迎下載。
------------------------------------------分割線------------------------------------------
免費下載地址在 http://linux.linuxidc.com/
用戶名與密碼都是www.linuxidc.com
具體下載目錄在 /2014年資料/8月/12日/jQuery中的(function($){...})(jQuery)/
下載方法見 http://www.linuxidc.com/Linux/2013-07/87684.htm
------------------------------------------分割線------------------------------------------
在引入jQuery庫後之所以不會出錯是因為jQuery庫中定義了jQuery變量。
二、和$(function(){ })相比,(function($){...})(jQuery)的執行時機也是在網頁DOM加載完畢後才執行嗎?
不是的,比如如下例子:
<html>
<head>
<title>代碼四</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
(function(){
alert(document.getElementById("name").value);
})();
</script>
</head>
<body>
<input type="hidden" id="name" name="name" value="GaoHuanjie" />
</body>
</html>
上述例子在浏覽器中運行的時候會報錯,究其原因(function(){...})()函數的執行時機並不是在DOM加載完畢後才執行,而是隨著頁面自上而下來執行,如果將其改成如下代碼則再次使用浏覽器運行腳本則不會出現問題:
<html>
<head>
<title>代碼五</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<input type="hidden" id="name" name="name" value="GaoHuanjie" />
<script type="text/javascript">
(function(){
alert(document.getElementById("name").value);
})();
</script>
</body>
</html>
一句話:“$(function(){ });”用於存放操作DOM對象的代碼,執行其中代碼時DOM對象已存在;“(function(){})(jQuery);”用於存放開發插件的代碼,執行其中代碼時DOM不一定存在。
--------------------------------------分割線 --------------------------------------
jQuery權威指南 PDF版中文+配套源代碼 http://www.linuxidc.com/Linux/2013-10/91059.htm
jQuery實戰 中文PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90631.htm
《jQuery即學即用(雙色)》 PDF+源代碼 http://www.linuxidc.com/Linux/2013-09/90383.htm
鋒利的jQuery(第2版) 完整版PDF+源碼 http://www.linuxidc.com/Linux/2013-10/91527.htm
jQuery完成帶復選框的表格行高亮顯示 http://www.linuxidc.com/Linux/2013-08/89406.htm
jQuery基礎教程(第4版) PDF 完整高清版+配套源碼 http://www.linuxidc.com/Linux/2014-03/98162.htm
--------------------------------------分割線 --------------------------------------
jQuery 的詳細介紹:請點這裡
jQuery 的下載地址:請點這裡