[jQuery] セレクターの種類

セレクターとは?
以下の箇所の記述をセレクターという
$(“セレクター”).click(function(){…..}
セレクターの種類は以下
// CSS3————————————————————-
・間接セレクター
特定のセレクターの後に出現する要素を指定できる
記述 : $(“#second ~ li”).css(“color”,”red”);
・否定擬似クラス
セレクター内で特定の条件以外のものを指定できる
記述 : $(“li:not(:first-child)”).css(“color”,”red”);
※セレクターの後ろに「:not(…)」を付け、除外する条件を(…)に記述する
・empty擬似クラス
子要素やテキストを含まない要素を指定できる
記述 : $(“li:empty”).css(“color”,”red”);
※セレクターの後ろに「:empty」と記述する
・nth-child擬似クラス
特定のセレクターから指定した番号の要素だけを指定できる
記述 : $(“li:nth-child(3)”).css(“color”,”red”);
※セレクターの後ろに「:nth-child(番号)」と記述する
nth-child擬似クラスは番号の部分に(even)と記述すると偶数番目のli要素を、(odd)を記述すると奇数番目のli要素を指定できる
また、(3n)と記述すればnの前に指定した数値の倍数番目の要素を指定できる
※(3n)の場合は3の倍数番目となる
・last-child擬似クラス
特定のセレクターの中で最後の要素だけを指定できる
記述 : $(“li:last-child”).css(“color”,”red”);
※セレクターの後ろに「:last-child」と記述する
・only-child擬似クラス
セレクターの中の特定の要素が一つだけ含まれる場合、その要素を指定できる
記述 : $(“li span:only-child”).css(“color”,”red”);
※セレクターの後ろに「指定要素:only-child」と記述する
この場合li要素の中のspan要素の部分だけが赤色に変わる
This entry was posted in jQuery, プログラミング関連, 備忘録 and tagged , . Bookmark the permalink.

コメントを残す

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