jQueryの個人的メモその1

HTMLのヘッダにjQueryのライブラリへのパスを設定しておくことが多い。ページの表示速度を考慮してjQueryの読み込み後回しにするため、bodyタグの一番最後に書くこともある(=多くの場合、その後ろはhtmlタグを閉じるだけであろう)。ローカルにダウンロードしてそのパスを設定してもよいし、CDN(Contents Delivery Network)に置かれているjQueryのライブラリを指定して読み込んでも良い。CDNは例えば以下に挙げたURLを指定することになる(詳しくはこちらを参照)。なお、外部との通信が発生するので、通信内容を暗号化する目的でhttpsでURLを指定することも考慮すべきである(以下のURLの場合、Googleの方ではできる)。

• http://code.jquery.com/jquery-1.11.0.min.js
• http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js

以下の例ではwarnクラスの要素を赤にする。例えば注意書きを囲うときに使える。

$(document).ready(function(){
 $(".warn").css("color", "red");
}

上のコードの1行目の意味はページがjQueryを実行する準備ができたらという意味である。これを書かないでいると、読み込む前にwarnクラスの要素が出てこないので、warnクラスの要素の色を変えることができない。なお、readyを用いた場合、画像の読み込みは後回し(jQueryのライブラリを読み込んだ後)となる。画像を読み込んでからjQueryのライブラリの読み込みを実行したい場合は次のようになる。画像をjQueryで変化させたいときに使うことになる。

$(window).on("load", function(){
 $(".warn").css("color", "red");
}

ただし、画像に手を加えないのであれば、パフォーマンスを考慮して前者の書き方を採用することが一般的である。