12/2(金):JQuery入門(4)
JQueryをマスターするための第一歩は「セレクター」。
5つの分類
そのうちの
2.CSS3のセレクター
jQueryは、現在策定中のCSS3(Cascade Style Sheets level 3)のセレクターの多くにも対応している。
間接セレクター
特定のセレクターの後に出現する要素を選択できるのが「間接セレクター」である。
セレクターと要素を~(チルダ)で結ぶ。
html
<div id="test1">testteststet</div> <div id="test2">testteststet</div> <div id="test3">testteststet</div> <div id="test4">testteststet</div>
$(function(){ $("#test1 ~ div").css("color","blue"); }
id属性に「test1」が設定された要素の後ろに登場するli要素、
つまり2番目以降のli要素が青色になる。
否定擬似クラス
セレクター内の要素で特定の条件以外の要素を選択できるのが「否定擬似クラス」である。
セレクターの後ろに:not(...)を付け、(...)内に除外する条件を記述する。
html
<div id="test">testtest</div> <div>testtest</div> <div>testtest</div>
$(function(){ $("div:not(#test)").css("color","blue"); }
div要素の1番目(id属性がtest)以外のdiv要素が青色になる。
empty擬似クラス
子要素やテキストを含まない要素を選択できるのが「empty擬似クラス」である。
セレクターの後ろに:emptyと記述する。
html
<div id="test1">testteststet</div> <div id="test2">testteststet</div> <div id="test3">testteststet</div> <div id="test4">testteststet</div>
$(function(){ $("strong:not(:empty)").css("color","blue"); }
nth-child擬似クラス
セレクターの要素から任意の番号の要素だけを選択できるのが「nth-child擬似クラス」である。
セレクターの後ろに:nth-child(番号)と記述する。
html
<div>testtesttest</div> <div>testtesttest</div> <div>testtesttest</div>
$(function(){ $("div:nth-child(3)").css("color","blue"); }
実行すると、3番目のdiv要素だけが青色になる。
番号だけでなく、偶数・奇数や任意の倍数でも指定できる。
偶数番目は$("div:nth-child(even)")、奇数番目は$("div:nth-child(odd)")、
3の倍数番目なら$("div:nth-child(3n)")と記述する。
last-child擬似クラス
特定のセレクターの中で最後の要素を選択できるのが「last-child擬似クラス」である。
セレクターの後ろに:last-childと記述する。
html
<div>testtesttest</div> <div>testtesttest</div> <div>testtesttest</div>
$(function(){ $("div:last-child").css("color","blue"); }
最後のdiv要素(ここでは3番目のdiv要素)だけが青色になる。
only-child擬似クラス
セレクターに特定の要素が1つだけ含まれる場合、「only-child擬似クラス」で選択できる。
セレクターの後ろに:only-childと記述する。
html
<div><span>testtest</span>testtesttest</div> <div><span>testtest</span>test<span>testtest</span>testtest</div> <div>testtesttest</div>
$(function(){ $("div span:only-child").css("color","blue"); }
1番目のspan要素だけが青色になる。
2番目のdiv要素にはspan要素が複数含まれるため、対象になりません。
以上がCSS3のセレクターである。
明日は5つの分類のうちの
ちなみにこの学習は
Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)
で行なっている。