$関数のメモ : 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.

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。