株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。

     横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

jQuery

11-03) 1. cssのセレクターを操作する

jQueryでcssのセレクターを操作する
jQueryでは、HTML(XHTML、HTML5)の各要素をセレクターで表現し、操作する。

要素セレクター
HTMLの要素のセレクター

書式; $("要素名")
IDセレクター
ID属性を持つ要素を対象にします。
ID属性の値に#(ハッシュマーク)を付けたものをセレクターとして利用する。
ID属性の値はユニークである必要があります。

書式; $("#ID名")
クラスセレクター
クラス属性を持つ要素を対象にします。
クラス属性の値に.(ドット)を付けたものをセレクターとして利用する。

書式; $(".クラス名")
子孫セレクター
階層関係にある複数のセレクターをスペース区切りで指定する。

書式; $("要素名 要素名")
ユニバーサル
セレクター
すべての要素を選択できるセレクターで、*(アスタリスク)で記述する。

書式; $("要素名  *")
グループセレクター
複数のセレクターを,(カンマ)区切りで並べて指定し記述する。

書式; $("要素名 , 要素名 , 要素名 ・・・")

jQueryでcss2のセレクターを操作します。
jQueryでは、HTML(XHTML、HTML5)の各要素をセレクターで表現し、操作する。

子セレクター
特定の要素の下の子要素を記述する。

書式; $("親要素名 > 子要素名")
隣接セレクター
特定の要素の次の要素を記述する。

書式; $("親要素名 + 子要素名")
:first-child擬似クラス
特定のセレクタのうち、最初の要素を記述する。

書式; $("要素名:first-child")

jQueryでcss3のセレクターを操作します。
jQueryでは、HTML(XHTML、HTML5)の各要素をセレクターで表現し、操作する。

間接セレクター
特定の要素の後にでる要素を記述する。

書式; $("要素名 ~ 要素名")
否定擬似クラス
特定の要素のうち要素2の条件を除く要素を記述する。

書式; $("要素名:not("要素名")")
nth-child擬似クラス
セレクターの要素から任意の番号の要素だけ選択できる要素を記述する。

書式; $("要素名:nth-child(番号)"
番号だけでなく、偶数(even)、奇数(odd)や
任意の倍数(3n)  ・・3の倍数を記述できる。

jQueryでcssの属性セレクターを操作します。
jQueryでは、HTML(XHTML、HTML5)の各要素をセレクターで表現し、操作する。

属性セレクター
特定の属性をもつ要素を選択する。

書式; $("[ 属性名]")
特定の属性が特定の値を持つ要素を選択する。


書式; $("[ 属性名] = 'value'")

特定の属性が特定の値を持たない選択する。


書式; $("[ 属性名] != 'value'")

jQueryの独自フィルターを操作します。
jQueryでは、HTML(XHTML、HTML5)の各要素をセレクターで表現し、操作する。

:firstフィルター
指定した要素の最初の要素を選択する。

書式; $("要素名:first")
:lastフィルター
指定した要素の最後の要素を選択する。

書式; $("要素名:last")
:evenフィルター
指定した要素の偶数番目の要素を選択する。

書式; $("要素名:even")
:oddフィルター
指定した要素の奇数番目の要素を選択する。

書式; $("要素名:odd")
:eqフィルター
指定した番号の要素を選択する。

書式; $("要素名:eq(番号)")
:gtフィルター
指定した番号より後の要素を選択する。

書式; $("要素名:gt(番号)")
:ltフィルター
指定した番号より前の要素を選択する。

書式; $("要素名:lt(番号)")