- 索引
- 1章:jQuery入門
-
- ├ jQueryのメリット
- ├ readyイベント
- ├ オブジェクトについて
- ├ メソッドについて
- ├ 情報の取得
- ├ イベント(1)
- ├ イベント(2)
- └ 初歩なサンプル
- 2章:jQuery基礎
-
- ├ thisについて(1)
- ├ thisについて(2)
- ├ jQueryとDOM要素
- ├ 簡単な演出
- ├ thisから辿る
- ├ 汎用的なアニメ(1)
- ├ 汎用的なアニメ(2)
- ├ アニメの停止
- ├ アニメを管理する仕組み
- └ 汎用的なアニメ(3)
- 3章:jQuery発展
-
- ├ イベントフロー(1)
- ├ イベントフロー(2)
- ├ イベントフロー(3)
- ├ 画像のプリロード
- ├ jQueryの高速化
- └ メソッドチェーン
- 番外編:研究
-
- ├ イベントを外す
- ├ cssアニメとの連携(1)
- ├ cssアニメとの連携(2)
- ├ cssアニメとの連携(3)
- ├ セレクタの自作(1)
- ├ セレクタの自作(2)
- ├ クロージャ(1)
- ├ クロージャ(2)
- └ クロージャ(3)
情報の取得
概要
2つの情報を取得する仕組み(返値)
前ページで紹介した「メソッド」には情報を取得するものもあります。その場合は返値(メソッドから返される値なので「かえりち」と呼ばれます)で情報を渡します(javaScriptと同じく左辺の変数で受け取ります)。
。
- 情報を取得するメソッド
- 変数= $(セレクタ).メソッド(引数)
jQueryでは少数ですが、「プロパティ」という仕組みでも情報を受け取る場合があります。
プロパティは後に( )が必要ないことに注意してください。
- 情報を取得するプロパティ
- 変数 = オブジェクト.プロパティ
情報を取得するメソッドとプロパティの違いは明確ではありません。しかしメソッドの場合は引数で細かく指定できるため、より詳細に情報を取得できる傾向があります。また「解説」で説明する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); });
次回はインタラクティブなコンテンツに欠かせない「イベント」という仕組みについて説明します。
次のページ:イベント(1)