$関数のメモ : jQuery
jQueryの$関数に関するメモ。
$関数でDOM要素を取得
DOMを取得する関数$(‘●’)[1]の戻り値はDOM要素ではなく対応するjQueryオブジェクト。
jQueryオブジェクトは様々なプロパティ・メソッドの他にDOM要素自体の配列を持つ。
下記のHTMLコードを例にしてまとめる。
<html>
<body>
<p id="foo">パラグラフ0。</p>
<p class="bar">パラグラフ1。</p>
<p class="bar">パラグラフ2。</p>
<p>パラグラフ3。</p>
</body>
</html>
$(‘p’)が返すjQueryオブジェクトは4つのDOM要素を配列として持つ。
$(‘p’)[0]は要素<p id=”foo”>パラグラフ0。</p>を得る。
$(‘p’)[1]は要素<p class=”bar”>>パラグラフ1。</p>を得る。
$(‘p’)[2]は要素<p class=”bar”>パラグラフ2。</p>を得る。
$(‘p’)[3]は要素<p>パラグラフ3。</p>を得る。
$関数が返すjQueryオブジェクトへの操作はDOMの配列全体に対して行われる。
下記コードはすべてのパラグラフの文字色をシルバーに設定する。
jQuery(function($) {
$('p').css('color', 'silver');
)};
jQueryオブジェクトが持つDOM要素数はjQueryオブジェクトのlengthプロパティで取得する。
またjQueryループのeachを使うと個別のDOM要素を順に操作できる。下記のコードではパラグラフの文字色を段落ごとに設定している。
jQuery(function($) {
$('p').each(function (i) {
var hex = '#' + Math.pow(i,2) + Math.pow(i,2) + Math.pow(i,2);
$(this).css('color', hex);
});
});
$関数でDOM要素を取得するまとめ
セレクタでDOM要素を特定する。$(‘●’)はjQueryオブジェクトを返す。
生のDOM要素は戻り値であるjQueryオブジェクトが持つ配列に設定されている。
$('●')[N] Nはインデックス(整数)
// または
$('●').get(N) Nはインデックス(整数)
thisと$(this)
$関数はjQueryオブジェクトを返す。
一方jQueryオブジェクトのイベントハンドラ・イベントリスナーのコールバック関数や繰り返し処理(each・map)のthisはDOM要素そのもの。
- thisはDOM要素のプロパティ・メソッドを持つ。
- $(this)はjQueryオブジェクトのプロパティ・メソッドを持つ。
サンプル
上述のコードを使った例。
// コールバック関数の例 : thisはDOM, $(this)はjQueryオブジェクト
$('p.bar').hover(
function () {
$(this).css('color', 'red');
},
function () {
$(this).css('color', 'black');
}
);
$('p').click(function (e) {
var elem = e.target; // DOM要素が返る
alert(elem.id); // DOM要素のプロパティ
});
// ループの例 thisはDOM, $(this)はjQueryオブジェクト
$('p').each(function () {
// idの取得
alert(this.id); // DOMのプロパティ
alert($(this).attr("id")); // jQueryオブジェクトのメソッド
});
1. ●はセレクタ。jQueryのセレクタはjQuery 日本語リファレンスに掲載されている。
コメント
No comments yet.
コメントの投稿
改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。