概要
JavaScriptやJQueryの配置位置については、HTML要素の読み込みとの前後関係に注意しなければならない。
HTML要素の内容・スタイルの設定やイベントリスナーの登録など、オブジェクトの実体が必要な殆どの操作は、DOMが読み込まれた後に行う必要がある。
以下、JQueryのコードを中心に、コード配置について整理する。
不適切な配置
以下の例は、対象となるDOMが読み込まれる前にスクリプトが実行される。
このため、スクリプト実行段階ではDOMの実体が存在せず、意図したp要素の文字の色の設定は行われない。これはJavaScriptのコードでも同じ。
|
|
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Wrong script position</title> <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script> </head> <body> <script> $('p').css('color', '#f00'); </script> <p>赤色の文字にならない</p> </body> </html> |
スクリプトをbodyの末尾に置く
以下の場合は、スクリプトがbodyの末尾に置かれていて、body内のDOMが全て読み込まれた後にスクリプトが実行される。
このため、スクリプト実行時にはDOMの実体が定まっていて、意図したp要素の色の変更が行われる。これもJavaScriptで書く場合と共通。
|
|
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>After HTML</title> <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script> </head> <body> <p>赤色の文字になる</p> <script> $('p').css('color', '#f00'); </script> </body> </html> |
スクリプトをhead内に置く
DOM読み込み後に実行
$(document).ready(function() {});
&(document).ready()メソッドに渡した関数は、HTMLやDOMが読み込まれると実行される。
画像ファイルなどのリソースはまだ完全に読み込まれていない状態。
|
|
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>documetn.ready with function</title> <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script> <script> $(document).ready(function() { $('p').css('color', '#f00'); }); </script> </head> <body> <p>赤色の文字になる/p> </body> </html> |
$(document).ready(() => {});
ready()に渡す関数をアロー関数で書くと、表現が簡略化される。
|
|
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>documetn.ready with =></title> <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script> <script> $(document).ready(() => { $('p').css('color', '#f00'); }); </script> </head> <body> <p>赤色の文字になる</p> </body> </html> |
$(function {});
関数を直接JQueryの引数に渡す、redayメソッドよりも簡略化された書き方。
|
|
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>only anonymus function</title> <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script> <script> $(function() { $('p').css('color', '#f00'); }); </script> </head> <body> <p>赤色の文字になる</p> </body> </html> |
$(() => {});
JQueryに渡す関数をアロー関数にした、最も簡潔な書き方。
|
|
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>only anonymus =></title> <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script> <script> $(() => { $('p').css('color', '#f00'); }); </script> </head> <body> <p>赤色の文字になる</p> </body> </html> |
リソースの完全読み込み後に実行
$(window).onload(function() {});
DOMに続いて画像ファイルなどのリソースが完全に読み込まれた後に実行される。画像サイズの利用や変更を伴う場合にはこの方法で。
|
|
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>window.load with function</title> <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script> <script> $(window).load(function() { $('p').css('color', '#f00'); }); </script> </head> <body> <p>赤色の文字になる</p> </body> </html> |
$(window).onload(() => {});
onloadの引数にアロー関数を渡すと、簡潔になる。
|
|
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>window.load with =></title> <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script> <script> $(window).load(() => { $('p').css('color', '#f00'); }); </script> </head> <body> <p>赤色の文字になる</p> </body> </html> |