セレクターで要素を選択

セレクターで要素を選択し、jQueryオブジェクトを作成する方法。

CSSのセレクターが使えるのも、jQueryの魅力の1つだ。CSS(スタイルシート)を扱える人なら、jQuery APIセレクターも、すぐに理解できるだろう。

各セレクターの詳細解説は、jQuery API リファレンスセレクターのページにて。

構文

jQuery( セレクター )

もしくは、「jQuery」の部分を、「jQuery」のエイリアス(別名)である「$」に置き換え、

$( セレクター )

とすることもできる。この書き方が一般的だ。

上記コードだけで、jQueryオブジェクトを作成したことになる。

jQueryオブジェクトを作成したら、このjQueryオブジェクトに対する処理を、ピリオドで繋いで記述する。

サンプルコード

id属性

jQuery( ‘#id’ )を使い、指定したid属性の要素を選択。

jQuery( '#sampleId' )

もしくは、「jQuery」の部分を、「jQuery」のエイリアス(別名)である「$」に置き換え、

$( '#sampleId' )

とすることもできる。

上記コードは、id属性が「sampleId」である要素を選択したことになる。

class属性

jQuery( ‘.class’ )を使い、指定したclass属性の要素を選択。

jQuery( '.sampleClass' )

もしくは、「jQuery」の部分を、「jQuery」のエイリアス(別名)である「$」に置き換え、

$( '.sampleClass' )

とすることもできる。

上記コードは、class属性が「sampleClass」である要素を選択したことになる。

子要素

jQuery( ‘parent > child’ )を使い、子要素を選択。

jQuery( '#sampleId > span' )

もしくは、「jQuery」の部分を、「jQuery」のエイリアス(別名)である「$」に置き換え、

$( '#sampleId > span' )

とすることもできる。

上記コードは、id属性が「sampleId」である要素の中のspan要素を選択したことになる。

スポンサード リンク

カテゴリー: JavaScript, jQuery, チュートリアル パーマリンク