【jQuery入門】jQueryのセレクターまとめ【プログラミング】

プログラミング jQuery
2020.11.07
スポンサーリンク

jQueryでは、様々なセレクターを利用してHTMLの要素を指定することができます。

今回はjQueryのセレクターをまとめて紹介します。

スポンサーリンク

CSSでよく使うセレクター

要素セレクター

書式

$(“要素名”)

指定対象

特定の要素

 

要素名とは
「html」や「body」、「p」、「div」などです。

 

IDセレクター

書式

$(“#ID名”)

指定対象

特定のid属性を持つ要素

 

 

例えば、下記のようなid属性を持つ要素があるときに指定する方法です。

<h1 id=”title”>見出し</h1>

こうした要素がある場合に、この指定方法を活用することができます。

$(“#title”)

 

IDセレクターは非常によく使うので、覚えておきましょう！

クラスセレクター

書式

$(“.クラス名”)

指定対象

特定のclass属性を持つ要素

 

 

例えば、下記のようなclass属性を持つ要素があるときに指定する方法です。

<h1 class=”title”>見出し</h1>

こうした要素がある場合に、この指定方法を活用することができます。

$(“.title”)

 

classセレクターは非常によく使うので、覚えておきましょう！

子孫セレクター

書式

$(“要素1 要素2”)

指定対象

特定の要素の内側にある要素

 

 

例えば、下記のような入れ子になっているHTMLがあったとします。

<div>
<h1>見出し</h1>
<p>テキスト</p>
</div>

こうした要素の内側に要素がある場合に、この指定方法を活用することができます。
例えば、下記のように指定します。

$(“div h1”)

この場合、対象になるのは<h1>要素になります。

 

子孫セレクターはよく使うので、覚えておきましょう！

ユニバーサルセレクター

書式

$(“*”)

指定対象

すべての要素

 

グループセレクター

書式

$(“セレクター1, セレクター2”)

指定対象

複数のセレクター

※複数のセレクターを,（カンマ）で区切って並べて指定します。

 

例えば、下記のようなHTMLがあったとします。

<ul>
<li id=”first”>リスト1</li>
<li id=”second”>リスト2</li>
<li id=”third”>リスト3</li>
</ul>

この場合の指定方法は、下記のようになります。

$(“#first , #second , #third”)

この書式で指定したセレクターすべてに反映されます。
指定の数に限りはありません。

 

グループセレクターはよく使うので、覚えておきましょう！

CSS2.1のセレクター

子セレクター

書式

$(“親要素名 > 子要素名”)

指定対象

特定の要素の直下の子要素

 

 

例えば、下記のようなHTMLがあった場合

<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>

指定方法は下記のようになります。

$(“ul > li”)

この場合、注意しておきたいことがあります。
HTMLには<li>要素が3つありますが、この書式で要素を指定すると、<ul>の直下にある<li>リスト1</li>のみが反映されます。

 

隣接セレクター

書式

$(“要素1 + 要素2”)

指定対象

特定の要素の次の要素

 

 

例えば、下記のようなHTMLがあった場合

<ul>
<li id=”first”>リスト1</li>
<li id=”second”>リスト2</li>
<li id=”third”>リスト3</li>
</ul>

例えば指定方法は下記のようになります。

$(“#second + li”)

この場合、id属性が「second」の要素の次に出現するli要素、つまり3番目のli要素が対象になります。

 

first-child擬似クラス

書式

$(“要素:first-child”)

指定対象

同一要素内の最初の要素

 

 

例えば、下記のようなHTMLがあった場合

<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>

指定方法は下記のようになります。

$(“li:first-child”)

この場合、HTMLには<li>要素が3つありますが、この書式で要素を指定すると、一番最初にある<li>リスト1</li>のみが対象になります。

 

CSS3のセレクター

間接セレクター

書式

$(“要素1~要素2”)

指定対象

特定の要素の後に出現する要素

 

 

例えば、下記のようなHTMLがあった場合

<ul>
<li id=”first”>リスト1</li>
<li id=”second”>リスト2</li>
<li id=”third”>リスト3</li>
<li id=”fourth”>リスト4</li>
</ul>

例えば指定方法は下記のようになります。

$(“#second ~ li”)

この場合、id属性が「second」の要素の後ろに登場するli要素、
つまり3番目以降のli要素（<li id=”third”>リスト3</li>と<li id=”fourth”>リスト4</li>）が対象になります。

否定擬似クラス

書式

$(“要素1:not(要素2)”)

指定対象

特定の要素のうち要素2の条件を除く要素

 

 

例えば、下記のようなHTMLがあった場合

<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>

指定方法は下記のようなものが挙げられます。

$(“li:not(:first-child)”)

この場合、最初にある<li>要素（1番目のli要素）以外のli要素、つまり2番目以降のli要素が対象になります。

 

empty擬似クラス

書式

$(“要素:empty”)

指定対象

子要素やテキストを含まない要素

 

 

例えば、下記のようなHTMLがあった場合

<ul>
<li>リスト1</li>
<li></li>
<li>リスト3</li>
</ul>

指定方法は下記のようなものが挙げられます。

$(“li:empty”)

この場合、空の<li>要素、つまり2番目のli要素が対象になります。

 

nth-child擬似クラス

書式

$(“要素:nth-child(番号)”)

指定対象

要素内の指定した番号の要素

 

 

例えば、下記のようなHTMLがあった場合

<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>

指定方法は下記のようなものが挙げられます。

$(“li:nth-child(3)”)

この場合、3番目の<li>要素が対象になります。

番号ではなく、偶数や奇数、任意の倍数でも指定できます。
偶数番目は$(“li:nth-child(even)”)、奇数番目は$(“li:nth-child(odd)”)と記述します。

 

last-child擬似クラス

書式

$(“要素:last-child”)

指定対象

要素内の最後の要素

 

例えば、下記のようなHTMLがあった場合

<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>

指定方法は下記のようなものが挙げられます。

$(“li:last-child”)

この場合、最後の<li>要素が対象になります。

 

only-child擬似クラス

書式

$(“要素:only-child”)

指定対象

特定の要素が1つだけ含まれる要素

 

 

例えば、下記のようなHTMLがあった場合

<ul>
<li>リスト1<span>テキスト</span></li>
<li>リスト2<span>テキスト</span><span>テキスト</span></li>
<li>リスト3</li>
</ul>

指定方法は下記のようなものが挙げられます。

$(“li span:only-child”)

この場合、1番目のli要素に入っているspan要素だけが対象になります。
2番目のli要素にはspan要素が複数含まれるため、対象にはなりません。

 

nth-last-child擬似クラス

書式

$(“要素:nth-last-child(番号)”)

指定対象

要素内を後ろから数えて指定した番号にある要素

 

nth-of-type擬似クラス

書式

$(“要素:nth-of-type(番号)”)

指定対象

同一要素で指定した番号にある要素

 

nth-last-of-type擬似クラス

書式

$(“要素:nth-last-of-type(番号)”)

指定対象

同一要素で後ろから数えて指定した番号にある要素

 

first-of-type擬似クラス

書式

$(“要素:first-of-type”)

指定対象

同一要素で最初にあたる要素

 

last-of-type擬似クラス

書式

$(“要素:last-of-type”)

指定対象

同一要素で最後にあたる要素

 

only-of-type擬似クラス

書式

$(“要素:only-of-type”)

指定対象

1つだけ存在する要素

 

lang擬似クラス

書式

$(“:lang(言語)”)

指定対象

特定の言語を指定された要素

 

CSSの属性セレクター

[attribute]

書式

$(“[属性名]”)

指定対象

特定の属性を持つ要素

 

 

例えば、下記のようなHTMLがあった場合

<ul>
<li id=”first”>リスト1</li>
<li>リスト2</li>
<li id=”third”>リスト3</li>
<li>リスト3</li>
</ul>

指定方法は下記のようなものが挙げられます。

$(“[id]”)

この場合、id属性を持つ要素（1番目と3番目のli要素）が対象になります。

 

[attribute=’value’]

書式

$(“[属性名=’値’]”)

指定対象

特定の属性が指定した値を持つ要素

 

 

例えば、下記のようなHTMLがあった場合

<ul>
<li title=”first”>リスト1</li>
<li title=”second”>リスト2</li>
<li title=”third”>リスト3</li>
<li title=”fourth”>リスト3</li>
</ul>

指定方法は下記のようなものが挙げられます。

$(“[title=’second’]”)

この場合、title属性の値が「second」の要素、つまり2番目のli要素が対象になります。

 

 

[attribute!=’value’]

書式

$(“要素名[属性名!=’値’]”)

指定対象

特定の属性が指定した値を持たない要素

 

[attribute^=’value’]

書式

$(“[属性名^=’値’]”)

指定対象

特定の属性が指定した値で始まっている要素

 

[attribute$=’value’]

書式

$(“[属性名$=’値’]”)

指定対象

特定の属性が指定した値で終わっている要素

 

[attribute*=’value’]

書式

$(“[属性名*=’値’]”)

指定対象

特定の属性が指定した値を含んでいる要素

 

[attributeFilter1]

書式

$(“[属性セレクター1][属性セレクター2]”)

指定対象

複数の属性セレクターに該当する要素

 

jQueryの独自セレクター

firstセレクター

書式

$(“要素:first”)

指定対象

指定した要素の最初の要素

 

lastセレクター

書式

$(“要素:last”)

指定対象

指定した要素の最後の要素

 

evenセレクター

書式

$(“要素:even”)

指定対象

指定した要素の偶数番目の要素（0から数える）

 

oddセレクター

書式

$(“要素:odd”)

指定対象

指定した要素の奇数番目の要素（0から数える）

 

eqセレクター

書式

$(“要素:eq(番号)”)

指定対象

指定した番号の要素（番号は0から数える）

 

ltセレクター

書式

$(“要素:lt(番号)”)

指定対象

指定した番号より前の要素（番号は0から数える）

 

gtセレクター

書式

$(“要素:gt(番号)”)

指定対象

指定した番号より後の要素（番号は0から数える）

 

headerセレクター

書式

$(“:header”)

指定対象

h1~h6までのheading要素

 

containsセレクター

書式

$(“要素:contains(文字列)”)

指定対象

特定の文字列が含まれている要素

 

hasセレクター

書式

$(“要素1:has(要素2)”)

指定対象

特定の要素が含まれている要素

 

parentセレクター

書式

$(“要素:parent”)

指定対象

子要素やテキストを含む要素

 

おすすめ書籍

参考にしたおすすめ本はこちら！↓

【送料無料】 Web制作の現場で使うjQueryデザイン入門 / 西畑一馬 【本】

posted with カエレバ
楽天市場
Amazon
Yahooショッピング

Web制作の現場で使うjQueryデザイン入門｜著者：西畑一馬

こちらの書籍では、jQueryの基礎的な構文や、実際使えるアニメーション実装の仕方まで丁寧に解説されています。
「ドーナツ本」とも呼ばれており、初心者に非常にわかりやすい本なので、jQueryを勉強し始めようという方にぜひ読んで欲しいです。

 

スポンサーリンク
タイトルとURLをコピーしました