jQueryのセレクタ 基本(4ページ目)

.class クラス名

セレクタ .classは、class名の頭に.(ドット)を付けたjQueryセレクタです。 このクラス名にマッチするすべての要素を検索し、配列で返します。 (もし、IDがピリオドやコロンを含むならダブルバックスラッシュでエスケープします)

たとえば、下の「.mytestを赤くします」というテキスト部分をクリックしてみてください。

.mytestを赤くします

これは、次のコードで動作しています。

<div>
  <div class="mytest">div1 class="mytest"</div>
  <div>div2</div>
</div>
<div class="mytest">div3 class="mytest"</div>

<button onclick='
  $(".mytest").css("color","red");
'>.mytestを赤くします
</button>

$(".mytest")でクラス名検索し結果その結果にCSSを適用しています。

もうひとつ試してみましょう。my5をクリックすると書き変わりアニメーションします。



コードは次のとおりです。

<div class="my2">
  <div class="my3">my3</div>
  <div class="my5">my5</div>
  <div class="my4">my4</div>
</div>
<div class="my5">my5</div>
<div class="my6">my6</div>

<script type="text/javascript">
jQuery(function($){

  $(".my5").click(function(event){
    $(this).html("my5をクリックしましたね")
           .css("color","red")
           .css("position","relative")
           .animate({left:'+=200'},1000)
           .slideToggle(1000)
           .slideToggle(1000)
           .animate({left:'-=200'},1000);
  })
  
});
</script>

$(".my5")で検索された要素すべてに対して、clickイベントをセットし、 それらの要素がクリックされると、.html()で文字を出力し、color(文字色)をred(赤)に変えてanimate(leftを200px加算した場所まで1秒かけて移動)し slideUP/Down後戻っています。

ブラウザごとに指定が面倒なイベント処理ですが、jQueryでは、このような記述で、手軽に要素を絞り込み、メソッドチェーンをつないでいくだけで、本当に簡単にクロスブラウザなイベントやエフェクトをセットできます。

次ページは、アスタリスクセレクタです。