jQuery を使って動的で高品質なウェブサイトを構築する方法を解説しています。なるべく動くサンプルコードを記載しています。
jQuery 入門jQuery 入門
jQuery の使い方
jQuery の基礎
jQuery モバイル
jQuery UI
サンプルのテーマ変更

jQuery の拡張
関連サイト
サイト情報
ホーム > jQuery の基礎 > セレクター

セレクター

jQuery() の説明ページではセレクターとして ID や CSS クラスの例を挙げました。

しかし、 jQuery のセレクターはこの他にも様々な種類があります。

ここでは良くある状況を想定しつつ、いくつか取り上げてみていきます。

ID による指定

id で要素を指定するには、 #id とします。

$('#button1').click(function(){
  //...
});

要素を探すコンテキストを指定する例としては、次のページを参照してください。

» iframe 内から親ページの要素にアクセスする方法

属性 (Attribute) による指定

ある属性の値が特定の文字で始まる、あるいは終わる、あるいは含むといった条件で要素を選ぶことができます。

» 属性 (Attribute) による指定

チェックボックスの選択

チェックボックスの値を確認したい場合はよくあるシナリオであるため、チェックボックスを選択するためには特別に :checkbox というセレクターが用意されています。

Android
iPhone
Windows Phone

また、チェックされた要素のみを選択する場合には、 :checked セレクターが利用できます。

上の例のコードは次のようになります。

<input type='checkbox' class='ex1' value='Android' checked> Android
<input type='checkbox' class='ex1' value='iPhone' checked> iPhone
<input type='checkbox' class='ex1' value='Windows Phone'>Windows Phone
<input type='button' id='button1' value='チェックボックスを全て選択'>
<input type='button' id='button2' value='チェックされたチェックボックスを選択'>

という HTML に対して、次のようにセレクターを指定しています。

$('#button1').click(function(){
	$.each( $('input.ex1:checkbox'), function(a,b){
		alert(b.value);
	});
});

$('#button2').click(function(){
	$.each( $('input.ex1:checked'), function(a,b){
		alert(b.value);
	});
});

テーブルに行を追加

名前得点
鈴木 一郎70

また :last を利用すると、テーブル内の最後尾の行の後に行を追加するなどの操作が簡単にできます。

名前:
得点:

ここでは、次のようにテーブルのボディ部の最後を選択しています。

$('#table1 > tbody:last').append('<tr><td>山田花子</td><td>50</td></tr>');
ホーム > jQuery の基礎 > セレクター
小山圭介 著者
小山 圭介
4/15/1973生
米国在住のソフトウェアエンジニア。ITコンサルタント.. »プロフィール

© 2011-2017 Keisuke Oyama jQuery 入門