jQuery の入門というか初歩というかそういう話
簡単に 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)と同じなので、覚えやすくて良いですね。
つぶやく
- 関連するブログ記事
-
- 現在位置
- TOP > Web制作技術 > jQuery > jQuery の入門というか初歩というかそういう話
- 前のブログ記事
- perl でハッシュ(連想配列)のソート [2010年7月20日 16:40]
- 次のブログ記事
- jQuery で hover() を使ってマウスホバーにあわせてスタイルを変更する方法 [2010年7月23日 15:50]
コメント(25)
phlovon http://paydayloansusapqj.com/ personal loans
ncamtrg http://paydayloansusaplg.com/ payday loans
Hello!
Hello!
Hello!
Hello!
Hello!
Hello!
Hello!
Hello!
Hello!
Hello!
Hello!
Hello!
http://www.montedentistry.com/?15.phpOakley Hijinx Sunglasses
caqsgec http://paydayloansrna.com/ payday loans
lzlpifc http://paydayloansnxq.com/ low fee payday loans
Hello!
Hello!
Hello!
Hello!
Hello!
Hello!
Thanks combination of suitable and useful information and well-written sentences that will certainly entice your sense.There are so multiple comments here that are really entertaining and conducive to me thanks for sharing a link especially for sharing this blog.
Thanks for the data, perhaps I will use this over my tufted selling and i have been use much annulus Mainedia in run a interaction and that they somebody existing a giant amend on me.
コメントする