jQuery 01-04: セレクタの指定

●セレクタの指定

前回のサンプルでは3つある全てのdivに文字が設定されました。これは、
まとめて内容を設定したい場合には都合が良いかもしれませんが、大抵の場合不都合になるでしょう。
ですので今回はより詳細なセレクタの設定を学び、各divに個別の文章を表示させます。

sample : 各divに異なる文字を表示する
http://www.designdrill.jp/jquery/01/step05.html
※ソースを開き、divにidやclassが設定されていることを確認してください。

 
 
ポイントは各divにclassやidが設定されていることです。jQueryのセレクタはhtmlの要素だけでなく
idやclassも指定することができるのです。そして指定方法は以下の様にcssと同じ文法になっています。

jQuery("#id_test").text("id = id_test");//---idを指定
jQuery(".class_test").text("class = class_test");//---classを指定

また、初歩の段階で間違いやすいサンプルも確認しておきましょう。以下のstep05b.htmlのソースを
確認してください。step05.htmlとほとんど同じで問題ないように見えますが、実際には全て”div”と
表示されてしまっています。
http://www.designdrill.jp/jquery/01/step05b.html

これは設定の「順序ミス」によるものです。せっかくidやclassを指定したのに、その後で全てのdivを
設定するようにしているため、全て”div”となってしまうです。セレクタの指定は広い範囲から狭い範囲
へ設定するように気を付けましょう。
 
 
他にもcssと同じ設定のサンプルを確認しましょう。cssでは複数の要素をスペースを跨いで利用する
ことで、「〜にある〜」(例えばaタグに挟まれたbタグ)という指定ができました。これと同じように
セレクタも設定できるのです。

以下のstep06.htmlのソースを確認してください。このサンプルではpタグ内のbタグの内容だけ変更して
います。pタグの外にあるbタグは変更されないことを確認してください。
http://www.designdrill.jp/jquery/01/step06.html
他にも以下のリファレンスにあるような様々な選択方法があります。
フォームの要素も多く、ユーザビリティの高いフォームを作成できそうです。
リファレンス:セレクタ
セレクタの指定はcssの構文以外にもjQuery特有のものがあり、使い勝手が良さそうです。
以下に、偶数の要素だけを指定する「:even」を利用したサンプルを紹介します。 
※セレクタはjQueryのポイントとなりそうなので、他の構文も追々紹介しようと思います。
 
 

●テーブルの偶数行だけ色を付ける

まずはサンプルを確認しましょう。テーブルの偶数番目の列にjQueryで背景色を設定しています。

sample : 偶数番目の列にjQueryで背景色を設定
http://www.designdrill.jp/jquery/01/step07.html
※html部分にはテーブルの背景色指定がされていないことを確認してください。

 
セレクタの説明の前にstep07.htmlでは新しいメソッドを利用しているので紹介しておきます。
cssメソッドを利用するとセレクタで指定した部分のcssを設定することができます。引数は2つ
必要で、1つめがcssの属性、2つめがその値です。サンプルでは背景色(background-color)
をピンク(#FFCCCC)にしています。
リファレンス:css(name, value)メソッド

jQuery("tr:even").css("background-color", "#FFCCCC");

 
続いてセレクタの部分です。ここでtrに続けて「:even」とすることで偶数番目の行(tr)にだけ
メソッドが実行されるのです。
リファレンス::evenセレクタ
※行の番号は0(偶数扱い)から始まることに注意してください。

jQuery("tr:even").css("background-color", "#FFCCCC");
※evenの前のコロン(:)を忘れないようにしましょう

 
今回の記事はここで終わりです。
次回はインデックス番号(要素に振られた番号)について説明しようと思います。
今回の :even もインデックス番号が偶数という意味です。今回のサンプルはテーブルが
1つだからうまくいきましたが、複数のテーブルがある場合は思うように機能しない
場合があります。その問題を紹介しながらインデックス番号の理解を目指します。
 
 
 
 

コメントを残す

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


− 三 = 4


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>