11/30(水)：JQuery入門(2)

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

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

そのうちの

１．CSSでよく利用されるセレクター

要素セレクターやIDセレクター、クラスセレクターから、子孫セレクター、ユニバーサルセレクター、グループセレクター・・・
様々なセレクターが存在する。

要素セレクター

特定のHTML要素に対して命令を実行するには「要素セレクター」を利用する。

html

	<div>testtest</div>
	<div>testtest</div>
	<div>testtest</div>
	<div>testtest</div>

JQuery

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

するとdiv要素のcolorプロパティが変更され、テキスト「testtest」が青くなる。

IDセレクター

特定のid属性を持つ要素を対象にするときには「IDセレクター」を利用する。
id属性の値に#（ハッシュ）を付けたものをセレクターとして利用する。

html

	<div id="ft">テキスト</div>
	<div id="sd">テキスト</div>
	<div id="td">テキスト</div>
	<div id="fh">テキスト</div>

JQuery

$(function(){
  $("#fh").css("color","blue");
}

するとid属性に「th」が設定されたdiv要素（四番目のdiv要素）が青くなる。
id属性だけでも要素はとくてできるが要素名をわかりやすくするために、要素セレクターも一緒に指定するといい。
JQuery

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

クラスセレクター

特定のclass属性を持つ要素を対象とするときには「クラスセレクター」を利用する。
class属性の値に．（ドット）を付けたものをセレクターとして利用する。

html

	<div class="test-1">テキスト</div>
	<div class="test-2">テキスト</div>
	<div class="test-3">テキスト</div>

JQuery

$(function(){
  $("div.test-1").css("color","blue");
}

class属性に「test-1」がされたdiv要素（１番目のdiv要素）が青色になる。
クラスセレクターは、IDセレクターのようにつなげて記述することが可能

孫セレクター

複数のセレクターをスペース区切りで指定することにより、特定の要素の内側にある要素をさらに絞り込める。

html

	<div class="test1"><strong>test</strong>testtest</div>
	<div class="test2"><strong>test</strong>testtest</div>
	<div class="test3"><strong>test</strong>testtest</div>

JQuery

$(function(){
  $(".test1 strong").css("color","blue");
}

class属性が「test-1」の要素の内側にあるstrong要素、
つまり１番目のdiv要素のstrong要素だけが青色になる。
クラスセレクターは、IDセレクターのようにつなげて記述することが可能

ユニバーサルセレクター

すべての要素を選択できるのが「ユニバーサルセレクター」である。
ユニバーサルセレクターは*（アスタリスク）で記述する。

html

	<div><strong>testtest</strong>testtesttesttest</div>
	<div><em>testtest</em>testtesttesttest</div>
	<div><span>testtest</span>testtesttesttest</div>

JQuery

$(function(){
　$("div *").css("color", "blue");
}

div要素内に含まれるすべての要素、１番目のstrongと２番目のem要素と３番目のspan要素が青色になる。

グループセレクター

複数のセレクターを，（カンマ）区切りで並べて指定できるのが「グループセレクター」である。
それぞれのセレクターに対する命令をまとめて記述できる。

html

	<div id="number1">テストテストテスト</div>
	<div id="number2">テストテストテスト</div>
	<div id="number3">テストテストテスト</div>

JQuery

$(function(){
　$("#number1 , #number3").css("color","blue");
}

id属性が「number1」の１番目のdiv要素と、「number3」の３番目のdiv要素が青色になる。

以上がCSSでよく利用されるセレクターである。
明日は５つの分類のうちの

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

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

ちなみにこの学習は

 Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)
で行なっている。