ブログBLOG

初めてのjQuery

更新日：2013/01/28

jQuery（というより JavaScript）はブラウザで動くので簡単に書き始めることができます。既存のコードの改変や追加をしたり、script タグにサンプルのコピーを貼り付けたりしても結構うまくできてしまいます。

それも悪くないですが、ここでは jQuery の準備～基本的な使い方をまとめてみました。

■ jQuery の読み込み

jQuery をダウンロードして自サイトに配置すればすぐ利用できます。また、Google がホストしているところへ直リンクしても利用できます。どちらでもいいのですが、特に理由がなければ Google へリンクするほうが簡単で後の手間もかからないです。

jqueryをダウンロードして読み込み


&lt;script src="jquery.js"&gt;&lt;/script&gt;

Google Hosted Libraries から読み込み


&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"&gt;&lt;/script&gt;

■ script の記載場所

script を head タグの中に書くと script をすべて読み込み終わるまで html のレンダリングがされないため、ページ表示の体感速度が遅くなってしまいます。”ページを読み込むより早く script を実行させたい” という状況でなければ、body タグの直前に書きます。

また、jQuery を利用したコードやコードを書いたファイル（例えば myscript.js）は jQuery よりも後に置きます。

script は body タグを閉じる直前に記載


...
...

&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="myscript.js"&gt;&lt;/script&gt;
&lt;/body&gt;

...

</body>

■ コードの書き方

jQuery では $ をエイリアスとして使用してますが、他のライブラリ等と競合を気にせずに安全に使うために、無名関数をカッコでくくり実行時に引数を渡す書き方にします。

そしてこの中で var 文で変数を使用することで、JavaScript の問題のひとつであるグローバルスコープの汚染を防ぐことにもなります。

$ と変数を安全に使用


(function ($) {

    var foo = 'bar';
    ...
    ...

})(jQuery);

(function ($) {

var foo = 'bar';

...

})(jQuery);

■ jQuery で要素の選択

JavaScript を html で利用する際は、多くの場合 html の要素に対して何か操作をしたい時だと思います。そこでまず、jQuery での要素の選択です。

下記処理は「要素を選択する」→「何か操作を行う」という処理を jQuery を利用する場合としない場合を並べました。上が素の JavaScript で下が jQuery を利用したケースです。

div 要素を選択し css を追加


(function ($) {

    // JavaScript
    var elements = document.getElementsByTagName('div');
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.color = 'red';
    }

    // jQuery
    $('div').css('color', 'red');

})(jQuery);

(function ($) {

// JavaScript

var elements = document.getElementsByTagName('div');

for (var i = 0; i < elements.length; i++) {

elements[i].style.color = 'red';

}

// jQuery

$('div').css('color', 'red');

})(jQuery);

■ セレクタとメソッド

$ は jQuery のエイリアスですがこれは関数名です。この引数にセレクタを指定することで要素を選択できます。そしてドットでつないだ処理がメソッドで様々な処理を行います。

セレクタの指定方法やメソッドの数はたくさんありますが、すべてを暗記する必要はありません。下記のサイトで確認できます。

jQuery API Documentation
jQuery 日本語リファレンス

いろいろな jQuery の処理


(function ($) {

    // [id 'foo' を持つ要素] の中の [span] から１つ目を選択し
    // クラス [bar] を追加する

    $('#foo').find('span').eq(0).addClass('bar');


    // [id 'foo' を持つ要素] をクリックしたら、
    // [id 'bar' を持つ要素] を表示する

    $('#foo').click(function () {
        $('#bar').show();
    });


    // [class 'button' を持つ要素のなかで、文字列 'fade' を含む要素] をクリックしたら、
    // [id 'foo' を持つ要素] をフェードアウトさせた後
    // [id 'bar' を持つの要素] をフェードインする

    $('.button:contains('fade')').click(function () {
        $('#foo').fadeOut(function () {
            $('#bar').fadeIn();
        });
    });

})(jQuery);