jQuery API 機能別 Selectors /セレクタ 一覧 関数 要素 使い方・書き方 例 jquery サンプル
Selectors /セレクタ 一覧 JQuery
Selectorsとは
トピック：jQueryライブラリは、カスケードスタイルシート（CSS）セレクタを利用し、Document Object Model（DOM）の要素または要素のグループにすばやく簡単にアクセスできるようにする。jQuery Selectorは、式を使用して、指定された条件に基づいてDOMから一致する要素を見つける関数。 セレクタは、jQueryを使用して1つまたは複数のHTML要素を選択するために使用される。 ある要素が選択されると、その選択された要素に対してさまざまな操作を実行する 事ができる。
| jQuery Selectors リスト | 関数 説明 要約 |
|---|---|
All Selector (“*”) 詳細 情報All Selector (“*”) 実例 使用法 コード | All Selector (“*”)とは、すべての要素を選択する ことができる。 |
:animated Selector 詳細 情報:animated Selector 実例 使用法 コード | :animated Selectorとは、セレクタの実行時にアニメーションの進行中にあるすべての要素を選択する ことができる。 |
Attribute Contains Prefix Selector [name|=”value”] 詳細 情報Attribute Contains Prefix Selector [name|=”value”] 実例 使用法 コード | Attribute Contains Prefix Selector [name|=”value”]とは、与えられた文字列に等しいか、その文字列で始まりハイフン（ - ）で始まる値で指定された属性を持つ要素を選択する ことができる。 |
Attribute Contains Selector [name*=”value”] 詳細 情報Attribute Contains Selector [name*=”value”] 実例 使用法 コード | Attribute Contains Selector [name*=”value”]とは、指定された属性を持つ要素を、指定された部分文字列を含む値で選択する ことができる。 |
Attribute Contains Word Selector [name~=”value”] 詳細 情報Attribute Contains Word Selector [name~=”value”] 実例 使用法 コード | Attribute Contains Word Selector [name~=”value”]とは、スペースで区切られた、指定された単語を含む値で指定された属性を持つ要素を選択する ことができる。 |
Attribute Ends With Selector [name$=”value”] 詳細 情報Attribute Ends With Selector [name$=”value”] 実例 使用法 コード | Attribute Ends With Selector [name$=”value”]とは、特定の文字列で終わる値で指定された属性を持つ要素を選択する。比較では大文字と小文字が区別される。 |
Attribute Equals Selector [name=”value”] 詳細 情報Attribute Equals Selector [name=”value”] 実例 使用法 コード | Attribute Equals Selector [name=”value”]とは、特定の値と正確に等しい値を持つ指定された属性を持つ要素を選択する ことができる。 |
Attribute Not Equal Selector [name!=”value”] 詳細 情報Attribute Not Equal Selector [name!=”value”] 実例 使用法 コード | Attribute Not Equal Selector [name!=”value”]とは、指定された属性を持たないか、指定された属性を持ちますが、特定の値を持たない要素を選択する ことができる。 |
Attribute Starts With Selector [name^=”value”] 詳細 情報Attribute Starts With Selector [name^=”value”] 実例 使用法 コード | Attribute Starts With Selector [name^=”value”]とは、与えられた文字列で正確に始まる値を持つ、指定された属性を持つ要素を選択する ことができる。 |
:button Selector 詳細 情報:button Selector 実例 使用法 コード | :button Selectorとは、すべてのボタン要素とタイプボタンの要素を選択する ことができる。 |
:checkbox Selector 詳細 情報:checkbox Selector 実例 使用法 コード | :checkbox Selectorとは、チェックボックスのすべての要素を選択する ことができる。 |
:checked Selector 詳細 情報:checked Selector 実例 使用法 コード | :checked Selectorとは、チェックまたは選択されたすべての要素と一致する ことができる。 |
Child Selector (“parent > child”) 詳細 情報Child Selector (“parent > child”) 実例 使用法 コード | Child Selector (“parent > child”)とは、" parent"で指定された要素の "child"で指定されたすべての直接子要素を選択する ことができる。 |
Class Selector (“.class”) 詳細 情報Class Selector (“.class”) 実例 使用法 コード | Class Selector (“.class”)とは、指定されたクラスのすべての要素を選択する ことができる。 |
:contains() Selector 詳細 情報:contains() Selector 実例 使用法 コード | :contains Selectorとは、指定したテキストを含むすべての要素を選択する ことができる。 |
Descendant Selector (“ancestor descendant”) 詳細 情報Descendant Selector (“ancestor descendant”) 実例 使用法 コード | Descendant Selector (“ancestor descendant”)とは、指定された祖先の子孫であるすべての要素を選択する ことができる。 |
:disabled Selector 詳細 情報:disabled Selector 実例 使用法 コード | :disabled Selectorとは、無効になっているすべての要素を選択する ことができる。 |
Element Selector (“element”) 詳細 情報Element Selector (“element”) 実例 使用法 コード | Element Selector (“element”)とは、指定されたタグ名を持つすべての要素を選択する ことができる。 |
:empty Selector 詳細 情報:empty Selector 実例 使用法 コード | :empty Selectorとは、子を持たないすべての要素（テキストノードを含む）を選択する ことができる。 |
:enabled Selector 詳細 情報:enabled Selector 実例 使用法 コード | :enabled Selectorとは、有効になっているすべての要素を選択する ことができる。 |
:eq() Selector 詳細 情報:eq() Selector 実例 使用法 コード | :eq Selectorとは、一致したセット内のインデックス nの要素を選択する ことができる。 |
:even Selector 詳細 情報:even Selector 実例 使用法 コード | :even Selectorとは、偶数要素を選択する、ゼロインデックス付き |
:file Selector 詳細 情報:file Selector 実例 使用法 コード | :file Selectorとは、ファイルタイプのすべての要素を選択する ことができる。 |
:first-child Selector 詳細 情報:first-child Selector 実例 使用法 コード | :first-child Selectorとは、親の最初の子であるすべての要素を選択する ことができる。 |
:first-of-type Selector 詳細 情報:first-of-type Selector 実例 使用法 コード | :first-of-type Selectorとは、同じ要素名の兄弟の中で最初の要素をすべて選択する ことができる。 |
:first Selector 詳細 情報:first Selector 実例 使用法 コード | :first Selectorとは、最初に一致した DOM要素を選択する ことができる。 |
:focus Selector 詳細 情報:focus Selector 実例 使用法 コード | :focus Selectorとは、現在フォーカスがある場合は要素を選択する ことができる。 |
:gt() Selector 詳細 情報:gt() Selector 実例 使用法 コード | :gt Selectorとは、一致したセット内のインデックスよりも大きいインデックスのすべての要素を選択する ことができる。 |
Has Attribute Selector [name] 詳細 情報Has Attribute Selector [name] 実例 使用法 コード | Has Attribute Selector [name]とは、指定した属性を持つ要素を任意の値で選択する ことができる。 |
:has() Selector 詳細 情報:has() Selector 実例 使用法 コード | :has Selectorとは、指定されたセレクタに一致する要素を少なくとも1つ含む要素を選択する ことができる。 |
:header Selector 詳細 情報:header Selector 実例 使用法 コード | :header Selectorとは、h1、h2、h3などのヘッダーであるすべての要素を選択する ことができる。 |
:hidden Selector 詳細 情報:hidden Selector 実例 使用法 コード | :hidden Selectorとは、隠されているすべての要素を選択する ことができる。 |
ID Selector (“#id”) 詳細 情報ID Selector (“#id”) 実例 使用法 コード | ID Selector (“#id”)とは、指定された id属性を持つ単一の要素を選択する ことができる。 |
:image Selector 詳細 情報:image Selector 実例 使用法 コード | :image Selectorとは、タイプ imageのすべての要素を選択する ことができる。 |
:input Selector 詳細 情報:input Selector 実例 使用法 コード | :input Selectorとは、すべての入力、テキストエリア、選択およびボタン要素を選択する ことができる。 |
:lang() Selector 詳細 情報:lang() Selector 実例 使用法 コード | :lang Selectorとは、指定された言語のすべての要素を選択する ことができる。 |
:last-child Selector 詳細 情報:last-child Selector 実例 使用法 コード | :last-child Selectorとは、親の最後の子であるすべての要素を選択する ことができる。 |
:last-of-type Selector 詳細 情報:last-of-type Selector 実例 使用法 コード | :last-of-type Selectorとは、同じ要素名の兄弟の中で最後の要素をすべて選択する ことができる。 |
:last Selector 詳細 情報:last Selector 実例 使用法 コード | :last Selectorとは、最後に一致した要素を選択する ことができる。 |
:lt() Selector 詳細 情報:lt() Selector 実例 使用法 コード | :lt Selectorとは、一致したセット内のインデックスより小さいインデックスのすべての要素を選択する ことができる。 |
Multiple Attribute Selector [name=”value”][name2=”value2″] 詳細 情報Multiple Attribute Selector [name=”value”][name2=”value2″] 実例 使用法 コード | Multiple Attribute Selector [name=”value”][name2=”value2″]とは、指定されたすべての属性フィルタに一致する要素に一致する ことができる。 |
Multiple Selector (“selector1, selector2, selectorN”) 詳細 情報Multiple Selector (“selector1, selector2, selectorN”) 実例 使用法 コード | Multiple Selector (“selector1, selector2, selectorN”)とは、指定されたすべてのセレクタの結合結果を選択する ことができる。 |
Next Adjacent Selector (“prev + next”) 詳細 情報Next Adjacent Selector (“prev + next”) 実例 使用法 コード | Next Adjacent Selector (“prev + next”)とは、直前に兄弟 prevがあるnextと一致するすべての次の要素を選択する ことができる。 |
Next Siblings Selector (“prev ~ siblings”) 詳細 情報Next Siblings Selector (“prev ~ siblings”) 実例 使用法 コード | Next Siblings Selector (“prev ~ siblings”)とは、prev要素の後に続くすべての兄弟要素を選択し、同じ親を持ち、フィルタリングの "兄弟"セレクタに一致させる。 |
:not() Selector 詳細 情報:not() Selector 実例 使用法 コード | :not Selectorとは、指定されたセレクタと一致しないすべての要素を選択する ことができる。 |
:nth-child() Selector 詳細 情報:nth-child() Selector 実例 使用法 コード | :nth-child Selectorとは、親の n番目の子であるすべての要素を選択する ことができる。 |
:nth-last-child() Selector 詳細 情報:nth-last-child() Selector 実例 使用法 コード | :nth-last-child Selectorとは、最後の要素から最初の要素まで数えて、親の n番目の要素であるすべての要素を選択する ことができる。 |
:nth-last-of-type() Selector 詳細 情報:nth-last-of-type() Selector 実例 使用法 コード | :nth-last-of-type Selectorとは、最後の要素から最初の要素まで数えて同じ要素名を持つ兄弟との関係で、親の n番目の要素であるすべての要素を選択する ことができる。 |
:nth-of-type() Selector 詳細 情報:nth-of-type() Selector 実例 使用法 コード | :nth-of-type Selectorとは、同じ要素名を持つ兄弟との関係で、親の n番目の子であるすべての要素を選択する ことができる。 |
:odd Selector 詳細 情報:odd Selector 実例 使用法 コード | :odd Selectorとは、奇数要素を選択し、ゼロインデックスを付ける、ことができる。 |
:only-child Selector 詳細 情報:only-child Selector 実例 使用法 コード | :only-child Selectorとは、親の唯一の子であるすべての要素を選択する ことができる。 |
:only-of-type Selector 詳細 情報:only-of-type Selector 実例 使用法 コード | :only-of-type Selectorとは、同じ要素名を持つ兄弟を持たないすべての要素を選択する ことができる。 |
:parent Selector 詳細 情報:parent Selector 実例 使用法 コード | :parent Selectorとは、少なくとも1つの子ノード（要素またはテキストのいずれか）を持つすべての要素を選択する ことができる。 |
:password Selector 詳細 情報:password Selector 実例 使用法 コード | :password Selectorとは、パスワードタイプのすべての要素を選択する ことができる。 |
:radio Selector 詳細 情報:radio Selector 実例 使用法 コード | :radio Selectorとは、ラジオタイプのすべての要素を選択する ことができる。 |
:reset Selector 詳細 情報:reset Selector 実例 使用法 コード | :reset Selectorとは、resetタイプのすべての要素を選択する ことができる。 |
:root Selector 詳細 情報:root Selector 実例 使用法 コード | :root Selectorとは、ドキュメントのルートとなる要素を選択する ことができる。 |
:selected Selector 詳細 情報:selected Selector 実例 使用法 コード | :selected Selectorとは、選択されているすべての要素を選択する ことができる。 |
:submit Selector 詳細 情報:submit Selector 実例 使用法 コード | :submit Selectorとは、submitタイプのすべての要素を選択する ことができる。 |
:target Selector 詳細 情報:target Selector 実例 使用法 コード | :target Selectorとは、ドキュメントの URIのフラグメント識別子で指定されるターゲット要素を選択する ことができる。 |
:text Selector 詳細 情報:text Selector 実例 使用法 コード | :text Selectorとは、テキストタイプのすべての入力要素を選択する ことができる。 |
:visible Selector 詳細 情報:visible Selector 実例 使用法 コード | :visible Selectorとは、表示されているすべての要素を選択する ことができる。 |
関数リファレンス | jQuery Selectors API | Selectors 一覧
