jQuery入門講座使い方-メソッドと返値

メソッドと返値

メソッドで情報を取得する

前回、メソッドは「何をする」という述語の部分を担うと説明しました。しかし別の役目もあるのです。それが情報の取得です。返値の受け取り方は通常のjavaScriptと同じように＝（代入演算子）を利用して左辺の変数に代入します。

返値を受け取る: 返値 = jQuery(セレクタ).メソッド(引数)
※メソッドによっては引数は必要ありません。

サンプルを利用して実際に情報が取得できるか確認しましょう。サンプル（01/03_01.html）を開くとアラートが表示されますが、アラートは閉じてjQueryを確認して下さい。

以下の様にtextメソッドによって得られた情報を＝（代入演算子）によって左辺の変数testに代入しています。そしてalert文で変数testの内容を確認できるようにしています。ですので、サンプルを開くとdivタグに挟まれたテキスト「Let's study jQuery!」がアラートで表示されるというわけです。

jQuery(document).ready(function () {
	var test = jQuery("div").text();
	alert(test);
});

引数も合わせて使えるの？（同じメソッドに見えても仕様が異なる）

前述のサンプルではtextメソッドに引数を設定しませんでした。textメソッドは引数を設定しないと文字は変更されません。では、もし引数を設定するとどうなるのでしょうか？実際にサンプル（01/03_02.html）で確認してみましょう。jQueryのソースは以下の様になっておりdivに文字を設定し、その値を変数testに代入しています。前述のサンプルから予想するとalertで「jQueryを始めよう！」と表示されそうですが、実際は[object object]と表示されます。

jQuery(document).ready(function () {
	var test = jQuery("div").text("jQueryを始めよう！");
	alert(test);
});

ここで注意しておくのは、メソッドには「情報を取得する」タイプと「何かを実行する」タイプの２つがあり、今回のtextメソッドのように綴りは同じでも構文や仕様が異なるものがあるという点です。構文や仕様が異なるのでリファレンスでも引数のあるtext(val)メソッドと引数のないtext()メソッドは別々に説明しています。

綴りが同じでも構文や仕様が異なるメソッドはtextメソッドのように「情報を取得する専用：text()」と「何を実行する：text(val)」で異なるケースがほとんどです。つまり引数の有無がポイントとなります。同じように見えるメソッドでも違う場合があるということは覚えておいて下さい。

メソッド (method): セレクタで選択した対象に対し「何がを実行する」仕組みです。また、メソッドの種類によっては返値によって「情報を取得」することもできます。

jQueryオブジェクトとは

前述のtext(val)メソッドでは返値は文字ではなく「jQueryオブジェクト」と呼ばれるものになります。ここでは、このjQueryオブジェクトについて説明します。とはいえ、説明はシンプルでjQueryオブジェクトはjQueryで主語として利用できるものを指します。つまりjQueryオブジェクトはjQueryのメソッドで直接操作できます。

サンプル（01/03_03.html）には以下のソースが書かれており、ページを開くとすぐに表示されている文字「jQueryを始めよう！」がフェードアウトして消えます。

以下の2行目でtext(val)メソッドの返値（jQueryオブジェクト）を変数testに代入し、それに対しjQuery(セレクタ)を書かずに直接fade()メソッドを実行しています。 ※fadeoutメソッドについては3章で詳しく説明します。

jQuery(document).ready(function () {
	var test = jQuery("div").text("jQueryを始めよう！");
	test.fadeOut();
});

このサンプルから変数testに代入されたのがdiv領域と確認できますが、ポイントは3行目でtestに続けて直接メソッドを書いている点です。通常のdivであればjQuery("div")と、前にjQueryが必要になります。なぜ必要ないかというと、変数testに代入されたのが直接メソッドで操作できる「jQueryオブジェクト」だからです。

jQuery(セレクタ)はjQueryオブジェクトを作成する仕組み

jQueryオブジェクトの説明が済むと、前回の紹介した構文「jQuery(セレクタ).メソッド(引数)」についても、より深く説明ができます。着目するのは「jQuery(セレクタ)」の部分です。これは結局jQueryで直接扱えないセレクタ（div等）をjQueryで扱えるjQueryオブジェクトに変換しているのです。

サンプル（01/03_04.html）には以下のソースが書かれています。jQuery(セレクタ)の部分を変数testに代入しています。そして次の行でfadeOutメソッドを利用してフェードアウトさせています。このサンプルからjQuery(セレクタ)でjQueryオブジェクトができていることが確認できます。

jQuery(document).ready(function () {
	var test = jQuery("div");
	test.fadeOut();
});

jQueryオブジェクト (jQuery object): jQueryで主語として扱えるもので、メソッドで直接操作できます。jQuery(セレクタ)という構文はjQueryで扱えないタグなどをjQueryオブジェクトに変換しているのです。

捕捉：文字を削除する

ここでtextメソッドの詳しい説明をしてもしょうがないのですが、初心者が勘違いしやすい点を説明しておこうと思います。もしtextメソッドでdivタグの文字をすべて消したい場合、以下のソースのようにメソッドの引数を空にしてしまう場合がありますが、これは間違いです。引数のないtext()メソッドは情報の取得専門ですから、文字の変化は起こりません。→引数を設定しないと文字は変更されません（01/03_05.html）

jQuery(document).ready(function () {
	jQuery("div").text();
});

では文字を削除する場合はどうするかというと、ヌルストリング（空の文字列）を引数に設定します。ヌルストリングとは以下の様にクォートだけで文字が入っていない文字列のことを指します。こうすることでdivの文字を空にすることができます。→ヌルストリングを利用してdivの文字を消す（01/03_06.html）

jQuery(document).ready(function () {
	jQuery("div").text("");
});

今回のサンプルでtext(val)メソッドでdivタグの文字を変更できることは確認できましたが、すべてのdivが同じように変化してしまうのは不都合です。特定のdivだけに絞って操作したい場合はどうするのか？次回はセレクタの絞り込みについて説明します。

次のページ：セレクタの絞り込み