English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
jQuery選択子はHTML要素を選択および操作することができます。
このセクションには最新のjQuery JavaScriptライブラリに属する選択子の完全なリストが含まれています。
全ての選択子はいくつかのカテゴリに分類されます。
| 選択子 | 例 | 説明 |
|---|---|---|
| * | $(""*") | 全ての要素（汎用選択子）を選択 |
| #id | $("#demo") | id="demo"を持つ要素を選択 |
| .class | $(".demo") | class="demo"を持つ全ての要素を選択 |
| element | $("p") | 全ての<p>要素を選択 |
| selector1, selector2 | $("p, div") | 全ての<p>要素と全ての<div>要素を選択 |
| 選択子 | 例 | 説明 |
|---|---|---|
| ancestor descendant | $("div p") | 同一階層の<div>要素内の全ての<p>要素を選択 |
| parent > child | $("div > p") | 全ての<p>要素が<div>要素の子孫であるものを選択 |
| prev + next | $("div" + p") | 同一階層の<div>要素の後ろに続く全ての<p>要素を選択 |
| prev ~ siblings | $("div ~ p") | 同一階層の<div>要素と同級の全ての<p>要素を選択 |
| 選択子 | 例 | 説明 |
|---|---|---|
| [attribute] | $("[target]") | 具有target属性の全ての要素を選択 |
| [attribute=value] | $("a[href=&#"39;CSS3']) | 選択所有href属性値が「CSS」のもの3の<a>要素 |
| [attribute!=value] | $("a[href!=&#"39;CSS3']) | href属性値が「CSS」でないすべての選択3の<a>要素 |
| [attribute~=value] | $('[alt~=Parrot]') | alt属性を持ち「Parrot」の単語を含むすべての要素を選択 |
| [attribute|=value] | $('[lang|=en]') | lang属性値が「en」で始まるすべての要素を選択 |
| [attribute^=value] | $('a[href^=https]') | href属性値が「https」で始まるすべての<a>要素を選択 |
| [attribute$=value] | $('a[href$='.org']) | href属性値が「.org」で終わるすべての<a>要素を選択 |
| [attribute*=value] | $('a[href*=example]) | href属性値が「example」のサブストリングを含むすべての<a>要素を選択 |
| 選択子 | 例 | 説明 |
|---|---|---|
| :first | $('p:first') | 最初の<p>要素を選択 |
| :last | $('p:last') | 最後の<p>要素を選択 |
| :even | $('tr:even') | 偶数<tr>要素、ゼロインデックスを選択 |
| :odd | $('tr:odd') | ゼロインデックスの奇数<tr>要素を選択 |
| :not() | $('p:not(.demo)') | class="demo"を持たないすべての<p>要素を選択 |
| :eq() | $('tr:eq('2)") | 一致する集合からゼロから始まるインデックスで第3つの<tr>要素を選択 |
| :lt() | $('tr:lt('5)") | インデックス番号が小さいすべての選択5の<tr>要素、ゼロから始まるインデックス |
| :gt() | $('tr:gt('5)") | インデックス番号が大きいすべての選択5の<tr>要素、ゼロから始まるインデックス |
| :header | $(':header') | すべてのヘッダー要素を選択します。例えば<h1>、<h2>、<h3>など |
| :lang() | $('div:lang(en)') | 言語値が“ en”を持つすべての<div>要素を選択します。つまりlang="en"、lang="en-us"など |
| :root | $(':root') | ドキュメントのルート要素を選択します。この要素は常にHTMLドキュメントの<html>要素です |
| :animated | $(':animated') | 選択子が実行中のアニメーション要素を選択 |
| 選択子 | 例 | 説明 |
|---|---|---|
| :first-child | $("p:first-child) | 親の要素に属する最初の子要素のすべての<p>要素を選択 |
| :last-child | $("p:last-child) | 親の要素に属する最後の子要素のすべての<p>要素を選択 |
| :only-child | $("p:only-child) | 親要素の唯一の子要素のすべての<p>要素を選択 |
| :first-of-type | $("p:first-of-type) | 親要素の最初の<p>要素のすべての<p>要素を選択 |
| :last-of-type | $("p:last-of-type) | 親要素の最後の<p>要素のすべての<p>要素を選択 |
| :only-of-type | $("p:only-of-type) | すべての同じ要素名を持ち、同級を持たない<p>要素を選択 |
| :nth-child(n) | $("p:nth-child(3)") | 選択 |
| :nth-last-child(n) | $("p:nth-last-child(4)") | 親要素の4番目の子要素であり、前の要素から最初の要素までのすべての<p>要素を選択 |
| :nth-of-type(n) | $("span:nth-of-type(3)") | 親要素の第3つの<span>要素のすべての<span>要素を選択 |
| :nth-last-of-type(n) | $("span:nth-last-of-type(4)") | 親要素の4個の<span>要素のすべての<span>要素、最後の要素から最初の要素までカウント |
| 選択子 | 例 | 説明 |
|---|---|---|
| :contains() | $("p:contains('is')") | 「is」テキストを含むすべての<p>要素を選択 |
| :empty | $(:empty) | 空要素（子要素またはテキストを含まない要素）を選択 |
| :has() | $("p:has(span)") | 少なくとも1つの<span>要素を持つすべての<p>要素を選択 |
| :parent | $(:parent) | 少なくとも1つの子要素を持つすべての要素（要素またはテキスト）を選択 |
| 選択子 | 例 | 説明 |
|---|---|---|
| :input | $(:input) | すべての入力、テキストエリア、選択およびボタン要素を選択 |
| :text | $(:text) | 「text」タイプのすべての入力要素を選択 |
| :password | $(:password) | 「password」タイプのすべての入力要素を選択 |
| :radio | $(:radio) | 「radio」タイプのすべての入力要素を選択 |
| :checkbox | $(:checkbox) | 「checkbox」タイプのすべての入力要素を選択 |
| :button | $(:button) | 「button」タイプのすべての入力およびボタン要素を選択 |
| :submit | $(:submit) | 「submit」タイプのすべての入力およびボタン要素を選択 |
| :reset | $(:reset) | type="reset"のすべての入力およびボタン要素を選択 |
| :image | $(":image") | type="image"のすべての入力要素を選択 |
| :file | $(":file") | type="file"のすべての入力要素を選択 |
| :enabled | $(":enabled") | すべての有効な要素を選択 |
| :disabled | $(":disabled") | すべての無効な要素を選択 |
| :selected | $(":selected") | 選択されたすべての要素を選択、<option> 要素にのみ適用 |
| :checked | $(":checked") | 選択されたまたは選択された要素を選択、チェックボックス、ラジオボタンおよび選択エレメントに適用 |
| :focus | $(":focus") | 現在フォーカス中の要素を選択 |
| 選択子 | 例 | 説明 |
|---|---|---|
| :hidden | $("p:hidden") | すべての隠された <p> 要素を選択 |
| :visible | $("p:visible") | すべての可視 <p> 要素を選択 |