12/2(金):JQuery入門(4)

JQueryをマスターするための第一歩は「セレクター」。
5つの分類

  1. CSSでよく利用されるセレクタ
  2. CSS2のセレクタ
  3. CSS3のセレクタ
  4. CSSの属性セレクタ
  5. JQueryの独自フィルター

そのうちの

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>

JQuery

$(function(){
	$("#test1 ~ div").css("color","blue");
}

id属性に「test1」が設定された要素の後ろに登場するli要素、
つまり2番目以降のli要素が青色になる。

否定擬似クラス

セレクター内の要素で特定の条件以外の要素を選択できるのが「否定擬似クラス」である。
セレクターの後ろに:not(...)を付け、(...)内に除外する条件を記述する。

html

	<div id="test">testtest</div>
	<div>testtest</div>
	<div>testtest</div>

JQuery

$(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>

JQuery

$(function(){
	$("strong:not(:empty)").css("color","blue");
}
nth-child擬似クラス

セレクターの要素から任意の番号の要素だけを選択できるのが「nth-child擬似クラス」である。
セレクターの後ろに:nth-child(番号)と記述する。

html

	<div>testtesttest</div>
	<div>testtesttest</div>
	<div>testtesttest</div>

JQuery

$(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>

JQuery

$(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>

JQuery

$(function(){
	$("div span:only-child").css("color","blue");
}

1番目のspan要素だけが青色になる。
2番目のdiv要素にはspan要素が複数含まれるため、対象になりません。

以上がCSS3のセレクターである。
明日は5つの分類のうちの

  1. CSSでよく利用されるセレクタ
  2. CSS2のセレクタ
  3. CSS3のセレクタ
  4. CSSの属性セレクタ
  5. JQueryの独自フィルター

CSSの属性セレクターを勉強する。
毎日一時間コツコツと。

ちなみにこの学習は
Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)
Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)
で行なっている。