Jqueryでfunction ()と指定する場面のルールについて

Question

Jqueryを勉強しているのですが、いまいち指定のルールというかタイミングがわからないので教えてください。

$("div").click(function (){
	$("div").text("click!");
});

という感じで、指定したセレクタのあとに$("div").click(function (){　といった感じでfunctionを指定するルールと、

$("#hoge").css("font-size","30px");

といった感じで、そのまま記述方法があるのですが、(function (){　を指定するルールは何になりますでしょうか？イベント時の指定という事ですか？
(function (){を指定する何か明確なルールがあれば教えて頂けないでしょうか？
説明を見ても、この時はこういう記述ですとしか記載がなく混乱しております…。

Answer 1

functionはあくまで「関数」です。

例えばon()を例にとると引数の一覧にhandlerがあり説明に

Type: Function( Event eventObject [, Anything extraParameter ] [, ... ] )

とあります。

つまり、「指定のルール」が知りたいなら「リファレンスを確認しよう」ということになります。
「ルール」はいわば「仕様」なのでドキュメントで仕様を確認することで理解を深めます。

「なんとなく見つけたコードがそうやってたから」では自分がやりたいことをできるようにはならないので、「こういう仕様だからこう書いている」と確実にしていきましょう。

Comments

[yukina00235]

何度も書きながらリファレンスを参考にいたします。
有難うございます。

Answer 2

明確なルールは、jquery の関数が、関数を引数とするかどうかだと思います。

これで意味が分かるでしょうか？

例えば、click() 関数のリファレンスを見てみましょう。

.click() | jQuery API Documentation より

.click( handler )

と書いてあって、

handler
Type: Function( Event eventObject )
A function to execute each time the event is triggered.

のように handler のタイプは、Function( Event eventObject ) のように Event オブジェクトを引数に持つ関数であると明記されています。

Comments

[yukina00235]

有難うございます。
まだまだ腑に落ちてきませんが、記述しているうちになんとなくですがルールみたいなものが見えてきたような気がいたします。

Answer 3

以下の2つの違いに限ってどのように挙動するかを説明してみます。

[1]
まずこちらは、#hogeの要素の文字サイズが30pxになります。

$("#hoge").css("font-size","30px");

[2]
次にこちらは、#hoge要素をクリックするまで何も起きません。
クリックすると[1]と同じ挙動 (#hogeの要素の文字サイズが30px) になります。

$("#hoge").click(function() {
    $("#hoge").css("font-size","30px");
});

つまり「click」など書いているのはイベントを指定している箇所です。
何もしなくても実行されるのが[1]
クリックなどイベントを検知してはじめて実行されるのが[2]
です。

Comments

[yukina00235]

有難うございます。
同じ効果で.clickの有無でのfunction()の設定がわかりやすかったです。
完ぺきではないですが、とても理解が深まった気がいたします。

>>つまり「click」など書いているのはイベントを指定している箇所です。
やはりそうなのですね、何かして何かを起こす場合にこの書き方をするものだと今のところは理解しておきます。わかりやすいアドバイス有難うございました！！