#author("2019-05-28T06:06:22+00:00","default:inoue.ko","inoue.ko")
*jQuery Selector
[[jQuery]]|[[jQuery/Method]]|[[jQuery/Sample]]
~
jQuery では、getElementsBy・・といったDOM関数を使わずに CSSセレクタと同様の記法で 文書内の要素を選択して操作することができます。以下様々なセレクタの書き方を紹介します。
//''付記:親要素/子要素''
//階層構造をもつ文書において対象を特定する際に頻出するキーワードです。外側の要素を親要素、中に囲まれている要素を子要素といいます。
// <div> ← 親要素
// <p> ・・・ </p> ← 子要素
// <p> ← 子要素
// <span>・・・</span> ← 孫要素
// </p>
// <p> ・・・ </p> ← 子要素
// </div>
~
***CONTENTS
#contents2_1
~
**基本セレクタ
***要素セレクタ(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 ')
子要素を持たない要素を選択します。
~
~