鶏口牛後な日々

心の赴くまま、やりたいことを仕事に。

【jQuery】 headタグ内での基本の宣言

jQueryを使う時に、htmlのheadタグ内で宣言しておく必要がありますね。

いつも調べるのは面倒なので、備忘がてら、ここに貼っておきます。

 

1.ダウンロードする方法

jQueryのページに行きます。

jquery.com

ダウンロードタブをクリックして、ダウンロードのページを見ると、

たくさんのリンクが載っているのですが、基本選ぶべきは、

 

Download the compressed, production jQuery 3.1.1」

「Download the uncompressed, development jQuery 3.1.1」

が基本です。

 

f:id:TACOSVilledge:20170123103930p:plain

圧縮(Compress)されているものは、ファイルが軽く扱いやすいです。

もしjQuery事態をいじって使いたい場合は、圧縮されていないもの(Uncompressd)をダウンロードをします。

 

右クリックして、「リンク先を名前を付けて保存」を選んでダウンロードします。

jquery-3.1.1.min.js」というファイルがダウンロードされるので、

適用したいサイトのフォルダの中に入れます。

(よくあるのは、index.htmlと同階層にある、jqフォルダ内に配置する、など)

 

この場合は、ふつうのjavascriptと同じように、scriptタグでsrc属性をつけて配置したjsファイルを読み込みます。

 

 

2.CDNを使う方法(簡単!)

 

Conten Delivery Network(略してCDN)を使う。

これは、コンテンツ配信用に最適化されたネットワークのことで、様々な置き場にコンテンツを置いてくれている。

 

まずは、jQueryの公式CDN。ダウンロードページをスクロールしていくと、

jQuery's CDN」という段落がある。

f:id:TACOSVilledge:20170123121348p:plain

この黄色くしているリンクをクリックすると、

f:id:TACOSVilledge:20170123121646p:plain

といったページに飛びます。圧縮されてない(Uncompressed)などのリンクをクリックすると、コピペするコードを表示してくれます。

f:id:TACOSVilledge:20170123121754p:plain

 

ただし、integrity=・・・ というのと、crossorigin= ・・・という記述は、時に動作を悪くさせることがあるらしく、実務では入れないことも多いらしい。

つまり、

 

<script   src="https://code.jquery.com/jquery-3.1.1.js" ></script>

をheadタグ内に張り付けておけばOK。

 

-------------------------

 

CDNは、公式以外もいろいろなところに置いてくれています。

jQueryのページから、Other CDNs > Google CDN をクリックすると、

グーグルの開発者向けページに飛びます。

 

developers.google.com

ここにある、Snippetをコピーして、自分のhtmlに貼り付けするだけ! 

なんて簡単。

 

--------------

 

<!-- jQueryのライブラリ読み込み 注:ネット環境があるところでしか動作しない --> 

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

 

<!-- jQueryを記述している外部ファイル読み込み -->

<script type="text/javascript" src="scrollscript.js"></script>

 

--------------

 

ただし、こちらは、ネット環境でないと動かないことに注意が必要です。

 

基本、公式CDNであろうと、他社のCDNであろうと好き好きでOKとのこと。

仕事でGoogle関連なのにMicrosoftCDN使う、とかあえてしなければOKでしょう。

 

今(2017年1月時点)では、3.xが標準になりつつあります。

(2.xや1.xといった古いバージョン用のリンクも公開されています)

 

jQueryに触れたのは初めてでしたが、文法自体が人間が使う言葉に近い形で作られているように感じて、分かりやすかったです。
 

クリックや、ホバー、スクロール等で、いろいろな動作を起こすことができるようなので、ページに動きを出したい時に、かなりお世話になりそうな予感がします。

楽しみですね^^!

 

tacosvilledge.hatenablog.com

を試してみました。

 

 

jQuery最初に始めるとき、OZPAさんのページにて詳しく説明してくださっているので、ご覧下さい。

 

 

 

以上。