【jQuery】セレクタの使い方 その1

復習がてら…( ˘ω˘)スヤァ
気が向いたら図を追加します。気が向いたら…

基本的なセレクタの使い方


サンプルソース

各種セレクタの結果を確認するために以下のサンプルソースを用意しました。
「親(oya)」→「子(ko)」→「孫(mago)」の順に階層を作っています。

ソースイメージ図(クラスのみ)


AND,OR条件指定

AND指定の場合はタグ名、クラス名、IDを連結して書き、
OR指定の場合は「,」で区切って書く。

AND指定

①実行結果

①実行結果(divタグかつ「oya」クラス)

イメージとしては以下の通りです。

②実行結果

②実行結果(divタグかつ「mago」クラスかつ「taro」クラス)

イメージとしては以下の通りです。

OR指定

③実行結果

③実行結果(「taro」クラスまたは「jiro」クラス)

イメージとしては以下の通りです。


親子関係

④実行結果

④実行結果(親クラス直下にあるinputタグ)

イメージとしては以下の通りです。

⑤実行結果

⑤実行結果(「ko」クラスを持つdivタグから見て一階層上にあるdivタグ)

イメージとしては以下の通りです。


先祖-子孫関係

⑥実行結果

⑥実行結果(親クラス内にある全階層のinputタグ)

イメージとしては以下の通りです。

⑦実行結果

⑦実行結果(「mago」クラスから見て全てのdivタグ)

イメージとしては以下の通りです。


属性

続きは後日…

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です