jQueryの基本(その1)

ライブラリーの呼び出しとjQueryの記述スペースの確保

 jQueryは大変便利なライブラリーですが、どこまでいってもJavascriptであり結局はJavascriptなのです。そんなわけでしてjQueryを記述する際にはJavascriptと全く同じ用法で使用することになります。つまりJavascriptを実行するための準備が同様に必要です。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> (*1)
       
<script type="text/javascript"> (*2)
            ...
        </script>

    <title>...</title>
    </head>
    <body>
        ...
    </body>
</html>
 第一に(*1)のようにGoogleからjQueryライブラリーを呼び出すことと、第二に(*2)のようにJavascriptをヘッダー内に書くことです。もちろん(*1)ではjQueryが無償のライブラリーなのでダウンロードして自身のディレクトリ内に設置し呼び出しても構いませんし、(*2)では別のxxx.jsファイルとして記述して別個に呼び出しても構いません。まずこれがjQueryを使用する大前提となります。
  • jQueryのライブラリーを読み込む
  • jQueryを利用したスクリプトを書く場所を確保する(ヘッダー内に書くか別ファイルで呼び出すか。)

ready関数とイベント

 さてjQueryを使ってどんな操作ができるのかというと大雑把にいうとxhtmlとcssの操作が独自のタイミングでできるというものです。これはかなり大雑把な言い方ですが、本来スタティック(固定的に)記述されたxhtmlとcssが閲覧者に配信されたその「あるタイミング」だけ記述を変更できるというものです。この記述の変更がデザインの変更になったりか書かれている内容の変更であったり...といろいろな操作になるわけです。専門的にいってしまうと、この「あるタイミング」がイベント、様々なものを変更する方法をメソッド、変更される内容をプロパティーと言って差し支えないと思います。
 JavascriptにしろjQueryにしろそれらの「そのタイミング」というものはイベントという方法で行うのですが、xhtmlやcssが読み込まれた「そのタイミング」というものをイベントにしたい場合(そしてjQueryを使用する場合のその殆どがこのタイミングなのですが)に利用されるのがready関数です。
<script type="text/javascript">
    $(document).ready(function(){
        //jQueryの命令を記述する
    })
</script>
 上記の形を省略すると以下のような形式でも書くことができます。全く同じように機能します。
<script type="text/javascript">
    $(function(){
        //ここにjQueryの命令を記述
    })
</script>
 ready関数(readyというイベントのタイミング)は殆どいつも最初に使うものなのでこれはもう殆ど定形です。jQueryを使ってxhtmlやcssに何らかの操作をする際にはいつもこの形になることを覚えておけばOKです。

 jQueryに関してのリファレンスはjQuery日本語リファレンスさんが一番いいです。






プロフィール



  • Name :: 山上オサム ♂(37)
  • Hobby :: 武術
  • Work :: Web Designer