デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
1章:jQuery入門
2章:jQuery基礎
3章:jQuery発展
番外編:研究

情報の取得

概要

2つの情報を取得する仕組み(返値)

前ページで紹介した「メソッド」には情報を取得するものもあります。その場合は返値(メソッドから返される値なので「かえりち」と呼ばれます)で情報を渡します(javaScriptと同じく左辺の変数で受け取ります)。
情報を受け取る時もメソッドの後の( )は必要です

情報を取得するメソッド
変数= $(セレクタ).メソッド(引数)
※変数に情報が渡されます。
※メソッドによっては引数は必要ありません。

jQueryでは少数ですが、「プロパティ」という仕組みでも情報を受け取る場合があります。
プロパティは後に( )が必要ないことに注意してください

情報を取得するプロパティ
変数 = オブジェクト.プロパティ
※変数に情報が渡されます。
※オブジェクトには$(セレクタ)以外がくる場合もあります(2章で紹介しているイベントオブジェクト等)。
※プロパティの後に( )は必要ありません。

情報を取得するメソッドとプロパティの違いは明確ではありません。しかしメソッドの場合は引数で細かく指定できるため、より詳細に情報を取得できる傾向があります。また「解説」で説明するtextメソッドのように「操作」も「情報の取得」もできるメソッドがあります。

解説

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

サンプル(property/01.html)を開くと、すぐにアラートで「div要素のテキスト」と表示されます。アラートを閉じてソースを開き、以下の様にbody内のdiv要素のテキストとして「div要素のテキスト」と設定されていることを確認してください。

<div>div要素のテキスト</div>

jQueryは以下の様に記述され、オブジェクト(div要素)に対しtextメソッドを利用して、要素内のテキスト情報を取得しています。取得した変数は返値として渡されるので、左辺の変数strに代入して3行目のアラートで表示しています。textメソッドで情報を取得する場合は、引数は必要ありませんが最後の( )は必要です。

$(function () {
	var str = $("div").text();
	alert(str);
});

結果として、div要素内のテキスト情報が取得されアラートで表示されたのです。

jQueryではプロパティは少数派

スクリプト言語では、情報の取得にプロパティも利用されます。しかしjQueryではプロパティが少なく、あまり利用する機会はないでしょう。サンプル(property/02.html)を開くと、すぐにアラートで「5」と表示されます。アラートを閉じてソースを開き、body内にdiv要素が5つあることを確認してください。

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

jQueryは以下の様に記述され、オブジェクト(div要素)に対しlengthプロパティを利用して、div要素の数を取得しています。取得した変数は返値として渡されるので、左辺の変数numに代入して3行目のアラートで表示しています。注意するのはプロパティの後に( )は必要ないという点です。

$(function () {
	var num = $("div").length;
	alert(num);
});

次回はインタラクティブなコンテンツに欠かせない「イベント」という仕組みについて説明します。