[點(diǎn)晴永久免費(fèi)OA]【JavaScript】Jquery中的(function($){...})(jQuery)
當(dāng)你第一眼看到“(function($){...})(jQuery)”的時(shí)候。你有什么感覺(jué)？呵呵呵，我當(dāng)時(shí)還是止不住的從心底里罵了一句——操，這他媽什么勞什子。時(shí)過(guò)境遷，對(duì)于如今無(wú)比倚重Jquery的我，自感當(dāng)時(shí)的自己是那么的無(wú)知，今天忙里偷閑。解釋一下到底“(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>說(shuō)明：在瀏覽器中運(yùn)行上面代碼。會(huì)彈出一個(gè)對(duì)話(huà)框。對(duì)話(huà)框的內(nèi)容為GaoHuanjie。 上面代碼中運(yùn)行的Javascript腳本和“(function($){...})(jQuery)”是一樣的。也就是說(shuō)“(function($){...})(jQuery)”中的函數(shù)會(huì)自己主動(dòng)被運(yùn)行，那么到底該如何理解“(function($){...})(jQuery)”呢？“(function($){...})(jQuery)”實(shí)際上表示的是已處于調(diào)用狀態(tài)的匿名函數(shù)：function($){...}是定義的匿名函數(shù)，參數(shù)為$（之所以將參數(shù)聲明為$是為了不與其它庫(kù)沖突）；為了調(diào)用該函數(shù)則在該匿名函數(shù)的后面添上了括號(hào)和實(shí)參（這里為jQuery），但又由于操作符的優(yōu)先級(jí)，函數(shù)本身也須要用括號(hào)，所以又為匿名函數(shù)加入了括號(hào)。 釋疑解惑： 一、我運(yùn)行以下代碼為什么報(bào)錯(cuò)——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腳本時(shí)確實(shí)會(huì)出現(xiàn)故障，假如為jQuery加入英文雙引號(hào)，再次使用瀏覽器運(yùn)行上述腳本則不會(huì)出錯(cuò)。為什么不加就會(huì)出錯(cuò)呢，呵呵呵，事實(shí)上這里的jQuery還是一個(gè)變量。假設(shè)為上述代碼引入jQuery庫(kù)，再次使用瀏覽器運(yùn)行上述代碼則不會(huì)出現(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庫(kù)后之所以不會(huì)出錯(cuò)是由于jQuery庫(kù)中定義了jQuery變量。 二、和$(function(){ })相比，(function($){...})(jQuery)的運(yùn)行時(shí)機(jī)也是在網(wǎng)頁(yè)DOM載入完成后才運(yùn)行嗎？ 不是的，比方例如以下樣例： <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> 上述樣例在瀏覽器中運(yùn)行的時(shí)候會(huì)報(bào)錯(cuò)。究其原因(function(){...})()函數(shù)的運(yùn)行時(shí)機(jī)并非在DOM載入完成后才運(yùn)行，而是隨著頁(yè)面自上而下來(lái)運(yùn)行，假設(shè)將其改成例如以下代碼則再次使用瀏覽器運(yùn)行腳本則不會(huì)出現(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>一句話(huà)：“$(function(){ });”用于存放操作DOM對(duì)象的代碼，運(yùn)行當(dāng)中代碼時(shí)DOM對(duì)象已存在；“(function(){})(jQuery);”用于存放開(kāi)發(fā)插件的代碼，運(yùn)行當(dāng)中代碼時(shí)DOM不一定存在。 該文章在 2023/4/28 14:53:01 編輯過(guò) |
關(guān)鍵字查詢(xún)
相關(guān)文章
正在查詢(xún)... 
|
400 186 1886
