jQuery（ジェイクエリー）は、JavaScriptのコーディングを強力に支援するライブラリです。

jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。

$関数

jQueryのコードで重要なコンセプトの1つは、いわゆる '$' 関数である。'$' は実際には 'jQuery' 名前空間での別名 (alias) である。
例 1: jQuery は文字列のトリミングのための関数を提供している。この関数は次のように使用できる。

str = " foo ";
jQuery.trim(str); // "foo" を返す

あるいは、次のように使うこともできる。

str = " foo ";
$.trim(str);

これらは等価である。'$' を 'jQuery' の代わりに使うことはアドホックな規約であり、jQueryライブラリへの手っ取り早いアクセス法と見なすことができる。例 2: クラス 'foo' を持つ全てのパラグラフを選択し、別のクラス 'bar' をそれら全てに追加する。

$("p.foo").addClass("bar");

例 3: ページのDOM木が構築された直後に関数 'myfunc' を実行する（jQueryの用語では ready handler と呼ぶ）。

$(function() {
　　myfunc();
});

これは例えば次のような形で使用する。

$(function() {
　　// CSSクラス oddStripe と evenStripe を使って文書内の全テーブルをストライプにする。
　　$('tr:odd').addClass("oddStripe");
　　$('tr:even').addClass("evenStripe");
});

ロード方法

jQueryは通常単一のJavaScriptファイルとして存在し、その中に全ての共通DOM、イベント、エフェクト、Ajax関数が含まれている。次のようなマークアップを使って、任意のWebページにこれを含めることができる。

<script type="text/javascript" src="/path/to/jQuery.js"></script>

jQueryの最新安定版は、Google、Microsoft、EdgeCastなどの運用するCDNを使ってロードすることもできる。この方法では、Web上での広汎な利用におけるレイテンシの改善といったCDNの利点を享受でき、自身でコピーをホストする必要も無くなる。
CDNからのロード方法は次のように、単にCDN上のURLを指定すればよい。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

また、Google AJAX Libraries APIでは次のような記述も利用できる。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.8");</script>

使用法

jQueryには2種類のインタラクションがある。

・jQueryオブジェクトのファクトリメソッドである $ 関数を使う。これらの関数は「コマンド」とも呼ばれ、連鎖可能であり、それぞれがjQueryオブジェクトを返す。
・$.をプレフィックスとする関数を使う。これらは「ユーティリティ関数」であり、本来jQueryオブジェクト上で動作しない。

複数のDOMノードの操作をする典型的ワークフローは、まず $ 関数をCSSセレクタ文字列を伴って呼び出し、HTMLページ内の0個以上のエレメントを参照するjQueryオブジェクトを返す。このノード群はjQueryオブジェクトまたはノード群自体にインスタンスメソッドを適用することで操作できる。例えば、

$("div.test").add("p.quote").addClass("blue").slideDown("slow");

このコードは、divタグのクラス属性がtestのものとpタグのクラス属性がquoteのもの全てについて、クラス属性blueを追加し、それらをアニメーション付きでスライドダウンさせる。$およびadd関数は一致する集合を決め、addClassとslideDownは参照しているノード群に作用する。
$.が前置されたメソッドは簡便なメソッドだったり、グローバルな属性や振る舞いに影響を与える。例えば、次の例はjQueryにおける高階関数であるeachを使っている。

$.each([1,2,3], function() {
document.write(this + 1);
});

この場合、文書に 234 を書く。
$.ajaxとリモートデータのロードと操作に対応するメソッドを使ってAjaxルーチンを実行することもできる。

$.ajax({
　　type: "POST",
　　url: "some.php",
　　data: {name: "John", location: "Boston"},
　　success: function(msg){
　　alert( "Data Saved: " + msg );
}
});

このコードはsome.phpにパラメータ name=John&location=Boston をつけて要求し、その要求が正常に完了したとき、レスポンスを表示する。

-jquery