jQueryの基礎知識 (2/3)
作成:2010-04-03 18:17
更新:2010-05-11 20:38
更新:2010-05-11 20:38
■jQueryのライブラリを利用する
では、jQueryのライブラリはどのように利用すればよいのでしょうか。――JavaScriptのライブラリは、どんなものであれ、基本的な使い方は共通です。すなわち、「ライブラリファイルをダウンロードし、使用したいWebサイトにアップロードし、<script>タグでそれをロードする」というものです。
ライブラリというとなんだか特殊な感じがしますが、要は「ただのスクリプトファイル」なのです。特にjQueryは、本体がたった1つのスクリプトファイルでしかありません。
http://jquery.com/
まずは、上のアドレスにアクセスをしましょう。ここが、jQueryのサイトです。そして、ページの右側にある「Download(jQuery)」というボタンをクリックしてください。ぶわ~~!!っと画面にJavaScriptのスクリプトが表示されます。これが、jQueryのライブラリです。後は、それをファイルに保存すればOKです。
この「Download(jQuery)」ボタンで表示されるスクリプトファイルは「jquery-1.4.2.min.js」というファイル名になっていますので、ここでも同じ名前で保存しておくことにしましょう。そして、jQueryを使いたいWebページと同じ場所にアップロードしておきます。これで準備は完了です。
実際にWebページでjQueryの機能を利用する場合には、下のリストに掲載したように、<script>タグをWebページのヘッダー部分に記述しておきます。ここでは、"jquery-1.4.2.min.js"というファイル名で記述してありますが、もちろん、それぞれが使っているライブラリのファイル名にあわせてやればOKです。
○動作チェック!○
それじゃ、実際にjQueryがきちんとロード出来ているか、簡単なサンプルを作って確かめてみましょう。下のリスト部分に掲載したサンプルをHTMLファイルで保存し、jQueryをアップロードしているWebサーバーにアップしてください。そしてこのWebページにアクセスしてみましょう。
もし、jQueryがちゃんとロードされていれば、Webページには「jQuery、準備OKです!」と表示されます。jQueryが機能していなければ、「※準備はできたかな?」のままのはずです。
ライブラリというとなんだか特殊な感じがしますが、要は「ただのスクリプトファイル」なのです。特にjQueryは、本体がたった1つのスクリプトファイルでしかありません。
http://jquery.com/
まずは、上のアドレスにアクセスをしましょう。ここが、jQueryのサイトです。そして、ページの右側にある「Download(jQuery)」というボタンをクリックしてください。ぶわ~~!!っと画面にJavaScriptのスクリプトが表示されます。これが、jQueryのライブラリです。後は、それをファイルに保存すればOKです。
この「Download(jQuery)」ボタンで表示されるスクリプトファイルは「jquery-1.4.2.min.js」というファイル名になっていますので、ここでも同じ名前で保存しておくことにしましょう。そして、jQueryを使いたいWebページと同じ場所にアップロードしておきます。これで準備は完了です。
実際にWebページでjQueryの機能を利用する場合には、下のリストに掲載したように、<script>タグをWebページのヘッダー部分に記述しておきます。ここでは、"jquery-1.4.2.min.js"というファイル名で記述してありますが、もちろん、それぞれが使っているライブラリのファイル名にあわせてやればOKです。
○動作チェック!○
それじゃ、実際にjQueryがきちんとロード出来ているか、簡単なサンプルを作って確かめてみましょう。下のリスト部分に掲載したサンプルをHTMLファイルで保存し、jQueryをアップロードしているWebサーバーにアップしてください。そしてこのWebページにアクセスしてみましょう。
もし、jQueryがちゃんとロードされていれば、Webページには「jQuery、準備OKです!」と表示されます。jQueryが機能していなければ、「※準備はできたかな?」のままのはずです。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※jQueryライブラリをロードするタグ <script src="jquery-1.4.2.min.js"></script> ※サンプルスクリプト <html> <head> <meta http-equiv="Content-Type"content="text/html; charset=UTF-8"> <script src="jquery-1.4.2.min.js"></script> <script type="text/javascript"> <!-- function initial(){ $('#message').text('jQuery、準備OKです!'); } //--> </script> </head> <body onload="initial();"> <H1>TEST.</H1> <div id="message">※準備はできたかな?</div> </body> </html>
※関連コンテンツ