jQuery (ジェイクエリー)は、ウェブブラウザ 用のJavaScript コードをより容易に記述できるようにするために設計されたJavaScriptライブラリ である。ジョン・レシグ が、2006年1月に開催されたBarCamp NYC でリリースした。様々な場面で活用されており、JavaScriptライブラリのデファクトスタンダード と呼ぶ者もいる[ 2] 。ロゴの下に表記されているキャッチコピーは「write less, do more」(「少ない記述で、もっと多くのことをする」の意)。
jQueryには次のような機能・特徴がある。
ブラウザに依存しないオープンソースのセレクタエンジンSizzle を使ったDOM エレメントの選択(Sizzle は jQuery プロジェクトからスピンアウト)[ 3] DOM 操作と変更(CSS 1-3 と基本的なXPath のサポートを含む)イベント CSS 操作エフェクトとアニメーション Ajax ユーティリティ - ブラウザのバージョン取得、each関数など プラグインによる拡張性 通常jQueryは単一のJavaScriptファイルとして存在している。このほかパッケージ管理システム (npm 、Yarn 、Bower (ドイツ語版 ) )やコンテンツデリバリネットワーク(CDN) (Google 、マイクロソフト など)で配信されている[ 4] 。
ライブラリにリンクする例(同一ホスト・サーバーから):
< script src = "jquery-3.7.1.min.js" ></ script > 公式のパブリックCDN、code .jquery .com を利用する例:
< script src = "https://code.jquery.com/jquery-3.7.1.min.js" integrity = "sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin = "anonymous" ></ script > jQueryは、静的メソッド とjQueryオブジェクトメソッドの2種類あり、それぞれに独自の使用スタイルがある。
jQuery - メインのjQueryオブジェクト$ -jQueryの別名(エイリアス)なおjQueryによって再代入された$変数は、jQuery.noConflict()を記載した行以降、放棄される。これにより他のライブラリなどで宣言されていた$変数を復帰することができる[ 5] 。
jQueryをスタートするには次の方法が推奨されている。
function example () { // 定義された関数による任意のコード } $ ( example ); // または $ ( function () { // 無名関数による任意のコード }); HTMLの解析を終えると、$()メソッドで指定された関数をコールバック し、DOM操作などを安全にスタートさせる。同じ働きをしていたレディイベント$(document).on('ready', callback)は古典的な方法で、jQuery 3.0以降削除されて、動作しない[ 6] 。
$()メソッドは基本的にjQueryオブジェクトが返る為、次のようにメソッドをつなげていくことが可能である。
$ ( 'div.test' ). add ( 'p.quote' ). addClass ( 'blue' ). slideDown ( 'slow' ); このコードは、divタグのクラス属性がtestのものとpタグのクラス属性がquoteのもの全てについて、クラス属性blueを追加し、それらをアニメーション付きでスライドダウンさせる。$()変数およびadd()関数は一致する集合を決め、addClass()とslideDown()は参照しているノード群に作用する。
静的メソッドの$.ajax()を用いて非同期通信を実行することができる。$.ajax()の返り値にはPromiseインタフェース [ 7] を実装したDeferredオブジェクトが返るため、then()メソッドを用いて要求した結果を受けとる必要がある。
$ . ajax ({ type : 'POST' , url : '/process/submit.php' , data : { name : 'John' , location : 'Boston' , }, }). then ( function ( msg ) { alert ( 'Data Saved: ' + msg ); }). catch ( function ( xmlHttpRequest , statusText , errorThrown ) { alert ( 'Your form submission failed.\n\n' + 'XML Http Request: ' + JSON . stringify ( xmlHttpRequest ) + ',\nStatus Text: ' + statusText + ',\nError Thrown: ' + errorThrown ); }); このコードは/process/submit.phpにパラメータname=John&location=Boston をつけて要求し、その要求が正常に完了したとき、レスポンスを表示する。
jQuery 3.0以前では結果を受けとる際にsuccess、error、completeの各メソッドに指定されたコールバック関数へ渡していたが、以降削除、動作しない[ 8] 。
Fetch APIと似た文法であるが、jQueryではXMLHttpRequest オブジェクトを利用している為、返されるオブジェクトや、HTTPステータスコード が404でもエラーとは見なさないなど取り扱いが少し異なる[ 9] 。
マイクロソフト とノキア はそれぞれ自社プラットフォームへのjQueryバンドルを計画していると発表した[ 10] 。マイクロソフトは手始めにVisual Studio で採用[ 11] 、ASP.NET開発チームをフルタイムでjQueryの開発に参加のうえ、jQueryを同社のASP.NETにおけるクライアント・サイド・スクリプティングの標準として採用し、同社が開発していた類似技術を全て廃止すると発表、ASP.NET AJAX およびASP.NET MVC Framework で利用する。一方ノキアは同社の Web Runtime プラットフォームに組み込む予定である。
主なリリースを示す。下に行くほど古いバージョンを示している。
Chaffer, Jonathon; Karl Swedberg (2007). Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques . Packt Publishing. ISBN 978-1847192509 Bibeault, Bear; Yehuda Katz (2008). jQuery in Action . Manning Publications Co.. ISBN 978-1933988351 Heilmann, Christian (2006). Beginning JavaScript with DOM Scripting and Ajax . Apress. ISBN 978-1590596807 . https://books.google.co.jp/books?id=M3Uqna8RIAkC&redir_esc=y&hl=ja 2009年5月4日閲覧。 Darie, Cristian; Filip Chereches-Tosa, Mihai Bucicia (2005). AJAX and PHP: Building Responsive Web Applications . Packt Publishing. ISBN 978-1904811824 Heilmann, Christian; Mark Norman Francis (2007). Web Development Solutions . Apress. ISBN 978-1590598061 . https://books.google.co.jp/books?id=AdEfkbOmmX4C&redir_esc=y&hl=ja 2009年5月4日閲覧。 Taft, Darryl K. (2006年8月30日). “jQuery Eases JavaScript, AJAX Development ”. eWeek . 2009年5月4日閲覧。 Krill, Paul (2006年8月31日). “JavaScript, .Net developers aided in separate projects ”. InfoWorld . 2009年7月20日時点のオリジナル よりアーカイブ。2009年5月4日閲覧。