jQuery()はjQueryオブジェクトを作成して、戻り値として返すメソッドである。

window.jQuery(foo)jQuery(foo)又は$(foo)と記述することができる。

セレクタにマッチした要素からjQeuryオブジェクトを作成

指定したセレクタにマッチするHTML要素からjQueryオブジェクトを作成する。

window.jQuery(selector [,context])
jQuery(selector [,context])
$(selector [,context])
selector

セレクタ表現を含む文字列を指定する。

context

DOMエレメント、documentオブジェクト又はjQueryオブジェクトを指定すると、その中からセレクタにマッチするHTML要素を探す。

セレクタにマッチした要素の数を知りたい場合は、コレクションのインデックス数を調べる。

$(selector).length

マッチする要素が無かった場合は、$(selector).lengthの値は0である。

DOM要素からjQueryオブジェクトを作成する

DOM要素からjQueryオブジェクトを作成するには、jQuery()の引数にDOM要素を指定する。

window.jQuery(element)
jQuery(element)
$(element)

DOM要素からjQueryオブジェクトを作成する例を次に示す。

var obj = $(document.getElementById('div1'));

要素を新しく作る

HTMLの断片から要素を作成して、jQueryオブジェクト化する。

window.jQuery(htmlFragment [,ownerDocument])
jQuery(htmlFragment [,ownerDocument])
$(htmlFragment [,ownerDocument])

作った要素はまだどこにも配置されていないので、appendメソッドで追加する。

var e = $('<span>example</span>');
$('#div1').append(e);
$(document).ready(function(){script});
ページ読み込み完了時に実行されるコードを予約する。

JavaScriptはHTML文書の読み込み完了を待たず、ウェブブラウザに読み込まれた時点で逐次実行される。したがって、まだ読み込まれていない要素に対する操作は実行できない。

$(function(){script})
ページ読み込み完了時に実行されるコードを予約する。$(document).ready(function(){script});と同じ。
$(domElement)

jQueryオブジェクトのメソッドを呼び出すには、次の形式で表す。

$('selector').method()
var w = $(window).width();
var h = $(window).height();

jQueryオブジェクトをJavaScriptの変数に代入して使用することもできる。

var element = $('#id');
element.hide();

ページの読み込みが完了したら処理を実行する

JavaScriptはウェブブラウザに読み込まれた時点で実行される。JavaScriptでDOM操作を行おうとしても、DOM操作の対象となるHTML要素がまだ読み込まれていないことがある。そのため、JavaScriptは</body>の直前に記述するのが確実である。

jQueryでは、JavaScriptの記述場所に関わらず、HTML文書の読み込みが完了してから処理を実行させることができる。

window.jQuery(callback)
jQuery(callback)
window.$(callback)
$(callback)
callback

HTML文書の読み込みが完了したら呼び出されるコールバック関数を指定する。

jQueryを用いる方法のほかに、下記のようにすることもできる。

$(document).ready(function(){ script });