調用來自不同背景

Question

JQuery的功能，這可能是一個非常基本的問題，但我想知道這種行爲

這是我的javascript代碼。我想知道爲什麼第二次調用foo不起作用。這裏是JSFiddle link

$.fn.foo = function(somestring){ 
    var $this = this; 
    $this.html(somestring); 
} 

$(function(){ 
    $('#container').foo("within function"); //this works 
}); 

$('#container').foo("outside"); //this does not 

Answer 1

的DOM is not滿載..那是它不會工作的原因..

所以，當你包住DOM Ready處理器等待被裝載在文檔中的代碼和然後運行裏面的代碼。

這可以確保任何代碼在其上運行之前的元素可以..

當HTML document is parsed，它分析自上而下。

因此，如果腳本包含在頭部分，那麼首先加載腳本，然後加載HTML結構。當您嘗試運行代碼時，它顯然不起作用，因爲該元素仍未解析..

所以包圍，在該處理器將確保該元素是要求他們的方法之前，可利用的。

Answer 2

這是因爲在處理body之前$('#container').foo("outside");進行評估。 $('#container')將返回長度爲0.這將在下面進行演示。

$.fn.foo = function(somestring){ 
    var $this = this; 
    $this.html(somestring); 
} 

$(function(){ 
    $('#container').foo("within function"); 
}); 

var element = $('#container'); 
console.log(element.length); //prints 0 
element.foo("outside"); 

Answer 3

如果腳本是在HTML文檔的其餘部分尚未解析尚頁的開頭，所以文檔看起來空的劇本，所以沒有#container的呢。

$(function() { ... }); 

爲（大約）相當於

Wait till the whole HTML file is loaded and ready 
Then execute function 

這樣的#container會在那裏，它會工作。使其工作的另一種方法是將腳本放在頁面的其餘部分下面，或者至少放在#container下面。