jQueryの個人的メモその2

$(document).ready(function(){..})は$(function(){...})のように省略できる。

要素を指定して何かをする場合は次のように書く。セレクタについてはクラス、ID、要素が指定できる。

 $(セレクタ).メソッド(パラメータ);

何かの要素の下にある要素を指定する場合はセレクタをスペースを空けて並べればよい。以下の例ではpタグの下にある.warn要素で囲まれた箇所の色を赤に変更している。

 $("p .warn").css("color", "red");

*(ユニバーサルセレクタ)を使うと、ワイルドカードのように振る舞うことになる。pタグの下にある要素で囲まれたものすべてについて色を赤に変えることになる。pタグの下にあるセレクタ以下にある要素が変わるのであって、pタグの直下にあるものについては変わらない。

 $("p *").css("color", "red");

セレクタの箇所はカンマで区切ることで、複数の要素をまとめて指定することができる。

 $(".left, .right").css("color", "red");

チャイルドセレクタは直下にあるものに絞る。上の例は子孫セレクタであり、深さを問わない指定方法であるという点で異なる。

 $("p > .warn").css("color", "red");

隣接セレクタは連続する2つの要素を指定し、2つ目に指定したものが指定されたものになる。以下ではh2要素に隣接するh3要素が指定されることになる。

 $("h2 + h3").css("color", "blue");

間接セレクタは同じ親を持つ要素で指定した要素より後ろにあるものすべてを指定する。以下ではliにsecondというidを割り振っておけば、ulという親があるため、secondより後ろにあるli要素の色がすべて赤になる。

 $("#second ~ li").css("color", "red");

CSSにおける要の素指定方法とjQueryのセレクタ指定方法は良く似ていることが確認できる。

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");
}

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