readyとは
- ここで説明する ready とは次の語句からなるjQueryのメソッドです。
- ready
- 読み: レイディー
意味: 用意、準備、支度
readyメソッドの概要
このメソッドは、ブラウザが web ページを読み込む時のレイディーイベントにハンドラーをバインドします。
レイディーイベントは、ブラウザがページを読込み、HTML の構成が完了した時点で発生します。 このことを一般的にいうと「DOM の構築が完了した時点」といいます。 また、DOM ツリーの構築完了と言った方が分かりやすいかもしれません。
DOM を単純に説明すると、HTMLの要素群です。 これは HTML のコードをブラウザが読み込んで内部処理を行った後にページを描画するために使われるものであり、要素の構成をツリー形式でまとめたものです。 DOM には HTML のコードと同じように、要素名、属性、テキストなどが含まれており、javascript などは、これらをオブジェクトとして読み込み、操作しています。
つまり、レイディーイベントは 要素や属性、また属性の値などページの骨格となるものの読込みが完了した時点で、イベント処理を行うということになりますので、 画像などの置き換え要素のソースの読込みよりも早く実行される可能性があるというところには注意が必要です。
なお、この ready は javascript のリスナーでいうところの「 DOMContentLoaded 」に相当します。
構文
サンプルを見る前に構文を確認しておきます。
$(docment).ready(handler)上記のコードは readyメソッドを使った基本構文ですが、 それ以外の記述方法もありますので紹介しておきます。
下記の4つのコードは上記コードと同じ動作をするものです。
下記の中でよく使われるのは 01: $(function(){処理}) の書き方だと思います。
$(handler)
$("document").ready(handler)
$("img").ready(handler)
$().ready(handler)
サンプルコードと実行結果
ここでは、レイディーイベントを利用した場合の script の記述位置をサンプルにしています。
レイディーイベントに関数をバインドして利用する場合、head セクションの中で script を記述する、または script を読み込むことが一般的に多いようです。 これは決まりではありませんので body セクションの中であっても構いません。
ちなみにレイディーイベントを利用しないで script を実行する場合、jQセレクターに指定する要素名や id の要素が読み込まれてから実行する必要があるため、 body セクション内の最後に script を記述することが推奨されています。これも決まりではありませんが、script は セレクターの要素よりも後に記述する必要があります。
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>...</script>
</head>
<body>
<div>SAMPLE</div>
</body>
- 03: script (jQuery のライブラリーを CDN から読み込んでいます。)
- 04: script (サンプルの script を記述している箇所です。ready を使用している場合には、このように head セクションの中でコードを書いても特に問題はありません。ready を使用していない場合には 07: div よりも、この行を後に記述する必要があります。)
- 07: div (この要素のスタイルを script を使って変更します。 ready を使用していない場合には、この要素よりも後に script のコードを記述する必要があります。)
サンプルコード: script
<script>
$(document).ready(function(){
$("div").css({"background-color":"##lightblue"});
});
</script>
- 02-04: $(document).ready(function(){処理}) ( レイディーイベントに関数の処理をバインドしています。これにより DOM ツリーの構築完了に 処理 のコードが実行されます。 )
- 03: .css (css メソッドは jQuery で css のスタイルを操作することができます。ここでは背景色をライトブルーに設定しています。)