セレクターその３（classセレクター）

jQuery セレクター

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>