jQuery入門 | 要素の選択 | 選択された要素へのアクセス（getter、setter）
getterメソッドとsetterメソッド
セレクターによって選択された要素の値を読み取ったり設定したりするには、jQueryメソッドを通じてその要素にアクセスできる。
getterメソッドは、選択された要素にアクセスしてその値を読み取るためのメソッドである。 getterメソッドは引数を渡さずに呼び出す。
setterメソッドは、選択された要素にアクセスしてその値を設定するためのメソッドである。 setterメソッドは代入したい値を引数として渡して呼び出す。
次の例は、<h1>要素にアクセスしてその値を読み取った後、IDが"text"の要素の値をその値に設定する例である。
var newText = $("#hello").html();
$("#newText").html(newText);
上の例の1行目の.html()メソッド呼び出しには渡される引数がないため、そのHTML要素から値を読み取るgetterメソッドとして使われる。
それに対して2行目の.html()メソッド呼び出しには渡される引数があるため、そのHTML要素に新しい文を設定するsetterメソッドとして使われる。
代表的なgetterメソッドとsetterメソッド
要素にアクセスして要素の値を読み取ったり設定したりできる代表的なgetterメソッドとsetterメソッドは次のとおりである。
| メソッド | 説明 |
|---|---|
.html() |
その要素のHTMLコンテンツを返すか設定する。 |
.text() |
その要素のテキストコンテンツを返すか設定する。 |
.width() |
選択した要素のうち最初の要素の幅をピクセル単位の整数で返すか設定する。 |
.height() |
選択した要素のうち最初の要素の高さをピクセル単位の整数で返すか設定する。 |
.attr() |
その要素の指定された属性の属性値を返すか設定する。 |
.position() |
選択した要素のうち最初の要素について、特定位置に存在するオブジェクトを返す。（getterメソッド） |
.val() |
<form>要素の値を返すか設定する。 |
メソッドチェーン
getterメソッドは選択された要素の値を読み取り、その値を返す。 選択された要素が複数存在する場合、getterメソッドは最初の要素の値だけを返す。
しかしsetterメソッドは、選択されたすべての要素に引数として渡された値を設定する。 そして、選択されたすべての要素にアクセスできる別のjQueryオブジェクトを返す。
この返されたjQueryオブジェクトを利用すると、メソッドを呼び出すたびにセミコロン（;）を使わなくても、すぐ続けて別のjQueryメソッドを呼び出せる。
この方式で複数のメソッドが連続して呼び出されることをメソッドチェーンという。
次の例は、選択された要素に.find()、.eq()、.append()メソッドを連続して呼び出す例である。
$("ul").find("li").eq(1).append(" - おすすめメニューです。");
<ul>要素から<li>を探し、インデックスが1の要素に文字列を追加する。
<ul>
<li>エスプレッソ</li>
<li>アメリカーノ</li>
<li>カフェラテ</li>
</ul>
.eq()メソッドは、選択した要素のうち指定されたインデックスに該当する要素を選択するメソッドである。
メソッドチェーン中に.end()メソッドを使用すると、直前に選択していた要素の集合を再び選択できる。
$("ul").find("li").eq(1).append(" - おすすめメニューです。")
.end().eq(2).append(" - おすすめメニューです。");
<ul>要素から<li>を探し、インデックスが1の要素に文字列を追加し、.end()メソッドを使ってappend()メソッドの前に戻ってから、再びインデックスが2の要素を選択して文字列を追加する。
.width()メソッドと.height()メソッド
jQueryでは、選択した要素の幅および高さを返す（getter）または設定する（setter）ための.width()メソッドと.height()メソッドを提供する。
// setter
$("img").width(300);
$("img").height(300);
// getter
var imgWidth = $("img").width();
var imgHeight = $("img").height();
$("p").html("横幅: " + imgWidth + ", 高さ: " + imgHeight);
上の例では、1つ目の.width()メソッドと.height()メソッドでは引数を渡し、幅と高さの値を設定するsetterメソッドとして使用している。
2つ目の.width()メソッドと.height()メソッドではgetterメソッドとして使用している。
.attr()メソッド
.attr()メソッドは、選択した要素の特定の属性値を返すか設定するために使用する。
// setter
$("img").attr("width", "300");
// getter
var imgWidth = $("img").attr("width");
$("p").html("変更された画像の幅: " + imgWidth);
上の例では、1つ目の.attr()メソッドでは2つの引数を渡し、そのHTML要素に1番目の引数で渡された名前の属性値として、2番目の引数で渡された値を設定するsetterメソッドとして使用している。
2つ目の.attr()メソッドには引数を1つだけ渡し、そのHTML要素から引数として渡された名前の属性値を読み取るgetterメソッドとして使用している。