jQuery/Selector
をテンプレートにして作成
LECTURE
担当科目一覧
ソーシャルデザイン概論/2024
ソーシャルデザイン演習/2024
情報デザイン論/2024
情報デザイン演習IIA/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*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名はページ内に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 ')
子要素を持たない要素を選択します。
~
~
終了行:
*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名はページ内に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 ')
子要素を持たない要素を選択します。
~
~
ページ名: