jQueryを使ってみよう。(導入編)

jQueryはJavaScriptライブラリの1つで、使い方を少し勉強するだけでJavascriptでいろいろな効果をホームページに追加することができます。自分も超初心者で難しいことはできませんが、学んだことを少しずつ記事にしていきたいと思いますのでよろしくお願いします

早速ですが、まずはjQueryを手に入れましょう。

jQueryのダウンロードページにアクセスして「Current Release」と記述されている場所からjQueryをダウンロードします。(2008/9/10現在最新版は1.2.6です。)
「Minified」「Packed」「Uncompressed」と3つのリンクがあるので、ここでは「Minified」をダウンロードしておきましょう。「Minified」のリンクをクリックするとダウンロードページに移動するので、リンクをクリックしてダウンロードします。

Downloading jQuery – jQuery JavaScript Library

さてダウンロードできたら、さっそく使ってみましょう！

下記のようなファイルを作成してブラウザーで開いて下さい。（文字コード、jQueryのパスは環境にあわせて変更してください。）

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<title>jQueryを使ってみよう。(１)</title>
<script type="text/javascript" src="./jquery-1.2.6.min.js"></script>
<script language="JavaScript">
//jQueryで
$(document).ready(function (){
$("#msg").text("jQueryよ、こんにちは。");
});
</script>
</head>
<body>
<div id="msg">ここが書き変わります。</div>
</body>
</html>

動作サンプル

普通にHTMLを表示させると「ここが書き変わります。」と表示されるはずですが「jQueryよ、こんにちは。」と表示されているはずです。（もし表示されていない場合は、ブラウザの設定でJavascriptを利用しない設定になってる可能性があるので設定を変更してみてください。）

jQueryを利用するときは下記のように「$(document).ready(function (){~~~});」の間に記述します。省略して「$(function (){~~~});」と書くことも出来ます。たいていの場合利用するので覚えておきましょう。

<script language="JavaScript">
$(document).ready(function (){
//ここに記述
});
$(function (){
//ここに記述
});
</script>

さてこれでjQueryを利用するための準備は完了です。次回からは実際にどのように記述していくか説明していきます。