jQuery入門 | 概要 | jQueryの構文

Tags:

jQueryの構文

jQueryを使用すると、HTML要素を非常に簡単に選択し、選択された要素に特定の動作を簡単に設定できる。

$(セレクター).動作関数();

ドル記号（$）はjQueryを意味し、jQueryにアクセスできるようにする識別子である。 セレクターを利用して目的のHTML要素を選択し、動作関数を定義して選択された要素に目的の動作を設定する。

$()関数

$()関数は、選択されたHTML要素をjQueryで利用できる形に生成する役割を持つ。

$()関数の引数には、HTMLタグ名だけでなくCSSセレクターを渡して、特定のHTML要素を選択できる。 この$()関数を通じて生成された要素をjQueryオブジェクトという。 jQueryは、このように生成されたjQueryオブジェクトのメソッドを使用して、さまざまな動作を設定できる。

Documentオブジェクトのready()メソッド

JavaScriptコードは、Webブラウザが文書のすべての要素を読み込んだ後に実行される必要がある。 通常は特に問題は発生しないが、次のような場合にはエラーが発生する。

  • まだ作成されていないHTML要素に属性を追加しようとする場合
  • まだ読み込まれていない画像のサイズを取得しようとする場合

次の例は、まだ作成されていないHTML要素に属性を追加する例である。

function func() {
    addAttribute();  // IDが"para"のHTML要素に属性を追加する。
    createElement(); // IDが"para"のHTML要素を作成する。
}
function createElement() {
    var criteriaNode = document.getElementById("text");
    var newNode = document.createElement("p");
    newNode.innerHTML = "新しい段落です。";
    newNode.setAttribute("id", "para");
    document.body.insertBefore(newNode, criteriaNode);
}
function addAttribute() {
    document.getElementById("para").setAttribute("style", "color: red");
}

上の例で、addAttribute()関数はIDが"para"のHTML要素に新しい属性を追加する関数である。 また、createElement()関数はIDが"para"のHTML要素を作成して追加する関数である。

上の例では、IDが"para"のHTML要素が作成される前に、その要素に属性を追加するaddAttribute()関数が呼び出されるため、Uncaught TypeErrorが発生し、実行中のスクリプトは停止する。 先に呼び出されるaddAttribute()関数をcreateElement()関数の後に呼び出せば、正常に動作する。

Webブラウザでは、現在のHTML文書で発生したエラーをF12キーで確認できる。

そのためJavaScriptでは、Windowオブジェクトのonload()メソッドを利用して、文書がすべて読み込まれた後にコードが実行されるように設定する。

window.onload = function() {
    // JavaScriptコード
};

同様にjQueryでは、Documentオブジェクトのready()メソッドを利用して同じ結果を保証する。

$(document).ready(function() {
   // jQueryコード
});

また、jQueryでは同じ結果を保証する、より短い構文も次のように提供している。

$(function() {
   // jQueryコード
});

次の例は、文書がすべて読み込まれる時点と、ウィンドウがすべて読み込まれる時点の違いを示す例である。

$(document).ready( function() {
  // 文書がすべて読み込まれたときに実行される。
});
$(window).load( function() {
  // ウィンドウ全体がすべて読み込まれたときに実行される。
});