jQueryのダウンロードから使い方まで

    • このページをはてなブックマークに追加

    公開日:2019年02月03日 最終更新日:2019年09月25日

    JavaScriptライブラリの「jQuery」をダウンロードして動的なページを作成してみましょう。jQueryを実装するための「js」ファイルをダウンロードして、サーバー上にファイルを置きJavaScriptライブラリを簡単に実行してみましょう。また、サーバー以外にもオフラインで動きを確認する事も可能です。ファイルをダウンロードする他みも、GoogleやMicrosoftの提供するCDN(Contents Delivery Network)を利用する方法についてもサンプルコードと共に解説します。

    目次

    1. jQueryのダウンロード方法

    公式ホームページからjQueryライブラリの「jquery-3.3.1.min.js」ファイルをダウンロードしてみましょう。

    jQuery公式ダウンロードページ:https://jquery.com/download/

    2019年2月現在の最新バージョンは、「3.3.1」です。一番上のリンク「Download the compressed, production jQuery 3.3.1」が一番軽いjQueryのライブラリになります。[右クリック]→[名前を付けてリンク先を保存]を選択して、ローカルPCの任意の場所に保存します。

    ●jquery-3.3.1.min.jsファイル

    「jquery-3.3.1.min.js」ファイルを「js」フォルダーに保存しました。このファイルをHTMLコードに指定してjQueryのライブラリを使いますが、詳しくは次章で説明します。

    2. ダウンロードしたjQueryファイルの使い方

    ダウンロードしたjQueryのファイル「jquery-3.3.1.min.js」を、HTMLのコード内に記述する事で様々なJavaScriptライブラリを簡単に実行する事ができます。

    ●jQueryの基本書式

    <!DOCTYPE html>
    <html>
    <head>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
    //ここにjQueryのコードを記述します。 </script>
    </head>
    <body>
    <p>コンテンツ</p>
    </body>
    </html>

    HTMLの「head」タグにjQueryファイルの場所

    「<script src="js/jquery-3.3.1.min.js"></script>」

    を指定します。

    HTMLファイルとjQueryのファイルの階層構造に合わせてパスを指定して下さい。本コラムのサンプルコードでは、「www」フォルダー直下にHTMLファイルを保存し、「www¥js」フォルダー内に「jquery-3.3.1.min.js」ファイルがありますのでHTMLファイルの「script」タグに指定するパスは「"js/jquery-3.3.1.min.js"」になります。

    ●jQuery_Sample1.htmlファイル

    簡単なjqueryを実行するサンプルコード「jQuery_Sample1.html」をコピーして、実際の動きを確認して下さい。

    ●jQuery_Sample1.html --------------------

    <!DOCTYPE html>
    <html>
    <head>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
    $(document).ready(function(){
     $("p").click(function(){
      $(this).hide();
     });
    });
    </script>
    </head>
    <body>
    <p>ここをクリックするとテキストが非表示になります。</p>
    </body>
    </html>
    --------------------

    段落(p)タグをクリックすると、その中のテキストが消えるjQueryです。

    ここをクリックするとテキストが非表示になります。

    ▲ページトップへ戻る

    3. CDNでjQueryを使う方法

    jQuery公式サイトからライブラリをダウンロードしなくても、CDN(Microsoft Ajax Content Delivery Network)を利用してJQueryライブラリを使う事ができます。 「script」タグへの記述方法は、ダウンロードファイルを指定するのと同じくURLを指定するだけです。

    jQuery CDN – Latest Stable Versions

    <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>

    Google Hosted Libraries

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    Microsoft Ajax Content Delivery Network

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

    サンプルコード「jQuery_Sample2.html」では、jQueryのCDNを指定しています。

    ●jQuery_Sample2.html --------------------

    <!DOCTYPE html>
    <html>
    <head>
    <title>Introduction to jQuery</title>
    <script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>
    <script>
    $(document).ready(function(){
     $("p").click(function(){
      $(this).text((new Date()).toLocaleString());
     });
    });
    </script>
    </head>
    <body>
    <p>クリックすると日付と時刻を表示します。</p>
    </body>
    </html>
    --------------------

    サンプルコードの「jQuery_Sample2.html」は段落タグをクリックすると、日付と時刻が表示されます。

    クリックすると日付と時刻を表示します。

    ▲ページトップへ戻る

    JQuery関連の最新求人情報をチェック!

    月額単価60万円〜90万円
    勤務地 神奈川県
    月額単価50万円〜60万円
    勤務地 東京都 千代田区
    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    フリーランス

    【Java】バックエンドエンジニア★Web教科書配信システムのアプリ開発 NEW

    月額単価 :60万円〜90万円

    小中学校で利用するWeb教科書配信システムの新規開発業務を担当して頂きます。

    フリーランス

    【Ruby】サーバーサイドエンジニア★医療向けHRサービスの開発 NEW

    月額単価 :50万円〜60万円

    医療従事者向けのHRtechサービスを展開する企業にて、Rubyを用いたサーバーサイド開発を担当して頂きま...

    フリーランス

    【Ruby】サーバーサイドエンジニア★終活・セカンドライフサービスの開発 NEW

    月額単価 :60万円〜70万円

    終活/セカンドライフを考える人向けWebサービスのサーバーサイド開発を担当して頂きます。 【具体的...

    フリーランス

    【Ruby】Webエンジニア★住宅企業向け予約集客クラウドツールの開発

    月額単価 :50万円〜80万円

    同社は自社開発で住宅企業向けの集客クラウドツールやマッチングサイトを展開しています。 今回は、Rub...