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関連の最新求人情報をチェック!

    年収270万円〜320万円
    勤務地 東京都 港区
    年収400万円〜700万円
    勤務地 東京都 品川区
    年収400万円〜700万円
    勤務地 東京都 渋谷区
    年収300万円〜700万円
    勤務地 東京都 新宿区
    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    正社員

    【Java/Ruby】占いアプリ開発エンジニア|第二新卒・未経験歓迎 NEW

    年収 :270万円〜320万円

    ■Android 占いアプリの開発 ・マシン:Mac OSのPCを各自1台以上 ・開発ツール:Eclipse ・開発言語:...

    テレシスネットワーク株式会社

    正社員

    【LAMP】システムエンジニア|ECに特化した顧客管理システムの開発 NEW

    年収 :400万円〜700万円

    自社サービス「うちでのこづち」、また新サービスの開発全般 をお願いします。 アジャイル開発を行っ...

    株式会社E-Grant

    正社員

    【PHP】システムエンジニア|ショッピングシステムの開発・運用 NEW

    年収 :400万円〜700万円

    ネットショップ構築サービスの運営業務や新機能の開発を お任せします。 同社の通販事業部で利用して...

    ジェイフロンティア株式会社

    正社員

    【PHP/JAVA】システムエンジニア|Webアプリケーションの開発

    年収 :300万円〜700万円

    ・Webアプリケーション等における設計・開発 ・C/Sシステムなどその他開発業務

    株式会社シグナルベース