window.jQuery()

window.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オブジェクトを作成するには、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)

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

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