jQuery 01-02: 読込が完了してから実行(イベントについて)

まずは今回のサンプルを紹介します。
一回目のサンプルなので、機能は非常にシンプルでアラートを表示するだけです。
このサンプルを通して、jQueryで必ず必要になるreadyイベントを説明します。

sample : ページの読込が完了したらアラートを表示する
http://www.designdrill.jp/jquery/01/step01.html

 

●jQueryへのリンク

jQueryを利用するためには前回の記事でダウンロードしたjQueryへリンクする必要があります。
リンクの方法は通常の外部javaScriptと同じでhead領域に以下の様に記します。

<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>

一応サンプルのhtmlを用意しました。機能や表示する要素はありません。ただ
jQueryにリンクしているだけです。ソースを確認し下さい。
http://www.designdrill.jp/jquery/01/step00.html
jQueryのコードは通常のjavaScript同様に外部jsファイルにすることも可能ですが
このブログではhead領域のscriptタグ内に書いていきます。では本題のjQueryに
入ります。
 
 

●readyイベント

javaScriptはhead領域に書かれるため(基本的に)body領域よりも先に
読み込まれます。ActionScriptと同じように読み込まれてないものを操作することは
できないので、jQueryではhtmlファイル(画像などは含みません)の読み込みが
完了してから、処理を開始するようにします。その仕組みがreadyイベントです。
リファレンス:ready(fn)
※引数のfnは関数(function)を指します。つまり引数として()内にfunctionを設定します。
 
ActionScriptのようにイベントはイベントハンドラの構造をとりますが、
ActionScriptとは構造が異なり以下の様な構文になっています。
※readyのイベントハンドラを短く書く構文があるのですが、それは別の講座で説明することになります。

jQuery(document).ready( function(){
  /*--------------------------------------------------
  document(htmlファイル)の読込が完了したら
  この{ }内の処理が実行されます。
  ---------------------------------------------------*/
});

少し細かく説明していきます。
最初のjQueryは、その名の通りjQueryをさし、jQueryの機能を利用するときに必要になります。
続く()の中には操作又は調査する対象を書きます。
ここではdocumentとなっており、これはhtmlファイルを指しています。
jQueryでは、この部分をセレクタと呼びます。
操作(もしくは調査)する対象を「選択している部分」だからセレクタと呼ばれているのでしょう。
()に続けて.(カンマ)を書き、そのあとにreadyと書きます。この部分はイベントと呼ばれ
「いつ」処理を実行するかを指定します。readyは「準備ができたら」という意味です。
ですから、ここまでの意味は「documentの準備ができたら」となります。
そして準備ができたらreadyの直後の” ( “と ; の前の” ) “で囲まれた部分が処理されます。

しかしjQueryでは、さらに別の構造をreadyの()内に入れておかなければなりません。
以下のようにfunction () { }が必要で、実際に実行される処理は、このfunctionの{ }内
に書くことになります。

jQuery(document).ready( function(){
  /*--------------------------------------------------
  実際の処理はfunction の構造内に書くことになります。
  ---------------------------------------------------*/
});

このfunctionの構造はメソッドの「作成」の構文であり「実行」ではないので
通常のjavaScriptでは実行されません。なのでjQuery独特の構文だと思います。
このfunctionについての考察は別の回で行います。
functionの構造まで含めてreadyのイベントハンドラとして覚えてしまいましょう。

今回のサンプルは、このreadyのイベントハンドラ内にalert文を入れているので、
htmlの読込が完了したらアラートが表示されるのです。

jQuery(document).ready( function(){
  alert("ready!");//---アラート表示
});

次回は、アラートを表示するのではなくページ内の要素を変更することに挑戦します。
 
 
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


− 2 = 三


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>