2011年01月11日

jQueryの使い方

jQueryとは?


JavaScriptのライブラリでCSS操作などで快適に動作も軽く操作できるようになっています。

環境


jquery-1.4.4
/home/hoge/js/jquery-1.4.4.js
/home/hoge/js/original.js
/home/hoge/hoge.html

InstallというかDownload


本家サイト「http://jquery.com/」より最新版をDownload

2011/1/11 現在の最新version
http://code.jquery.com/jquery-1.4.4.js

準備


$ pwd/home/hoge/jquery
$ mkdir js
$ cd js
$ wget http://code.jquery.com/jquery-1.4.4.js
$ cd ..
$ vi hoge.html
<html>
<head>
<title>title</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
// これがdownloadしたjquery
<script type="text/javascript" src="js/original.js"></script>
// これは、自分で作成するjquery
</head>
<body>
<a href="#">hoge</a>
<p id="strong">bbb</p>
<p>bbb</p>
</body>
</html>

一回ブラウザで表示してみましょう。
普通にリンクのhogeとbbbが二つ並んでいるだけだと思います。

コード記述


$ vi js/original.js
/* jQuery */
$(function() {
$("p").click(function() {$(this).css("margin-left", "50px");})
// pをクリックすると左に50px空白
$("p#strong").html("<strong>cc</strong>");
// id=strongのpが読み込まれたときbbからccへ変換される+太字
$("a").hover(
function() {
$(this).css("color", "red");
},
function() {
$(this).css("color", "black");
}
);
// aにマウスオーバーすると赤離すと黒になる
});

では、
リンクにカーソルをあわせたときに色が変わるか、bbbがccになっているか、
bbbをクリックすると右に移動するか試してみてください。

自分も今日始めて見てやったので、微妙な内容かもしれませんが、参考までに。

参考サイト


「jQuery本家」http://jquery.com/
「jQuery日本語リファレンス」http://semooh.jp/jquery/
「はじめてのjQuery」http://higashizm.sakura.ne.jp/jquery_first/
「第2回 jQueryのインストール・簡単な使い方 – jQuery入門」http://ponk.jp/?p=1696
posted by RicK at 14:50| Comment(0) | TrackBack(0) | 日記
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/42504643

この記事へのトラックバック