セレクター

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);
  });
});

テーブルに行を追加

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

名前:
得点:

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

$('#table1 > tbody:last').append('<tr><td>山田花子</td><td>50</td></tr>');