Jqueryとjavascriptのスコープ

Question

<script type="text/javascript" src="jquery-1.7.2.js"></script> 
<script type="text/javascript"> 

var mySite={}; 

mySite.title=$('h1'); 
mySite.makeRed= function(){ 
return mySite.title.css('color','red'); 
}; 


$(document).ready(function() { 

mySite.makeRed(); 


}); 


</script> 

おはよう。関数内で呼び出されたメソッドが何も返さないのはなぜですか？

Answer 1

これらのスクリプトタグがドキュメントのHEADにあるとします。

準備ができハンドラ外でこれを行うと：

mySite.title=$('h1'); 

要素h1は、おそらくDOMにはまだ存在しません。これはレディハンドラの目的です：DOMが動作する準備ができていることを確認してください。

本文の末尾（</body>タグの直前）にスクリプトタグを移動することもできます。これは、DOMが逐次的に解析されるため、レディハンドラと同じ結果になります。

または、準備ができているハンドラ内でH1要素を取得できます。

Answer 2

スペルミスがあります。

var mySite={}; 

mySite.title=$('<h1/>').html("Hello World"); // Set some text and create the tag tag! 

mySite.makeRed= function(){ 
return mySite.title.css('color','red'); 
}; 


$(document).ready(function() { 



    $("body").append(mySite.makeRed()); // Append it to the dom 

});​ 

http://jsfiddle.net/eZzYz/1/