jQueryのreadyイベントについての質問です。

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で読み込むなど。
どなたかよろしくお願いします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/09/28 22:04:58
  • 終了:2013/09/29 19:24:11

ベストアンサー

id:a-kuma3 No.3

a-kuma3回答回数4537ベストアンサー獲得回数18882013/09/29 08:35:41

ポイント33pt

ソースを読んでみると、三つが同じものだということが分かります。

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件のコメントを見る
id:appfb

ご回答ありがとうございます。
中身を見て証明してくださるとは恐れ入りましたm(_ _)m
凄くスッキリしました。
本当にありがとうございます。

2013/09/29 15:41:15
id:a-kuma3

いえいえ、良い機会をもらって、ぼくも感謝です :-)

2013/09/29 18:18:23

その他の回答(2件)

id:Cherenkov No.1

Cherenkov回答回数1503ベストアンサー獲得回数4932013/09/29 00:30:24

ポイント34pt

(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>

参考:

id:appfb

ご回答ありがとうございます。

> $(function(){で囲まずに、直に $.get(~とか書けばいいのでは。
了解しました。
デモまで紹介いただいて大変勉強になりました。
参考ページもご紹介いただきありがとうございます。
今夜じっくり見てみます。
ありがとうございました。

2013/09/29 15:38:52
id:windofjuly No.2

うぃんど回答回数2625ベストアンサー獲得回数11492013/09/29 05:26:30

ポイント33pt

(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 を使うのは判読性をよくしたいために使う程度ということでした。
皆様には多大なご迷惑をおかけして申し訳ありません。

id:appfb

ご回答ありがとうございました。
違う視点からのご意見参考になります。

2013/09/29 15:48:03
id:a-kuma3 No.3

a-kuma3回答回数4537ベストアンサー獲得回数18882013/09/29 08:35:41ここでベストアンサー

ポイント33pt

ソースを読んでみると、三つが同じものだということが分かります。

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件のコメントを見る
id:appfb

ご回答ありがとうございます。
中身を見て証明してくださるとは恐れ入りましたm(_ _)m
凄くスッキリしました。
本当にありがとうございます。

2013/09/29 15:41:15
id:a-kuma3

いえいえ、良い機会をもらって、ぼくも感謝です :-)

2013/09/29 18:18:23

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません