Javascript/Javascript関連情報

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

今回から、jQueryのAPI自体の使い方についても目配りしていきます。今回はまず、jQueryセレクタの基本的なものから順番に試してみます。

高橋 登史朗

高橋 登史朗

Javascript ガイド

Javascriptをはじめ、Ajax、jQueryの著書多数のガイドが、何かと最近騒がれているJavaScriptの最新情報とその活用方法を解説します。

プロフィール詳細執筆記事一覧

* アスタリスク

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

たとえば、次のように書くと、ページ内のすべての要素のcolorを一瞬でグレーにできます。
<script type="text/javascript">
  jQuery("*").css("color","#888");
</script>
$("*")ですべてを対象として検索し、その結果にCSSを適用しているわけです。

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

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秒かけて拡大)し 戻しています。

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

  • 前のページへ
  • 1
  • 4
  • 5
  • 6
  • 次のページへ

あわせて読みたい

カテゴリー一覧

All Aboutサービス・メディア

All About公式SNS
日々の生活や仕事を楽しむための情報を毎日お届けします。
公式SNS一覧
© All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます