jQueryのセレクタとセレクタの一覧です。
目次
jQueryのセレクタ
- jQueryのセレクタは、CSSのセレクタとjQuery独自のセレクタがあります。
- 以下はjQueryサイトのセレクタのリンクです。
http://api.jquery.com/category/selectors/ - CSSの書き方とセレクタの一覧
コード
7行目の#a1がセレクタです。1行目を指しています。
<p id="a1"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$("#a1").html("<b>あいうえお</b>");
});
</script>
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)