簡単に Ajax 的なこととかができちゃう楽チンライブラリ jQuery の入門的解説です。
今回はHello World レベルの話まで。
1. jQuery のダウンロード
とりあえず、jQuery のソースコードをダウンロードしましょう。
jQuery: The Write Less, Do More, JavaScript Library からダウンロード可能です。
ソースコードは「jquery-*.*.*.min.js」みたいなファイル名になってるかと思いますが、「jquery.js」とかに変えておいたほうがあとでバージョンアップする際とかにも便利な気がします。
2. html から jQuery を読み込む
ソースコードを入手したら、jQuery を利用する html ファイルに、script要素で jQuery を読み込みます。
<script type="text/javascript" src="jquery.js"></script>
3. html の内容を書き換えるスクリプト
まずは、ボタンクリックで html の内容を書き換えるようなスクリプトで Hello World してみましょう。
<?xml version="1.0" encoding="UTF-8"?>
<!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-script-type" content="text/javascript;charset=UTF-8" />
<script type="text/javascript" src="jquery.js"></script>
<title>jQuery で Hello World</title>
</head>
<body>
<h1>jQuery で Hello World</h1>
<p>ここの内容を変更します。</p>
<form method="GET" action="#">
<input type="button" onclick="helloworld();" value="Hello World" />
</form>
</body>
</html>
上記のような html がある場合、p要素の内容を変更するスクリプトを書けばよいわけです。
その場合、function helloworld() の内容は、
function helloworld(){
$("p").html("Hello World!");
}
となります。
「$(" ")」の中に、アクセスしたい要素を指定すれば良いわけです。
「.html(" ")」は、JavaScript の innerHTML みたいなもんですね。
操作するのがテキストのみなら、innerTEXT 相当の「.text(" ")」を使っても良いと思います。
ただしこのやり方だと、html 内に複数の p 要素がある場合、全ての p要素が書き換えられてしまいます。
そこで、要素名ではなく、class属性や id属性を指定する方法があります。
例えば、
<p class="hello">class指定されたp要素です。</p>
<p id="world">id指定されたp要素です。</p>
のような感じで、class属性や id属性が指定されている場合、それぞれの内容を変更するスクリプトは、
// class="hello" の内容を変更
$(".hello").html("Hello World!");
// id="world" の内容を変更
$("#world").html("Hello World!");
という感じで指定できます。
class や id の指定が、スタイルシート(CSS)と同じなので、覚えやすくて良いですね。
つぶやく
