jQueryの勉強を始めたばかりで頭が混乱しているのですが、なんだか以下のページを念入りに読んでいると、以下の3つは同義のように思えるのですが勘違いでしょうか??
つまり、すべてreadyイベントが実行されていると。
http://www.jquerystudy.info/tutorial/intro/ready.html
(1)$(function(){
(2)$(document).ready(function(){
(3)jQuery(document).ready(function(){
そうならば、DOM要素が読み込まれる前にjQueryを実行したい場合、どのように書けばいいのでしょうか?
例えば、xmlファイルをajaxで読み込むなど。
どなたかよろしくお願いします。
ソースを読んでみると、三つが同じものだということが分かります。
http://code.jquery.com/jquery-1.10.2.js
60 : // Define a local copy of jQuery 61 : jQuery = function( selector, context ) { 62 : // The jQuery object is actually just the init constructor 'enhanced' 63 : return new jQuery.fn.init( selector, context, rootjQuery ); 64 : }, 119 : jQuery.fn = jQuery.prototype = { 124 : init: function( selector, context, rootjQuery ) { 211 : // HANDLE: $(function) 212 : // Shortcut for document ready 213 : } else if ( jQuery.isFunction( selector ) ) { 214 : return rootjQuery.ready( selector ); 215 : } 1000 : // All jQuery objects should point back to these 1001 : rootjQuery = jQuery(document); 9774 : // Otherwise expose jQuery to the global object as usual 9775 : window.jQuery = window.$ = jQuery;
まず、いきなり最後の方に飛んで、9775行目。
これで jQuery() と $() が同じものだ、ということが分かります。
つまり、質問の (2) と (3) が同じということです。
最初に戻って、60~64行目のあたり。
ここが jQuery の中身で、実体は jQuery.fn.init() の戻り値だと分かります。
じゃあ、jQuery.fn.init は何?、というのが 119行目からです。
ちょっと長いんですが、質問の (1) にあたる $(function(){ ... }) の呼び出しは、第一引数 selector が関数のときの処理である 213行目からになります。
rootjQuery.ready() なんですね。
rootjQuery って何よ、というのが 1001行目。
jQuery(document) です。
つまり (1) の書き方は、jQuery(document).ready(function() { ... }) と同じということです。
jQuery と $ が同じものだと分かってますから、(1) と (2) が同じものだということが分かります。
(1)(2)(3)は同じ。
headタグの中で、scriptタグでjQueryを読み込んだ後に、$(function(){で囲まずに、直に $.get(~とか書けばいいのでは。以下のデモでbodyの文字が表示される前にjQueryメソッドが使えていることが確認できます。
demo: http://jsfiddle.net/cherenkov/fYs8X/
<html> <head> <script id="jq" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> alert('jQueryは読み込まれているが、DOM構築の前。'); alert($('#jq').attr('src')); </script> </head> <body> DOMです。 </body> </html>
参考:
ご回答ありがとうございます。
> $(function(){で囲まずに、直に $.get(~とか書けばいいのでは。
了解しました。
デモまで紹介いただいて大変勉強になりました。
参考ページもご紹介いただきありがとうございます。
今夜じっくり見てみます。
ありがとうございました。
(1)同義ではありません
$(function(){ は、スクリプトが読み込まれた時点で実行されることになっているため、
実際の実行タイミングは環境依存となります。
(Cherenkov さんご回答のfunction宣言無しでの記述方法も、
スクリプトが読み込まれた時点で実行されます。)
$(document).ready(function(){
ならびに jQuery(document).ready(function(){ は、
DOM構造を読み込んだ時点で実行させる場合に用います。
jQueryが本来の形で$は省略形です。
$を使うようなライブラリを併用するならば省略せずにjQueryと記述しますが、
そのような使い方を身近では聞いたことはなく省略形の$しか使ってません。
(2)DOM要素が読み込まれる前にjQueryを実行したい
読み込み前だと、HTMLタグなどの要素も不確定な状態ですから、
対象のタグ無しとしてエラーになったり、
画面出力できなかったりする恐れがあります。
HTML読み取り後&画面に表示される前の段階で、
確実に処理を行わせたいならばreadyを使いましょう。
=====
追記:
間違った部分に取り消し線を入れました。
本来の形 | jQuery(document).ready(function(){ |
---|---|
jQueryの省略形 | $(document).ready(function(){ |
readyの省略形 | $(function(){ |
ready を使うのは判読性をよくしたいために使う程度ということでした。
皆様には多大なご迷惑をおかけして申し訳ありません。
ご回答ありがとうございました。
違う視点からのご意見参考になります。
ソースを読んでみると、三つが同じものだということが分かります。
http://code.jquery.com/jquery-1.10.2.js
60 : // Define a local copy of jQuery 61 : jQuery = function( selector, context ) { 62 : // The jQuery object is actually just the init constructor 'enhanced' 63 : return new jQuery.fn.init( selector, context, rootjQuery ); 64 : }, 119 : jQuery.fn = jQuery.prototype = { 124 : init: function( selector, context, rootjQuery ) { 211 : // HANDLE: $(function) 212 : // Shortcut for document ready 213 : } else if ( jQuery.isFunction( selector ) ) { 214 : return rootjQuery.ready( selector ); 215 : } 1000 : // All jQuery objects should point back to these 1001 : rootjQuery = jQuery(document); 9774 : // Otherwise expose jQuery to the global object as usual 9775 : window.jQuery = window.$ = jQuery;
まず、いきなり最後の方に飛んで、9775行目。
これで jQuery() と $() が同じものだ、ということが分かります。
つまり、質問の (2) と (3) が同じということです。
最初に戻って、60~64行目のあたり。
ここが jQuery の中身で、実体は jQuery.fn.init() の戻り値だと分かります。
じゃあ、jQuery.fn.init は何?、というのが 119行目からです。
ちょっと長いんですが、質問の (1) にあたる $(function(){ ... }) の呼び出しは、第一引数 selector が関数のときの処理である 213行目からになります。
rootjQuery.ready() なんですね。
rootjQuery って何よ、というのが 1001行目。
jQuery(document) です。
つまり (1) の書き方は、jQuery(document).ready(function() { ... }) と同じということです。
jQuery と $ が同じものだと分かってますから、(1) と (2) が同じものだということが分かります。
ご回答ありがとうございます。
中身を見て証明してくださるとは恐れ入りましたm(_ _)m
凄くスッキリしました。
本当にありがとうございます。
いえいえ、良い機会をもらって、ぼくも感謝です :-)
ご回答ありがとうございます。
2013/09/29 15:41:15中身を見て証明してくださるとは恐れ入りましたm(_ _)m
凄くスッキリしました。
本当にありがとうございます。
いえいえ、良い機会をもらって、ぼくも感謝です :-)
2013/09/29 18:18:23