jQuery 1.2.6
http://jquery.com/
jQueryとは、JavaScriptのライブラリ集のようなものです。
で、これが尋常ではなく便利極まりない。
動的メニューやテキストの動的変更といった、ちょっとした演出が非常に簡単に行えます。
まず公式サイトからファイルをダウンロード。
何種類かありますが全部同じもので、Uncompressedがソース閲覧用、Minifiedが使用するためにコメントやインデントを全て取り払ったものです。
jquery.jsこれひとつがjQueryの全てです。
適当なフォルダに突っ込んだらHTMLから呼び出してみます。
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<div class="Class1">DIVでClass1です</div>
<div class="Class2">DIVでClass2です</div>
<p class="Class1">PでtestClassです</p>
<div id="TestID">DIVでtestIDです</div>
<script type="text/javascript">
$("DIV.Class1")
.css("color","red")
.html("DIVのClass1を発見しました")
.animate({fontSize: "2em"},2000 );
$("#TestID")
.css("background","blue")
.css("width","120px")
.css("height","120px")
.css("padding","10px")
.mouseover(function () {$(this).slideUp();});
</script>
</body>
</html>
|
基本は、$の後にタグ.class、もしくはタグ#idで対象を見つけ出し、それに対して行いたいことを.で繋げて書いていくだけです。
色々なメソッドがあるのですがとりあえずスクリプトを別ファイルにしましょう。
ちょっとだけ特殊な書き方が必要で、
index.html
<script src="index.js" type="text/javascript"></script>
index.js
$(document).ready(function(){
//ここにメソッド
});
これで分離できます。
あとは適当にidなりclassなりの単位でメソッドに突っ込めばいいのですが、中にはAjaxでファイルを動的に取得するメソッドも存在します。
かつてこんなに長々とソースを書いていたものが、
$("#id").click(function(){$(this).load("sample.txt");});
だけで終わっちゃうとかもうねどうなのよこれ。
PR
トラックバック
トラックバックURL:
