,

[jQuery] jQuery() 関数の役割と戻り値、ページロード時の処理

公開日: 2016/09/02
更新日: 2018/10/11

用語の整理。

JavaScript本格入門　～モダンスタイルによる基礎からAjax・ｊQueryまで
JavaScript本格入門　～モダンスタイルによる基礎からAjax・ｊQueryまで

posted with amazlet at 16.09.02
山田 祥寛
技術評論社
売り上げランキング: 2,933
Amazon.co.jpで詳細を見る

$() 関数の役割と戻り値

  • 条件に一致したデータを抽出する。
  • DOM 要素を jQuery オブジェクトに変換する。
  • HTML文字列から新しい jQuery オブジェクトを生成できる。
let jq = $('#sample');
console.log(jq);    // [p#sample, context: document, selector: "#sample"]
let js = document.getElementById('sample');
console.log(js);    // <p id="sample">サンプル</p>
console.log($(js)); // [p#sample, context: p#sample]
console.log($('<p id="add">追加</p>')); // [p#add]

$() 関数の戻り値は、jQuery オブジェクト。
DOM 標準の要素オブジェクトとは別物。

ページロード時の処理

  • $() 関数の引数として、イベントハンドラ（関数リテラル）を渡すことで、ページロード時に処理が実行される。
window.onload = function() {
  window.alert('window.onload');
};
$(function() {
  window.alert('$()');
});

window.onload イベントとは、以下の点で異なるもの。

  • window.onload イベント … 「ページ内のすべての要素（画像などのリソースを含む）が読込完了したタイミング」で実行される。
  • $() 関数 … 「ドキュメントツリーが完成したタイミング」で実行される。

$() 関数は、画像などのリソース読み込みを待たなくてすむため、window.load イベントよりも早いタイミングで処理が開始される。
画像リソースを利用した処理を行う場合を除き、$() 関数を利用すれば待ち時間を短縮できる。

See the Pen jQuery: jquery() by DriftwoodJP (@DriftwoodJP) on CodePen.

補遺

即時関数 と jQuery.ready イベント関数は別物。