jQuery
jQuery/Selector｜jQuery/Method｜jQuery/Sample
jQueryとは、JavaScriptの様々な表現機能を使いやすくまとめた軽量ライブラリです。CSSのセレクタをそのままプログラミングに使える便利さから、現在では Javascriptライブラリのデファクトスタンダードとして、様々な場面で活用されています。もちろん、オープンソースです。
CONTENTS
はじめに
jQuery は 何が便利なのか。比較のために JavaScriptだけで記述した場合と、jQueryを使った場合について、簡単な事例で紹介します。
- 対象となる HTML
<ul id="SiteNavi''> <li>項目１</li> <li>項目２</li> <li>項目３</li> </ul>
以下いずれも、すべての<li>項目の文字の色を赤に変更するスクリプトです。
- JavaScript で直接操作する場合（DOMの知識が必要）
var navi = document.getElementById('SiteNavi'); val list = navi.getElementsByTagName('li'); for( var i=0; i<list.length; i++){ var item = list[i]; item.style.color = "red"; } - jQuery で操作する場合
$('#SiteNavi li').css( 'color' , 'red');
以上、jQuery を使うと記述が劇的にシンプルになるのがわかります。
jQuery を利用するには
jQueryを利用するには、jQuery本体をダウンロードして、サイトローカル（つまりあなたのフォルダ）に投入、あるいは CDN( Contents Delivery Network ) でホストされているライブラリを利用（つまりネット上に置かれているファイルを https で接続して利用）します。
ダウンロードしてサイトローカルに置く場合
ネットワークに未接続の環境でも、動作を確認することができます。
- 1) 以下の公式サイトから jQuery本体をダウンロード。
http://jquery.com/
jQuery本体は、jquery-3.5.1.js のような名前のファイルとして提供されています。ふつうのテキストファイルなので、ダウンロードをクリックすると、ソースコードがそのまま表示されます。右クリック＞「リンク先を保存」 でDL保存して下さい。ダウンロードできるのは以下の２パターン。中身は同じです。- jquery-x.xx.x.js
通常バージョン：ふつうにソースコードとして読める状態のファイルです。 - jquery-x.xx.x.min.js
ミニマムバージョン：「スペース」や「改行」が省略されて、その分だけファイルサイズが軽くなっています。Webでは「ファイルが軽い」というのがとても大事なので、通常はこちらをリンクして使います。
以下の事例では、jQueryについては、ダウンロードしたものを使う前提ですが、を使うこともできます。
- jquery-x.xx.x.js
- 2) HTMLファイルの <head> に以下の1行を追加します。
<script src="js/jquery-x.xx.x.min.js"></script>
これは、サイトローカルに js フォルダがあって、その中に jQueryがある場合です。
CDN を使う場合
制作環境が常にネットワークに接続した状態であればこちらが便利です。
HTMLファイルの <head> に1行の script タグを追加するだけです。
- jQuery公式サイトのCDNを利用する場合
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
以下のページから最新版の埋め込みコードを取得できます。
https://code.jquery.com/
- Google のCDNを利用する場合
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
以下のページから最新版の埋め込みコードを取得できます。
https://developers.google.com/speed/libraries/
jQueryコードの書き方
基本構文
jQuery の構文は、正確に書くと以下のような形になっています。
jQuery( セレクタ ).メソッド( パラメータ );
実際のコードでは jQuery のエイリアス $ を使って以下のように書きます。
$( セレクタ ).メソッド( パラメータ );
例：$("#menu").slideToggle('slow');
実行タイミング
JavaScript を用いたコンテンツは一般に HTMLのコード（DOM）が完全に読み込まれるのを待ってからコードを実行します（読み込み前にコードを実行しても正しく対象を捉えることができないからです)。その理由から、<script>タグは HTML文書の最後尾 </body>の直前に置く書き方を多く見かけますが、これは美しくありません。JSのコードは、できれば外部ファイルにして<head>で読み込むのが理想です。
jQuery にはページが完全に読み込まれたかどうかを判定する ready イベントが用意されているので、これを使って document の読み込み完了後にコードを実行するよう、以下のような枠組みに入れて記述しますが・・
jQuery( document ).ready( function ( ) {
// ここに処理を記述します
} );
実際にはこれを簡略化した以下の枠組みに入れて記述するのが一般的です。
$ ( function ( ) {
// ここに処理を記述します
});
実際の書き方事例
id="button" の部分のクリックで id="menu" の部分が 表示/非表示 する例
HTML側に、id="button" と id="menu" が定義された場所が必要です。
$( function() {
$( "#button" ).click( function() {
$( "#menu" ).slideToggle('slow');
});
});
リファレンス
ライブラリ関数というのは様々存在するので、「覚えて使う」というより、必要に応じてリファレンスサイトなどを見ながら使います。以下参考サイトです。
- 公式リファレンス http://api.jquery.com/
- 日本語リファレンス
セレクタとメソッド
jQueryのセレクタ
記事を独立させました。> jQuery/Selector
jQueryのメソッド
記事を独立させました。> jQuery/Method
よくある質問
jQueryのダウンロードの方法について
jQueryのダウンロードのページにいっても、何をダウンロードすればいいのか、わからない。またダウンロード対象のリンクをクリックすると、大量の文字が表示されるだけで、わけがわからない・・・という質問について。
jQueryに限らず、JavaScriptのライブラリーファイルというのは、要するに関数が大量に書いてあるテキストファイルです。ダウンロードする対象がテキストファイルの場合、「ダウンロードしますか？」のダイアログが表示されず、直接それがブラウザに表示されることがあります。また、通信時間を節約するために改行やTABを省いた .min. 形式のファイルの場合、文字列だらけの意味不明なものに見えます。
で、それで問題ありません。それをそのまま保存しましょう。
それが見えている状態で、ブラウザのアドレス欄を確認してみて下さい。http:// ・・・・・・/xxxxx.min.js というかたちで、.jsファイルを見ているということがわかると思います。
要はそれを .js ファイルとして取得すればいいので、そのままブラウザでファイルを保存、あるいは、ページ内を全選択（[CTRL]+[A]）して、テキストエディターにコピー&ペーストして、xxxxx.min.js など適切な名前で保存すればOKです。
jQueryの動作をスマホでも・・
jQuery, jQuery UI は、スマートフォン（タッチデバイス）で正常動作しないことがありますが、 jQuery UI Touch Punch というライブラリーを導入すると、この問題が解決します。
- ダウンロード
http://touchpunch.furf.com/ - 導入方法
以下のように jQuery UI Touch Punch のスクリプトを読み込むだけです。<script src="jquery.ui.touch-punch.min.js"></script>
JQ_Ripples.zip