LogoMark.png

jQuery/Selector

jQuery Selector

jQueryjQuery/MethodjQuery/Sample

jQuery では、getElementsBy・・といったDOM関数を使わずに CSSセレクタと同様の記法で 文書内の要素を選択して操作することができます。以下様々なセレクタの書き方を紹介します。


CONTENTS


基本セレクタ

要素セレクタ(HTML要素名)

$('HTMLタグ名')

HTMLタグである <h1>や<p>はそのままセレクタとなります。

IDセレクタ

$('#ID名')

定義されたIDに適用
前提:ID名はページ内に1つ(重複してはいけない)

クラスセレクタ

$('.CLASS名')

定義されたクラスに適用
前提:CLASS名はページ内に複数

ユニバーサルセレクタ

$('*')

すべての要素に適用
CSSの先頭で余白を0リセットする場合などに使用

複合セレクタ

$('セレクタ, セレクタ, セレクタ, ・・ ')

複数のセレクタにまとめて同一の定義を行う場合に使用



階層セレクタ

子セレクタ

$('親要素 > 子要素')

特定の親を持つ子要素をセレクト

$('div > span')
---------------------
<div>
  <span>子要素</span>     ← 選択される
  <p><span>孫要素</span></p>
  <span>子要素</span>     ← 選択される
  <span>子要素</span>     ← 選択される
</div>


子孫セレクタ

$('親要素 子要素')

特定の親を持つ子・孫・・・の要素をセレクト

$('div  span')
---------------------
<div>
  <span>子要素</span> ← 選択される
  <p><span>孫要素</span></p> ← 選択される
  <p><a href="#"><span>ひ孫要素</span></a></p> ← 選択される
  <span>子要素</span> ← 選択される
</div>


隣接セレクタ

$('指定要素 + 要素')

指定要素に後続隣接する要素にのみスタイルを適用

$('#B + p')
---------------------
<div>
  <p id="A">要素</p>
  <p id="B">要素</p>
  <p id="C">要素</p> ← 選択される
  <p id="D">要素</p>
</div>


兄弟セレクタ

$('指定要素 ~ 要素')

指定要素に後続する要素すべてにスタイルを適用

$('#B ~ p')
---------------------
<div>
  <p id="A">要素</p>
  <p id="B">要素</p> ← 選択される
  <p id="C">要素</p> ← 選択される
  <span id="D">要素</span>
  <p id="E">要素</p> ← 選択される
</div>




属性セレクタ

属性名 指定

$('セレクタ [ 属性名 ]')

属性を持つ要素にスタイルを適用

$('a[title]')
---------------------
<a href="#" title="abc">abc</a> ← 選択される
<a href="#" title="def">def</a> ← 選択される


属性名=属性値 指定

$('セレクタ [ 属性名 = 属性値 ]')

属性が特定の値を持つ要素にのみスタイルを適用

$('a[title="abc"]')
---------------------
<a href="#" title="abc">abc</a> ← 選択される
<a href="#" title="def">def</a>




フィルタ

最初の要素、N番目の要素・・など CSSセレクタでは擬似要素・擬似クラスにあたるものをフォルタといいます。

first フィルタ

$('セレクタ : first')

最初に現れる要素を選択します。

eq フィルタ

$('sセレクタ : eq(n)')

n番目の要素を選択します。

first-child 子要素フィルタ

$('セレクタ : first-child')

最初に現れる要素を選択します。

last-child 子要素フィルタ

$('セレクタ : last-child')

最後に現れる要素を選択します。

visible 可視性フィルタ

$('セレクタ : visible')

表示された要素を選択します。

hidden 可視性フィルタ

$('セレクタ : hidden')

表示された要素を選択します。

has( ) フィルタ

$('セレクタ : has( セレクタ ) ')

指定した子要素を持つ要素を選択します。

empty フィルタ

$('セレクタ : empty ')

子要素を持たない要素を選択します。




PAGES

GUIDE

TOOL

DATA

Last-modified: 2019-07-05 (金) 20:51:25