[jQuery] jQuery() 関数の役割と戻り値、ページロード時の処理
用語の整理。
[markdown]
技術評論社
売り上げランキング: 2,933
## `$()` 関数の役割と戻り値
> * [jQuery() | jQuery API Documentation](http://api.jquery.com/jQuery/)
– 条件に一致したデータを抽出する。
– DOM 要素を jQuery オブジェクトに変換する。
– HTML文字列から新しい jQuery オブジェクトを生成できる。
“`javascript
let jq = $(‘#sample’);
console.log(jq); // [p#sample, context: document, selector: “#sample”]
let js = document.getElementById(‘sample’);
console.log(js); //
サンプル
console.log($(js)); // [p#sample, context: p#sample]
console.log($(‘
追加
‘)); // [p#add]
“`
`$()` 関数の戻り値は、jQuery オブジェクト。
DOM 標準の要素オブジェクトとは別物。
## ページロード時の処理
– $() 関数の引数として、イベントハンドラ（関数リテラル）を渡すことで、ページロード時に処理が実行される。
“`javascript
window.onload = function() {
window.alert(‘window.onload’);
};
$(function() {
window.alert(‘$()’);
});
“`
> * [.ready() | jQuery API Documentation](http://api.jquery.com/ready/)
window.onload イベントとは、以下の点で異なるもの。
– `window.onload` イベント … 「ページ内のすべての要素（画像などのリソースを含む）が読込完了したタイミング」で実行される。
– `$()` 関数 … 「ドキュメントツリーが完成したタイミング」で実行される。
> * [window.onload – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onload)
`$()` 関数は、画像などのリソース読み込みを待たなくてすむため、`window.load` イベントよりも早いタイミングで処理が開始される。
画像リソースを利用した処理を行う場合を除き、`$()` 関数を利用すれば待ち時間を短縮できる。
See the Pen jQuery: jquery() by DriftwoodJP (@DriftwoodJP) on CodePen.
## 補遺
> * [window.onloadとjQueryの$(document).ready等の比較](http://rcmdnk.github.io/blog/2015/07/11/computer-javascript-jquery/)
> * [jQueryの基本 – $(document).ready – Qiita](http://qiita.com/8845musign/items/88a8c693c84ba63cea1d)
即時関数 と jQuery.ready イベント関数は別物。
> * [immediate function pattern（即時関数） | deadwood](https://www.d-wood.com/blog/2016/08/04_8381.html)
[/markdown]