人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: appfb
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● Cherenkov
●34ポイント

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

参考:


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

2 ● うぃんど
●33ポイント

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


appfbさんのコメント
ご回答ありがとうございました。 違う視点からのご意見参考になります。

3 ● a-kuma3
●33ポイント ベストアンサー

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

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) が同じものだということが分かります。


a-kuma3さんのコメント
因みに、ぼくは (1) の書き方が (2) と違うと思ってました(なんとなく、だったんですけど)。 勉強になりました。

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

a-kuma3さんのコメント
いえいえ、良い機会をもらって、ぼくも感謝です <tt>:-)</tt>
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ