jQuery セレクタとセレクタの一覧

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

jQueryのセレクタ
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の要素