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

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

メソッドについて

概要

オブジェクトを操作する

jQueryに限らず、ほとんどのスクリプト言語では「メソッド」という仕組みが必要になり、これによってオブジェクトを操作します。jQueryオブジェクトもメソッドで操作します。

メソッド ( method )
メソッドはオブジェクトを操作する命令文を指します。

オブジェクトとメソッドは以下の様にドットを挟んで記述します(このような構文を「ドットシンタックス」と呼びます)。これで「誰(オブジェクト)が何をする(メソッド)」という最小限の処理が完成します。

オブジェクトとメソッドの構文(ドットシンタックス)
オブジェクト . メソッド
※javaScriptの構文もドットシンタックスです。

解説

後の()を忘れずに

jQueryオブジェクトに利用できるメソッドは非常に沢山あるのですが、すべて共通点があります。それは「処理の実行には後に( )が必要」という点です。

例えばreadyイベントのページで紹介したサンプル(ready/02.html)では、以下のように利用しています。
オブジェクトとメソッドの間にあるドットを忘れないようにしましょう(ドットシンタックスです)。

$(function () {
	$("img").hide();
});

hideメソッドは指定した要素を隠すので、このサンプルではimg要素が表示されません。

場合によっては引数が必要

引数(ひきすう)とはメソッドに渡す情報のことで()内に設定します。サンプル(method/01.html)を開いてソースを確認してください。body内には何も記述されていないのに、ページには「let's start jQuery!」と表示されています。

これはjQueryで以下の様に記述され、textメソッドによってbody内のテキストが設定されたためです。textメソッドはこのように引数で表示するテキストを設定します。

$(function(){
	$("body").text("let's start jQuery!");
});

メモ

jQueryオブジェクト(セレクタを含む)とメソッドについて簡単にまとめておきます。

最小限の処理
$(セレクタ).メソッド(引数)
※メソッドによっては引数は必要ありません。セレクタとメソッドの間のドットを忘れないように!

日本語でも文章を構成するには「誰が」「何をする」が必要になります(つまり主語と述語です)。jQueryでも同じで、オブジェクトで「誰が」を指定し、メソッドで「何をする」を指定します。
※jQueryで利用できるオブジェクトはjQueryオブジェクトで、これはセレクタを$( )に設定して作成します。

次回は要素の情報を取得する方法について説明します。