jQuery セレクタの一覧

jQueryのセレクタの一覧です。

jQueryのセレクタ

以下の4行目の#a1がセレクタ(セレクタ式)です。9行目を指しています。

<script>
$(function() {

	$('#a1').html('<b>あいうえお</b>');

});
</script>

<p id="a1"></p>

jQueryのセレクタの一覧

主なjQueryのセレクタです。書式欄に★がついているのはjQuery独自のセレクタです。

セレクタ名 書式 適用する対象
ユニバーサルセレクタ  *(アスタリスク) すべての要素
タイプセレクタ
(要素セレクタ)
 要素名 指定した要素
IDセレクタ  #ID名 ID名が指定されている要素
※ID名は、html文書内で一意にします。
クラスセレクタ  .クラス名 クラス名が指定されている要素
※クラス名は、html文書内の複数の箇所にあっても良いです。
属性セレクタ 要素名[属性名] 指定した属性を持つ要素
要素名[属性名="値"] 指定の属性の値がある要素
要素名[属性名!="値"] ★ 指定の属性の値ではない要素
要素名[属性名~="値"] 属性の値が複数ある場合で、指定の属性の値がどれかひとつに合致する要素
要素名[属性名|="値"] ハイフン(-)で区切られた属性の値が複数ある場合で、指定の属性の値で始まっている要素
要素名[属性名^="値"] 指定の属性の値で始まる要素
要素名[属性名$="値"] 指定の属性の値で終わる要素
要素名[属性名*="値"] 指定の属性の値が含まれている要素
疑似クラス 要素名:focus フォーカスした時
要素名:target 移動先の要素
要素名:lang() lang属性値が指定された言語コードで始まっている要素
要素名:enabled 有効な要素
要素名:disabled 無効な要素
要素名:checked ラジオボタンやチェックボックスが選択されたとき
要素名:root ルート要素
要素名:first-child 最初の子要素
要素名:last-child 最後の子要素
要素名:nth-child() n番目の子要素
奇数の行にスタイルを適用 (:nth-child(2n+1))
偶数の行にスタイルを適用 (:nth-child(2n))
指定した行にスタイルを適用 (:nth-child (数値))
要素名:nth-last-child() 後ろからn番目の子要素
要素名:only-child 唯一の子要素
要素名:first-of-type 最初の子要素
要素名:last-of-type 最後の子要素
要素名:nth-of-type() n番目の子要素
要素名:nth-last-of-type() 後ろからn番目の子要素
要素名:only-of-type 唯一の子要素
要素名:empty 子要素や要素内容を持たない要素
要素名:not() 指定の条件と一致しない要素
要素名:contains() ★ 指定した文字列を含む要素
:visible ★ 表示されている要素
:hidden ★ 表示されていない要素
:header ★ ヘッダーの要素(<h1>や<h2>)
:first ★ 最初の要素
:last ★ 最後の要素
:even ★ 偶数番目の位置(最初は0から)
:odd ★ 基数番目の位置(最初は0から)
:eq(数値) ★ 数値の番目の位置の要素
:gt(数値) ★ 数値の番目より大きい位置の要素
:lt(数値) ★ 数値の番目より小さい位置の要素
:input ★ input要素
:button ★ ボタン
:checkbox ★ チェックボックス
:radio ★ ラジオボタン
:file ★ アップロードするファイル(input type="file")
:password ★ パスワード
:text ★ テキストボックス
:selected ★ セレクトボックスの選択
:submit ★ 送信ボタン
:image ★ 画像ボタン
:reset ★ リセットボタン
:animated ★ アニメーションしている要素
:parent ★ 子要素を持つ要素
:has(セレクタ) ★ セレクタの子孫要素を持つ要素
子孫セレクタ セレクタ1 セレクタ2 セレクタ1の子孫のセレクタ2の要素
子セレクタ セレクタ1 > セレクタ2 セレクタ1の子のセレクタ2の要素
兄弟セレクタ セレクタ1  +  セレクタ2 セレクタ1とセレクタ2が同じ親要素を持つ兄弟の要素で、セレクタ1の直後にあるセレクタ2の要素
セレクタ1  ~  セレクタ2 セレクタ1とセレクタ2が同じ親要素を持つ兄弟の要素で、セレクタ1の後にあるセレクタ2の要素

関連の記事

jQuery 属性値を取得/設定するサンプル(attr)
jQuery 表示を書き換えるサンプル(textとhtml)
jQuery ループ処理を行うサンプル(each)
jQuery 子孫要素を検索するサンプル(find)
jQuery 指定のイベント発生時に一度だけ実行するサンプル(one)
jQuery 1つの要素に複数のイベントリスナを登録するサンプル(on)
jQuery Deferredオブジェクトのサンプル
jQuery 変数のデータ型を調べるサンプル(type)



△上に戻る