セレクターその２（IDセレクター）
次にIDセレクターの記述方法。
単純に、指定情報を「#ID名」にしてあげるだけ。
但し、同一IDが存在する場合、先頭のIDが優先される感じ？全部が対象になるわけじゃないのかな。
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { //IDが「second」の要素の文字色を赤にする。（但し最初に該当した要素だけ？） $("#second").css("color", "red"); }) </script> </head> <body> <span id="second">ID指定バージョン</span> <ul> <li id="first">テキストテキストテキストテキストテキスト</li> <li id="second">テキストテキストテキストテキストテキスト</li> <li id="third">テキストテキストテキストテキストテキスト</li> <li id="fourth">テキストテキストテキストテキストテキスト</li> </ul> </body> </html>
要素を指定すれば、li要素のsecondのプロパティを変更できる。
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { //要素が「li」で、かつIDが「second」の要素の文字色を赤にする $("li#second").css("color", "red"); }) </script> </head> <body> <span id="second">ID指定バージョン</span> <ul> <li id="first">テキストテキストテキストテキストテキスト</li> <li id="second">テキストテキストテキストテキストテキスト</li> <li id="third">テキストテキストテキストテキストテキスト</li> <li id="fourth">テキストテキストテキストテキストテキスト</li> </ul> </body> </html>
セレクターその３（classセレクター）
classセレクターの記述方法。
指定情報を「.class名」にするだけ。
こちらで指定した場合、同一classを適用されている要素は全て反映されるっぽ。
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { //classが「second」の要素の文字色を赤にする $(".second").css("color", "red"); }) </script> </head> <body> <span class="second">class指定バージョン</span> <ul> <li class="first">テキストテキストテキストテキストテキスト</li> <li class="second">テキストテキストテキストテキストテキスト</li> <li class="third">テキストテキストテキストテキストテキスト</li> <li class="fourth">テキストテキストテキストテキストテキスト</li> </ul> </body> </html>
ID指定のときと同じく、要素を指定してより詳細な指定もできる。
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { //要素が「li」で、かつclassが「second」の要素の文字色を赤にする $("li.second").css("color", "red"); }) </script> </head> <body> <span class="second">class指定バージョン</span> <ul> <li class="first">テキストテキストテキストテキストテキスト</li> <li class="second">テキストテキストテキストテキストテキスト</li> <li class="third">テキストテキストテキストテキストテキスト</li> <li class="fourth">テキストテキストテキストテキストテキスト</li> </ul> </body> </html>
セレクターその４（子孫セレクター）
例ではclassセレクター＋要素セレクターの組み合わせだけになっていたけど、
複数のセレクターをスペース区切りで指定することにより、特定の要素の内側にある要素をさらに絞りこんで指定できます。
ちょっと修正してIDセレクターも含めて試してみた。
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { //classが「first」で、その内部にあるstrong要素の文字色を赤にする $(".first strong").css("color","red"); //IDが「first」で、その内部にあるstrong要素の文字色を青にする $("#first strong").css("color","blue"); //タグが「li」で、その内部にあるIDが「hoge」の要素の文字色を緑にする $("li #hoge").css("color","green"); }) </script> </head> <body> <span class="second">子孫指定バージョン</span> <ul> <li class="first"><strong>テキスト</strong>テキストテキストテキストテキスト</li> <li class="first"><strong id="hoge">テキスト</strong>テキストテキストテキストテキスト</li> <li id="first"><strong>テキスト</strong>テキストテキストテキストテキスト</li> <li id="first"><strong>テキスト</strong>テキストテキストテキストテキスト</li> </ul> </body> </html>
セレクターその５（ユニバーサルセレクター）
ですって。では早速。
すべての要素を指定できるのが「ユニバーサルセレクター」です。ユニバーサルセレクターは*(アスタリスク)で記述します。
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { $("li *").css("color","red"); }) </script> </head> <body> <span class="second">子孫指定バージョン</span> <ul> <li><strong>テキスト</strong>テキストテキストテキストテキスト</li> <li><em>テキスト</em>テキストテキストテキストテキスト</li> <li><span>テキスト</span>テキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> </ul> </body> </html>
"*" を指定した場合、子要素がないものについては無視されるっぽいね。
「指定した以上、子要素はあるべき」という解釈でいいのかな。
セレクターその６（グループセレクター）
サンプルでは "," の両サイドに半角スペースを挿入しているけどつなげるとどうなるんだろう。
複数のセレクターを,(カンマ)区切りで並べて指定できるのが「グループセレクター」です。それぞれのセレクターに対する命令をまとめて記述できます。
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { $("#first , #third").css("color","red"); $("#second,#fourth").css("color","green"); //つなげてみた。 }) </script> </head> <body> <span class="second">グループ指定バージョン</span> <ul> <li id="first">テキストテキストテキストテキストテキスト</li> <li id="second">テキストテキストテキストテキストテキスト</li> <li id="third">テキストテキストテキストテキストテキスト</li> <li id="fourth">テキストテキストテキストテキストテキスト</li> </ul> </body> </html>
いけるね。
多分他の種類のセレクターでもいけるんだろうなぁ。
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> //グループセレクター＋子孫セレクターのテスト。 $(function() { $("#ID0,.class0 .class1").css("color","red"); }) </script> </head> <body> <span class="second">グループ指定バージョン</span> <ul> <li id="ID0">テキストテキストテキストテキストテキスト</li> <li class="class0">テキスト<span class="class1">テキスト</span>テキストテキストテキスト</li> <li class="class0">テキストテキスト<span class="class2">テキスト</span>テキストテキスト</li> <li class="class0">テキストテキストテキスト<span class="class1">テキスト</span>テキスト</li> </ul> </body> </html>
お〜、いけるねぇ。
※2010/3/1 追記
上記の例だと処理の優先順位については「子孫セレクター＞グループセレクター」になっているけど、
「グループセレクター＞子孫セレクター」な関係を表現することはできるんだろうか、という疑問が沸いた。
ひょっとしたらあとで表記方法がでてくるのかもしれないけど、とりあえず括弧でくくってみてもダメだったw
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { //class0とclass1をグループにして、それらの下にあるsubclass0を対象にしたい。 $("(.class0,.class1) .subclass0").css("color","red"); }) </script> </head> <body> <span class="second">グループ指定バージョン</span> <ul> <li class="class0"><span class="subclass0">テキスト</span>テキストテキストテキスト</li> <li class="class0">テキスト<span class="subclass1">テキスト</span>テキストテキスト</li> <li class="class1">テキストテキスト<span class="subclass0">テキスト</span>テキスト</li> <li class="class1">テキストテキストテキスト<span class="subclass1">テキスト</span></li> </ul> </body> </html>
ちゃんと処理できないみたいで、みんな黒字になってしまう。
これだとできる。やっぱりグループセレクターの方が処理の優先順位が低いらしい。
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { $(".class0 .subclass1,.class1 .subclass0").css("color","red"); }) </script> </head> <body> <span class="second">グループ指定バージョン</span> <ul> <li class="class0"><span class="subclass0">テキスト</span>テキストテキストテキスト</li> <li class="class0">テキスト<span class="subclass1">テキスト</span>テキストテキスト</li> <li class="class1">テキストテキスト<span class="subclass0">テキスト</span>テキスト</li> <li class="class1">テキストテキストテキスト<span class="subclass1">テキスト</span></li> </ul> </body> </html>
※2010/6/9 追記→2010/6/13 修正
一生見習いマンさんからアドバイス＋新情報を頂きました！
セレクタは第２引数に「コンテキスト」なるモノを指定可能なのだそうです。
つまり、「第２引数に指定したモノの配下に存在する、第１引数に該当するモノ」という指定が可能とのこと。
区別をしっかりつけるため、class2を追加してみています。
①が一生見習いマンさんが教えて下さった指定の仕方。
②は、ここの、「■セレクタにコンテキストを与えよう」で見つけた指定の仕方。
（※「jQuery セレクタ コンテキスト」あたりでググるといろいろでてきましたw）
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { //class0とclass1をグループにして、それらの下にあるsubclass0を対象にしたい。 //①これは一生見習いマンさんが教えて下さったやりかた。 $(".subclass0", ".class0,.class1").css("color","red"); //②こんな表現も可能みたい。 //$(".class0,.class1", $(".subclass0")).css("color","red"); }) </script> </head> <body> <span class="second">グループ指定バージョン</span> <ul> <li class="class0"><span class="subclass0">テキスト</span>テキストテキストテキスト</li> <li class="class0">テキスト<span class="subclass1">テキスト</span>テキストテキスト</li> <li class="class1">テキストテキスト<span class="subclass0">テキスト</span>テキスト</li> <li class="class1">テキストテキストテキスト<span class="subclass1">テキスト</span></li> <li class="class2">てきすとてきすとてきすと<span class="subclass0">てきすと</span></li> </ul> </body> </html>
更に、コンテキストを３種以上、つまりセレクタの引数を３つ以上指定可能か試してみました。（「調査」ではないところが微妙w）
以下のサンプルでは、上記のサンプルコードに対してさらにulタグを追加し、それぞれ「ul0」「ul1」クラスを指定しています。
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { //セレクタの引数は２つまでしか有効ではないみたい。 //以下のような指定をしても、ul0、ul1 の両方が処理対象になってしまっていて、 //意図した通りの処理が行われない。 //$(".subclass0", ".class0,.class1", ".ul1").css("color","red"); //$(".subclass0", $(".class0,.class1"), $(".ul1")).css("color","red"); //こんな記述にすると意図した通りに処理してくれるふう。ネストできるんだねぇ〜♪ $(".subclass0", $(".class0,.class1", ".ul1")).css("color","red"); }) </script> </head> <body> <span class="second">グループ指定バージョン</span> <div>ul0</div> <ul class="ul0"> <li class="class0"><span class="subclass0">テキスト</span>テキストテキストテキスト</li> <li class="class0">テキスト<span class="subclass1">テキスト</span>テキストテキスト</li> <li class="class1">テキストテキスト<span class="subclass0">テキスト</span>テキスト</li> <li class="class1">テキストテキストテキスト<span class="subclass1">テキスト</span></li> <li class="class2">てきすとてきすとてきすと<span class="subclass0">てきすと</span></li> </ul> <div>ul1</div> <ul class="ul1"> <li class="class0"><span class="subclass0">テキスト</span>テキストテキストテキスト</li> <li class="class0">テキスト<span class="subclass1">テキスト</span>テキストテキスト</li> <li class="class1">テキストテキスト<span class="subclass0">テキスト</span>テキスト</li> <li class="class1">テキストテキストテキスト<span class="subclass1">テキスト</span></li> <li class="class2">てきすとてきすとてきすと<span class="subclass0">てきすと</span></li> </ul> </body> </html>
複数のコンテキスト指定はできないみたいだけど、ネストするとできるっぽいですな。
一生見習いマンさん、ありがとうございました！
