jQuery 基本 (1)
まずは、基本的なことからいってみよー。
jQuery 導入
公式サイトからライブラリを取得する。2010/3/4 現在、最新バージョンは 1.4.2。
ダウンロード後、次の記述でページにロードさせる。
<script src="/javascripts/jquery.js" type="text/javascript"></script>
書式
jQueryでは HTML をロードし終わった後に実行するコードを $(function(){}) を使って記述する。
$(function() { // 処理 });
ちなみに以前は $(function(){}) がなく、代わりに ready() メソッドを使用していたっぽい。なのでプラグインとか他のソースを見ると次の記述をしてることもあった場合、同じもんだと理解しておけばＯＫらしい。
$(document).ready(function(){ // 処理 });
要素の操作
もっと便利に！jQueryでラクラクサイト制作（第2回） にあるのが分かりやすい。
いろいろ、操作方法があるらしい。次の HTML を例で試してみよ。
<div id="hello_ja" class="greeting">こんにちわ</div> <div id="hello_en" class="greeting">Hello</div>
- $() で要素を指定する。取得結果は jQuery オブジェクトになってる。
- 要素の指定方法は css と同じで id 属性を指定する場合「#id名」、クラス属性を指定する場合「.class名」になる。
- 複数要素を指定したい場合、カンマ区切り（#id1, #id2）にする。
なるほどね。
jQuery の場合、メソッドの戻り値はすべて jQuery オブジェクトになるのでメソッドを連結した記述が可能になる。次のように書くと「こんにちわ」の文字と文字色が入れ替わる。
$("#hello_ja").html("おっす！").css("color", "red");
簡単だね〜 :-)
