jQuery は様々な処理を短く簡単に書ける JavaScript ライブラリです．
独自のXPATH/CSSセレクタを利用することで，多くのDOM操作を非常に簡単に書くことが出来ます．
JavaScriptのDOM操作や，XMLHTTPRequest，XMLの操作などを覚えなくとも，
Ajaxを利用したインタラクティブなページを作ることが出来ます．
以下のサンプルを見れば，JavaScriptらしい表記をほとんどする必要がないことがわかると思います．
特定のブロックの表示・非表示を切り替えるのは以下のようなコードになります．
$("#target_toggle").toggle("slow");
このブロックは，<p id="target_toggle"> です．
Ajaxでhello.htmlをロードするのは以下のようなコードで出来ます．
$("#target_load").load("hello.html");
このドキュメントの目次も，jQueryを使ってH1～H6タグから自動生成しています． このページで読み込んでいる，jquery_site.js ファイルを確認してみてください．
上記のサンプルのように，jQuery では対象のDOM要素を $() で選択してから，
.toggle() 等のメソッドを使い操作を加えます．
$() 関数を呼ぶと，選択されたDOM要素を持つ jQuery オブジェクトが返されます．
jQuery オブジェクトには，エフェクトを加えたり，Ajaxロードを実行するためのメソッドがあります．
jQuery オブジェクトのメソッドは，プラグインで拡張することができます．
また，jQuery オブジェクトに対する操作ではないメソッドも $.get() 等，$. から
始まる名称で用意されており，JavaScript 内で処理を進めたいときに利用できます．
上記のサンプルでは，$("#ID") で特定のIDを持つものを選択し，.toggle() や .load() メソッドで操作を加えています．
本家サイトからダウンロードしてください．
Downloading jQuery
圧縮をしておらず，開発時の状態のままの Uncompressed 版と，
圧縮を行った Packed 版と Minified 版があります．
通常は Minified版かPacked版を使うと良いと思いますが，
開発中はデバッグがやりにくくなるため，Uncompressed版を利用することをおすすめします．
Minified版とPacked版の違いは，MinifiedはJavaScriptの文自体はそのままに，空白を詰めたものです．
Packed版は，ソースコードを圧縮し，ロード後にJavaScriptで圧縮されたjQueryコードを解凍し，実行することで更に小さくしたものです．
ファイルサイズはPacked版の方が小さいですが，クライアント側でJavaScriptの解凍処理が走るので，クライアントPCへの負担は大きくなります．
jQuery の一番基本となる操作は，$() です．
この関数でHTML内から操作したい対象を選択し，様々な操作を行います．
$() 関数は，CSS と同様の指定と，
XPath による指定の両方が利用できます．
$() 関数を使うと，複数のDOM要素を持った jQuery オブジェクトが返されます．
ここでは，基本の使い方だけを紹介します．
#を先頭に付けることでID指定で選択できます．この方法は処理速度も高速です．
この説明文は <p id="target_id"> ブロックの中に書かれています．
alert( $("#target_id").html() );
タグの種類を書けば，そのタグが抽出できます．
該当するタグが複数ある場合，複数のオブジェクトが選択されます．
.html() メソッドは，最初のオブジェクトのHTMLコードを表示するメソッドですが，
複数のオブジェクトに同時に効果を加えるメソッドもあります．
alert( $("pre").html() );
$("pre").addClass("background_red");
$("pre").removeClass("background_red");
クラス名の前に . を付ければ，指定したクラスを選択できます．
タグの種類による指定と兼用することももちろん可能です．
alert( $(".run").html() );
alert( $("pre.run").html() );
多くのメソッドは，jQueryオブジェクトを返します． このため，複数の操作を続けて指定することが出来ます．
$("#target_chain").css("background-color", "#fff0ff")
.fadeOut("slow");
$("#target_chain").css("background-color", "#efffff")
.fadeIn("slow");
show() / hide() メソッドで，指定した要素の表示・非表示を切り替えることが出来ます．
引数として "slow", "normal", "fast" を付けるとアニメーションします．
ただし，アニメーションは要素のサイズが決まらないケースなどでうまく動かないことがあるようです．
その場合は，アニメーション無しにすると動作するようです．
この説明文は <p id="target_effect"> ブロックの中に書かれています．
$("#target_effect").hide();
$("#target_effect").show();
$("#target_effect").hide("fast");
$("#target_effect").show("slow");
slideDown() / slideUp() メソッドで，スライドさせるアニメーションをすることが出来ます．
引数として "slow", "normal", "fast" でアニメーション速度を指定します．
この説明文は <p id="target_effect_slide"> ブロックの中に書かれています．
$("#target_effect_slide").slideUp("slow");
$("#target_effect_slide").slideDown("slow");
fadeIn() / fadeOut() メソッドで，フェードイン・フェードアウトが出来ます．
引数として "slow", "normal", "fast" でアニメーション速度を指定します．
この説明文は <p id="target_effect_fade"> ブロックの中に書かれています．
$("#target_effect_fade").fadeOut("slow");
$("#target_effect_fade").fadeIn("slow");
load() メソッドで，対象オブジェクトの中身を Ajax ロードしたコンテンツと差し替えることが出来ます．
hello.htmlをこの下の段落にロードします．
この段落は <p id="target_ajax_load"> です．
$("#target_ajax_load").load("hello.html");
パラメータを与えたい場合は，2番目の引数に指定することが出来ます．
パラメータを指定した場合，POSTメソッドになります．
パラメータを指定しない場合，GETメソッドになるため，ブラウザによりリクエスト結果が強力にキャッシュされます．
キャッシュをされたくない場合，$.ajaxSetup() メソッドでキャッシュしないように指定します．
（URLの末尾に「?_=ユニークな数字」が自動的に付与されます．）
$("#target_ajax_load").load("hello.cgi", {
name: "mikage",
pageid: 3
});
$.ajaxSetup({
cache: false
});
$("#target_ajax_load").load("hello.html");
3番目の引数（パラメータを与えない場合2番目）には，コールバック関数を指定することが出来ます．
ロードが完了すると，コールバック関数が呼び出されます．
コールバック関数の中では，this が置き換え対象のDOM要素そのものになります．
$(this) とすることで jQuery オブジェクトとして扱えるようになります．
また，コールバック関数の1番目にはテキスト内容，2番目にはステータスが返されます．
成功時は "success"，失敗時は "error" が帰ります．
$("#target_ajax_load").load("hello.html", function(text, status) {
$(this).css("background-color", "#ffe0ff");
alert( "text: " + text + "\nstatus: " + status );
});
$.ajaxSetup() で Ajax の様々なオプションを指定できます．
キャッシュの有無，ifModified によるキャッシュの利用，リクエストのタイムアウト時間などを指定できます．
タイムアウトは動的なコンテンツを返す際，システムがなかなか応答を返さないときにエラー表示をしたい場合に利用できます．
hello_timeout.cgi は5秒間応答を返さないCGIです．
ブラウザのキャッシュを防ぐために，パラメータを追加しています．
この段落は <p id="target_ajax_load_timeout"> です．
$.ajaxSetup({
timeout: 2000 // 単位はms
});
$("#target_ajax_load_timeout").load("hello_timeout.cgi", {
timekey: 1
}, function(text, status) {
alert( "text: " + text + "\nstatus: " + status );
});
$.ajaxSetup({
timeout: 0 // 0指定でタイムアウト無しになります
});
$("#target_ajax_load_timeout").load("hello_timeout.cgi", {
timekey: 1
}, function(text, status) {
alert( "text: " + text + "\nstatus: " + status );
});
jQuery では，HTMLとJavaScriptコードを容易に分離することが出来ます． ここではその方法について説明します．
HTMLとJavaScriptコードを分離する場合，HTMLが読み込み終わった後で，
必要なイベントを設定します．
jQueryでは，HTMLが読み込み終わった後に実行するコードを，onload ではなく，
$(function(){}) を利用して実行します．
onload の場合は，ページの全ての画像が読み込まれるまで実行されませんが，
$(function(){}) を利用すると，HTMLドキュメントの準備が出来た段階で
実行させることが出来ます．
$(function(){}) は複数回指定することができるので，
別ファイルに分離したJavaScriptコードの中でも利用できます．
$(function(){
// HTMLロード後に実行したい初期化コード
});
この記述は，$(document) に対する .ready() メソッドと同じです．
以前のバージョンでは，$(function(){}) は無く，ready() メソッドを
使用していたため，プラグイン等，他のソースを見ると以下の
記述を目にすることがあるかもしれません．
$(document).ready(function(){
// HTMLロード後に実行したい初期化コード
});
click() で，onclick イベントを設定できます．
ready() の中で，clickメソッドを使ってイベントを設定することで，
HTMLコードの中からJavaScriptコードを分離できます．
同様に，sumbit，focus 等のメソッドもあります．
// JavaScriptコード部分
<script type="text/javascript">
$(function(){
$("#popup_alert").click(function(){
alert( "popup" );
return false;
});
});
</script>
</head>
<body>
// HTML部分
<a href="" id="popup_alert">alertポップアップ</a>
$()によるセレクタは便利で，ほとんどの場合は $() を一度実行するだけで
目的のDOM要素を得ることが出来ると思います．
しかし，filter() メソッドなどを使うことで，jQuery オブジェクトのDOM要素から
更に一部を絞り込んで，処理を加えることも可能です．
$() によるセレクト処理は，場合によっては時間がかかります．
そのような場合に，無駄な処理を省くために，filter() メソッドなどが
活用できることがあります．
filter() メソッド等は，呼び出し前の状態に新しく絞り込みを実行し，その結果を返します．
また，end() メソッドを実行すると，filter() を行う以前の状態に戻します．
ただし，実行した元のオブジェクトが変更されるわけではないので，チェインしない場合は end() メソッドを呼び出さなくてもかまいません．
注：jQuery 1.0 では，元のオブジェクトが変更されていたため，必ず end() を呼ぶ必要がありました．
段落1
段落2
段落3
var $target = $("#target_jquery_object");
var $p = $("p", $target);
jquery_dump($p); // 全ての p タグが返されます．
jquery_dump($p.filter(".header")); // class="header" 以外のオブジェクトを削除します．
jquery_dump($p); // 元のオブジェクトは変更されません．
jquery_dump($p.filter(".header").end()); // filter後に元の状態に戻します．
jQuery は，色々な機能をプラグインで拡張することが出来ます．
プラグインを使うには，ファイルを入手し，jquery.js の後にプラグインのJavaScriptをロードします．
そうすると，プラグインの関数・メソッドが利用可能になります．
プラグインの関数は，通常の jQuery の関数・メソッドと同様に，$("#id").method() や $.method() で使用することが出来ます．
<script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="jquery.scrollTo-min.js"></script>
このページでは，「目次」と各説明のスクロールに scrollTo プラグインを使用しています． $.scrollTo() メソッドにスクロール先オブジェクトを渡すと， かっこよくスムーズにスクロールします．
$.scrollTo("#toc", 300); // 目次へスクロール
チェックボックスの操作サンプル
チェックボックスの操作を行うサンプルです．
「全てチェック」や「全てチェック解除」を行います．
なお，この例ではcheckboxのattrを直接変更していますが， jQuery 1.2 では，
$("input[@type='checkbox']").val(["音楽", "アウトドア"]);
のように記載することも可能です．
val() メソッドでは，checkbox/radioだけでなく，selectに関しても内側のoptionタグを含めて面倒をみてくれるので，
状況に応じて使い分けると便利です．