jQueryの使い方のおさらい

昨日からスタートした技術ブログ。

早速ですが、本日はjQueryの使い方をおさらいします。

そもそもjQueryとは？

jQueryは元Mozillaに所属していたJohn Resing氏が開発した、JavaScriptライブラリです。

特徴として、CSSセレクタを利用した要素の選択や、分かりやすいAPIを用いて、デザイナさんでも簡単にDOM処理を行うことが出来ます。

簡単なおさらい

さて、jQueryを使うわけですが、基本的な使い方は以下のようになります。
※ 今回はjQuery 1.6系を利用しています。

jQuery("CSSセレクタ").関数名();

以下に、IDがslideBoxの要素をslideDown関数を使ってみる例を。

<div id="slideBox"><p>スライドダウンで内容物が表示されます。</p></div>
<script type="text/javascript">jQuery("#slideBox").slideDown();</script>

動作サンプル

slideDownで表示したい要素が複数ある場合

slideDownだけに限りませんが、動かしたい・アニメーションさせたい！というHTML要素が複数個ある場合は以下のようなコードになります。

<div class="slideBox"><p>スライドダウンで表示する要素1</p></div>

<div class="slideBox"><p>スライドダウンで表示する要素2</p></div>

<div class="slideBox"><p>スライドダウンで表示する要素3</p></div>

<div class="slideBox"><p>スライドダウンで表示する要素4</p></div>

<script type="text/javascript">jQuery(".slideBox").slideDown();</script>

何故クラスを指定したかというと、HTMLの仕様上、同一のIDが複数存在してはいけないというルールがあるので、クラス属性に変更しています。

動作サンプル

◯◯されたら◯◯する

よくある「マウスがクリックされたら文字を表示する」や「マウスが乗っかったら◯◯して、マウスが離れたらもとに戻す」ということもjQueryなら簡単に行なえます。

マウスがクリックされたら文字を表示する例

<h2>クリックしてネ！</h2><p>クリックされたよ！</p>

<script type="text/javascript">
jQuery("h2").click(function(){
    jQuery("p").show();
});</script>

動作サンプル

マウスが乗っかったら文字を大きくして、マウスが離れたらもとに戻す例

<h2>マウスを乗せると文字が大きくなります！
</h2><script type="text/javascript">
    jQuery("h2").hover(function(){
        // マウスが乗っかったときの処理
        jQuery(this).animate({ fontSize: 30 });
    }, function(){
        // マウスが離れたときの処理
        jQuery(this).animate({ fontSize: 14 });
    });</script>

動作サンプル

ここで初めて出てきた「function(){}」の記述ですが、これはやりたい事（処理内容）を書くためのスペースす。

「◯◯されたときに◯◯する」の赤文字のやりたいことを書きます。

今回の場合は「this（選択されたh2要素自信）をで文字サイズを大きくする」がやりたい事になるので、記述のとおりanimate関数で文字サイズをヌルッと大きくしたり戻したりしています。

今後について

今後は、JavaScriptメイン（主にjQueryやMootoolsなどのライブラリ）の記事を投稿出来ればと思っています。