JavaScript & jQuery & CSS & HTML の達人

JavaScript と jQuery と CSS と HTML の使い方がわかるブログ

jQueryを使えるようにする方法(外部 jQuery配信サイトと連携)

はじめに

以前の記事で、一度ローカルにダウンロードしてから「jQuery」とリンクさせて使用するという方法を説明しましたが、その他にも、ダウロードをせずに外部で公開している jQueryファイルと連携させる方法というのもありますので、今回はその方法を説明してみたいと思います。

 

jQueryの基本中の基本

ウェブページはHtmlという言語で書かれているのは皆さんも知ってると思いますが、そのHtmlソースの最初の方を見てみると、ヘッドタグ(<head></head>)というのがあるのがわかると思います。

このヘッドタグに囲まれた部分には、ウェブページの設定のようなものが書かれているのですが、ページ内で jQueryを使うためにはこのヘッドタグの中に一行だけ jQueryファイルとのリンクを記述しなればなりません。

 

  <script src="ここにjQueryへのリンク"></script>

 

これはローカルであろうと外部 jQueryファイルとの連携であろうとまったく変わりません。jQueryを使いたいのであれば、どれだけ嫌でもこの一行だけは Htmlのヘッドに追加しなければなりません。

そして、外部の jQueryファイルと連携する場合は、この一行のリンク部分(src="")に、jQueryファイルのある場所を指定しますが、現時点で推奨されている jQueryファイル配信先は下記になっています。

 

上記から自分の好きな配信元を選びヘッドタグ内に書かれたスクリプトタグでリンクします。そして、ページを開くたびにそこから jQueryファイルを送信してもらう形になります。

 

実際の記述方法

バージョンによって違いますが、基本的な記述はこのようになります。

 

※バージョン3.1.1

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

※バージョン2.2.4

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

※バージョン1.12.4

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

 

実際は上記のスクリプトタグをHtmlのヘッド部分に記述することになります。

 

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

 

 

終わり