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

* アスタリスク

アスタリスクセレクタは、すべての要素にマッチします。

たとえば、次のように書くと、ページ内のすべての要素のcolorを一瞬でグレーにできます。

<script type="text/javascript">
  jQuery("*").css("color","#888");
</script>

$("*")ですべてを対象として検索し、その結果にCSSを適用しているわけです。

もうひとつ試してみましょう。次のdivとspanをクリックするとアニメーションします。



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

<div id="my2">
  <div>div</div>
  <span>span</span>
</div>

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

  $("*","#my2").click(function(event){
    $(this)
           .css("color","orange")
           .animate({fontSize:"3em"},300)
           .animate({fontSize:"1em"},300)
  })
  
});
</script>

コンテクストを"#my2"に絞り込んでから、その要素内のすべての要素にクリックイベントをセットします。

それらの要素がクリックされると、color(文字色)をorange(オレンジ)に変えてanimate(フォントサイズを3emまで0.3秒かけて拡大)し 戻しています。

次ページは、セレクタの複数指定です。