トップQs
タイムライン
チャット
視点
JQuery
ブラウザ用のJavaScriptのライブラリ ウィキペディアから
Remove ads
jQuery(ジェイクエリー)は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。様々な場面で活用されており、JavaScriptライブラリのデファクトスタンダードと呼ぶ者もいる[1]。ロゴの下に表記されているキャッチコピーは「write less, do more」(「少ない記述で、もっと多くのことをする」の意)。
Remove ads
機能・特徴
jQueryには次のような機能・特徴がある。
配布
通常jQueryは単一のJavaScriptファイルとして存在している。このほかパッケージ管理システム(npm、Yarn、Bower)やコンテンツデリバリネットワーク(CDN)(Google、マイクロソフトなど)で配信されている[3]。
ライブラリにリンクする例(同一ホスト・サーバーから):
<script src="jquery-3.7.1.min.js"></script>
公式のパブリックCDN、code
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
Remove ads
インタフェース
要約
視点
関数
jQueryは、静的メソッドとjQueryオブジェクトメソッドの2種類あり、それぞれに独自の使用スタイルがある。
jQuery
- メインのjQueryオブジェクト$
-jQuery
の別名(エイリアス)
なおjQueryによって再代入された$
変数は、jQuery.noConflict()
を記載した行以降、放棄される。これにより他のライブラリなどで宣言されていた$
変数を復帰することができる[4]。
典型的なスタート方法
jQueryをスタートするには次の方法が推奨されている。
function example() {
// 定義された関数による任意のコード
}
$(example);
// または
$(function () {
// 無名関数による任意のコード
});
HTMLの解析を終えると、$()
メソッドで指定された関数をコールバックし、DOM操作などを安全にスタートさせる。同じ働きをしていたレディイベント$(document).on('ready', callback)
は古典的な方法で、jQuery 3.0以降削除されて、動作しない[5]。
メソッドチェーン
$()
メソッドは基本的にjQuery
オブジェクトが返る為、次のようにメソッドをつなげていくことが可能である。
$('div.test').add('p.quote').addClass('blue').slideDown('slow');
このコードは、div
タグのクラス属性がtest
のものとp
タグのクラス属性がquote
のもの全てについて、クラス属性blue
を追加し、それらをアニメーション付きでスライドダウンさせる。$()
変数およびadd()
関数は一致する集合を決め、addClass()
とslideDown()
は参照しているノード群に作用する。
Ajax
静的メソッドの$.ajax()
を用いて非同期通信を実行することができる。$.ajax()
の返り値にはPromise
インタフェース[6]を実装した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
の各メソッドに指定されたコールバック関数へ渡していたが、以降削除、動作しない[7]。
Fetch APIと似た文法であるが、jQueryではXMLHttpRequest
オブジェクトを利用している為、返されるオブジェクトや、HTTPステータスコードが404
でもエラーとは見なさないなど取り扱いが少し異なる[8]。
採用
マイクロソフトとノキアはそれぞれ自社プラットフォームへのjQueryバンドルを計画していると発表した[9]。マイクロソフトは手始めに Visual Studio で採用[10]、ASP.NET開発チームをフルタイムでjQueryの開発に参加のうえ、jQueryを同社のASP.NETにおけるクライアント・サイド・スクリプティングの標準として採用し、同社が開発していた類似技術を全て廃止すると発表、ASP.NET AJAX および ASP.NET MVC Framework で利用する。一方ノキアは同社の Web Runtime プラットフォームに組み込む予定である。
リリース履歴
要約
視点
主なリリースを示す。下に行くほど古いバージョンを示している。
Remove ads
関連項目
脚注
参考文献
外部リンク
Wikiwand - on
Seamless Wikipedia browsing. On steroids.
Remove ads