[點晴永久免費OA]【JavaScript】Jquery中的(function($){...})(jQuery)
當前位置：點晴教程→點晴OA辦公管理信息系統
→『 經驗分享&問題答疑 』
當你第一眼看到“(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庫后之所以不會出錯是由于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不一定存在。 該文章在 2023/4/28 14:53:01 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
