LogoMark.png

jQuery

jQuery

jQuery/SelectorjQuery/MethodjQuery/Sample

jQueryとは、JavaScriptの様々な表現機能を使いやすくまとめた軽量ライブラリです。CSSのセレクタをそのままプログラミングに使える便利さから、現在では Javascriptライブラリのデファクトスタンダードとして、様々な場面で活用されています。もちろん、オープンソースです。

CONTENTS


はじめに

jQuery は 何が便利なのか。比較のために JavaScriptだけで記述した場合と、jQueryを使った場合について、簡単な事例で紹介します。

以下いずれも、すべての<li>項目の文字の色を赤に変更するスクリプトです。

以上、jQuery を使うと記述が劇的にシンプルになるのがわかります。




jQuery を利用するには

jQueryを利用するには、jQuery本体をダウンロードして、サイトローカル(つまりあなたのフォルダ)に投入、あるいは CDN( Contents Delivery Network ) でホストされているライブラリを利用(つまりネット上に置かれているファイルを https で接続して利用)します。

ダウンロードしてサイトローカルに置く場合

ネットワークに未接続の環境でも、動作を確認することができます。

CDN を使う場合

制作環境が常にネットワークに接続した状態であればこちらが便利です。
HTMLファイルの <head> に1行の script タグを追加するだけです。

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');
   });

});


リファレンス

ライブラリ関数というのは様々存在するので、「覚えて使う」というより、必要に応じてリファレンスサイトなどを見ながら使います。以下参考サイトです。

セレクタとメソッド

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 というライブラリーを導入すると、この問題が解決します。


PAGES

GUIDE

DATA

添付ファイル: fileJQ_Ripples.zip 374件 [詳細] fileJQ_Parallax.zip 367件 [詳細] filelightboxSample.zip 396件 [詳細] fileJQ_Draggable2.zip 321件 [詳細]
Last-modified: 2020-06-16 (火) 17:33:53