jQueryでセレクタで$("#id")や$(".class")などはよく使うが、これら以外にもセレクタはたくさんある。 多すぎて覚えられないので、一覧にまとめてみた。(jquery-3.2.0時点)
なお"#xxx"はid属性値、".xxx"はclass属性値を指す。
また要素が複数取得できるものは以下の方法で繰り返し処理が行える。
$(".class1, .class2").each(function(index, element){
alert($(element).val());
})
| セレクタ | 説明 |
|---|---|
| $("#id1") | id属性が"id1"の要素を取得 |
| $("[name='test1']") | name属性が"test1"の要素を取得 |
| $(".class1") | class属性が"class1"の要素を取得 |
| $("input[name='test1']") | input要素でname属性が"test1"の要素を取得 |
| $("textarea[name='test1']") | textarea要素でname属性が"test1"の要素を取得 |
| $(".class1, .class2") | class属性が"class1"もしくは"class2"の要素を取得。 |
| $(":input") | input/button/textarea/select要素を取得 |
| $("input[type='text']") | input要素でtype属性が"text"の要素を取得 |
| $("input[type='text'].class1"") | テキストフィールドでclass属性が"class1"の要素を取得 |
| $("div input[type='text']") | div要素内のテキストフィールドを取得 |
| $("input[type!='text']") | テキストフィールドでない要素を取得 |
| $("input[name^='123']") | input要素でname属性が"123"で始まる要素を取得 |
| $("input[name$='123']") | input要素でname属性が"123"で終わる要素を取得 |
| $("input[name*='123']") | input要素でname属性に"123"が含まれる要素を取得 |
| $("a[href='test.html']") | a要素でhref属性が"test.html"の要素を取得 |
| $("a[name='name1']") | a要素でname属性が"name1"の要素を取得 |
| $("a[href]") | a要素でhref属性を持つ要素を取得 |
| $(":radio") | ラジオボタン(input type="radio")を取得 |
| $(":button") | ボタン(input type="button"とbuttonタグ)を取得 |
| $("#div1 > input[type='hidden']") | id属性が"div1"の要素を親に持つhidden要素を取得 |
| $("#hidden1 + input[type='hidden']") | id属性が"hidden1"の要素の次にあるhidden要素を取得 |
| $("#hidden2 ~ input[type='hidden']") | id属性が"hidden1"の要素以降にある同レベルのhidden要素を取得 |
| $("#table1 td:first") | id属性が"table1"の要素内にある先頭のtd要素を取得 |
| $("#table1 td:last") | id属性が"table1"の要素内にある最後のtd要素を取得 |
| $("#table1 td:even") | id属性が"table1"の要素内にある偶数番目に出現するtd要素を取得 |
| $("#table1 td:odd") | id属性が"table1"の要素内にある奇数番目に出現するtd要素を取得 |
| $("#table1 td:eq(2)") | id属性が"table1"の要素内にある3番目((2)はインデックス)に出現するtd要素を取得 |
| $("#table1 td:gt(2)") | id属性が"table1"の要素内にある3番目((2)はインデックス)のtd要素より後に出現するtd要素を取得 |
| $("#table1 td:lt(2)") | id属性が"table1"の要素内にある3番目((2)はインデックス)のtd要素より前に出現するtd要素を取得 |
| $("div input[type='hidden']:first-child") | div要素内にあり、最初の子要素のhidden要素を取得 |
| $("div input[type='hidden']:last-child") | div要素内にあり、最後の子要素のhidden要素を取得 |
| $("div input[type='hidden']:only-child") | div要素内にhidden要素が1つだけあった場合、そのhidden要素を取得 |
| $("div input[type='hidden']:nth-child(2)") | div要素内にあり、3番目((2)はインデックス)の子要素のhidden要素を取得 |
| $(":header") | h1/h2/h3要素を取得 |
| $(":hidden") | 非表示状態の要素(hidden要素含む)を取得 |
| $(":visible") | 表示状態の要素を取得 |
| $(":disabled") | 非活性状態の要素を取得 |
| $(":enabled") | 活性状態の要素を取得 |
| $(":checked") | チェック状態の要素を取得 |
| $(":selected") | 選択状態の要素を取得 |
| $(":empty") | 空要素を取得 |
| $(":contains('123')") | 要素のbody部に"123"の文字列がある要素を取得 |
| $(":parent") | 子要素を持つ要素を取得 |
| $(":has(#span1)") | id属性が"span1"の要素を含む(子に限らず)要素を取得 |
| $("span:first-of-type") | 1番目の子要素として出現するspan要素を取得 |
| $("span:last-of-type") | 最後の子要素として出現するspan要素を取得 |
| $("span:nth-last-of-type(2)") | 最後から2番目の子要素として出現するspan要素を取得 |
| $("span:nth-of-type(2)") | 2番目の子要素として出現するspan要素を取得 |
| $("span:only-of-type") | 同レベルにspan要素が1つしかない場合、そのspan要素を取得 |
| $(":focus") | フォーカスが当たっている要素を取得 |
| $(":lang(jp)") | lang="jp"が指定されている要素を取得 |
| $(":root") | ルート要素の内容(つまりHTML内のすべての記述)を取得 |
| $(":animated") | アニメーションしている要素を取得 |