jQueryの記述方法

Question

現在、ProgateでjQueryの学習をしています。
【要素を表示しよう】というLessonを行っています。

h1タグにtitleをimgタグにimageというタグをつけ、
jQueryを使い#titleにはshowを#imageにはfadeInで処理を行うという課題が与えられています。

$(function() {
$('#title').show();
$('#image').fadeIn();
});
と記述するのが正解のようなのですが、私は

$('#title').show();
$('#image').fadeIn();

と記述しました。

$(function() {

});
がどういう処理を行っているのか理解できません。
上記でどのような処理を行っているのでしょうか？

Answer 1

DOM(html)が読み込まれたらfunctionを実行するということをしています。
読み込みが済んでないと$('#title')でその要素を指定できません

Comments

[ganbaru]

回答ありがとうございます！
DOMとはJavaScriptからHTMLを変更する処理という認識であっていますか！？
$(function() {}); を書いたのと書いていないの、両方で実行したのですが結果は全く同じでした。

[kimurayutaka]

DOMはhtmlの文書のことです。
jqueryで指定したタイミングで読み込みが済んでいればうまくいきます

[ganbaru]

ありがとうございます。
読み込みが上手く行っているのでしたらなぜ、$(function() {}); を記述する必要があるのでしょうか？

[kimurayutaka]

scriptを、jqueryで指定したい要素を記述した後 (body要素の閉じタグの手前など)におけば記述の必要はないのですが、

[kimurayutaka]

head要素内にscriptをおいたりすると、その時点でheadよりも後ろのDOMは読み込まれていないので、エラーになります。どこにおいても問題のないように、$(function() を記述します

[ganbaru]

理解できました！
ありがとうございます！

Answer 2

$(function() {});

このような記法は、「即時関数」と呼ばれる記法で、読み込んだらすぐに実行される関数の記法です。

Comments

[akio221]

誤答です。すみません。削除依頼しました。orz