jQuery/Selector をテンプレートにして作成

開始行:
*jQuery Selector [[jQuery]]｜[[jQuery/Method]]｜[[jQuery/Sample]] ~ jQuery では、getElementsBy・・といったDOM関数を使わずに C... //''付記：親要素/子要素'' //階層構造をもつ文書において対象を特定する際に頻出するキ... // <div>　← 親要素 // <p> ・・・ </p>　← 子要素 // <p>　← 子要素 // <span>・・・</span> 　← 孫要素 // </p> // <p> ・・・ </p>　← 子要素 // </div> ~ ***CONTENTS #contents2_1 ~ **基本セレクタ ***要素セレクタ（HTML要素名） $('HTMLタグ名') HTMLタグである ＜h1＞や＜p＞はそのままセレクタとなります。 ~ ***IDセレクタ $('＃ID名') 定義されたIDに適用 前提：ID名はページ内に１つ（重複してはいけない） ~ ***クラスセレクタ $('.CLASS名') 定義されたクラスに適用 前提：CLASS名はページ内に複数 ~ ***ユニバーサルセレクタ $('＊') すべての要素に適用 CSSの先頭で余白を０リセットする場合などに使用 ~ ***複合セレクタ $('セレクタ, セレクタ, セレクタ, ・・ ') 複数のセレクタにまとめて同一の定義を行う場合に使用 ~ ~ **階層セレクタ ***子セレクタ $('親要素 > 子要素') 特定の親を持つ子要素をセレクト $('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 ') 子要素を持たない要素を選択します。 ~ ~

終了行:
*jQuery Selector [[jQuery]]｜[[jQuery/Method]]｜[[jQuery/Sample]] ~ jQuery では、getElementsBy・・といったDOM関数を使わずに C... //''付記：親要素/子要素'' //階層構造をもつ文書において対象を特定する際に頻出するキ... // <div>　← 親要素 // <p> ・・・ </p>　← 子要素 // <p>　← 子要素 // <span>・・・</span> 　← 孫要素 // </p> // <p> ・・・ </p>　← 子要素 // </div> ~ ***CONTENTS #contents2_1 ~ **基本セレクタ ***要素セレクタ（HTML要素名） $('HTMLタグ名') HTMLタグである ＜h1＞や＜p＞はそのままセレクタとなります。 ~ ***IDセレクタ $('＃ID名') 定義されたIDに適用 前提：ID名はページ内に１つ（重複してはいけない） ~ ***クラスセレクタ $('.CLASS名') 定義されたクラスに適用 前提：CLASS名はページ内に複数 ~ ***ユニバーサルセレクタ $('＊') すべての要素に適用 CSSの先頭で余白を０リセットする場合などに使用 ~ ***複合セレクタ $('セレクタ, セレクタ, セレクタ, ・・ ') 複数のセレクタにまとめて同一の定義を行う場合に使用 ~ ~ **階層セレクタ ***子セレクタ $('親要素 > 子要素') 特定の親を持つ子要素をセレクト $('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 ') 子要素を持たない要素を選択します。 ~ ~

ページ名: