LogoMark.png

jQuery/Selector の変更点


#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 ')
子要素を持たない要素を選択します。

~
~