[點晴永久免費OA]【JavaScript】Jquery中的(function($){...})(jQuery)
當你第一眼看到“(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)”中的函數(shù)會自己主動被運行，那么到底該如何理解“(function($){...})(jQuery)”呢？“(function($){...})(jQuery)”實際上表示的是已處于調用狀態(tài)的匿名函數(shù)：function($){...}是定義的匿名函數(shù)，參數(shù)為$（之所以將參數(shù)聲明為$是為了不與其它庫沖突）；為了調用該函數(shù)則在該匿名函數(shù)的后面添上了括號和實參（這里為jQuery），但又由于操作符的優(yōu)先級，函數(shù)本身也須要用括號，所以又為匿名函數(shù)加入了括號。 釋疑解惑： 一、我運行以下代碼為什么報錯——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腳本時確實會出現(xiàn)故障，假如為jQuery加入英文雙引號，再次使用瀏覽器運行上述腳本則不會出錯。為什么不加就會出錯呢，呵呵呵，事實上這里的jQuery還是一個變量。假設為上述代碼引入jQuery庫，再次使用瀏覽器運行上述代碼則不會出現(xiàn)故障： <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)的運行時機也是在網(wǎng)頁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(){...})()函數(shù)的運行時機并非在DOM載入完成后才運行，而是隨著頁面自上而下來運行，假設將其改成例如以下代碼則再次使用瀏覽器運行腳本則不會出現(xiàn)故障： <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);”用于存放開發(fā)插件的代碼，運行當中代碼時DOM不一定存在。 該文章在 2023/4/28 14:53:01 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
