macoblog

「ゲーム × プログラミング」で生きていく

毎週金曜夜22時〜LIVEやってます

【2018年版】jQuery最新の読み込みスクリプト「コピペOK+裏技」

JavaScript プログラミング

Maco(筆者)
「jQueryのライブラリを読み込ませるの忘れてた、ってスクリプト自体忘たわ。いちいちググるのめんどくせーー!、、、記事で残しとこ」

jQueryをGoogleのCDN経由で読み込ませるスクリプトを備忘録として残しておきます、ご自由にご利用ください。

目次【本記事の内容】

スポンサードサーチ


jQueryをGoogleのCDN経由で読み込む方法【おさらい】

初心者の方もいると思うのでちょっとだけ解説しておきます。

jQueryを使うにはjQuery本体をダウンロードして読み込む方法と、CDNを経由して使う方法があります。

CDNを経由する方法であればjQueryをダウンロードする必要はなく、headタグ内にスクリプトタグをコピペするだけでjQueryが使えるようになります。

コピペするスクリプトタグについてはこれから解説しますので、環境に合わせてご利用ください。

jQuery 3.x【最新バージョン:3系】

バージョン3系は今までのjQueryに改良を加えた最新バージョンです、特に理由がなければ下記をheadにコピペすればOKです。

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

jQuery3系で使えるバージョン一覧

src(url)で指定している数字の部分は下記バージョンに変更することができます。

3.3.1, 3.3.0, 3.2.1, 3.2.0, 3.1.1, 3.1.0, 3.0.0

jQuery 2.x【使い分け用:2系】

ぶっちゃけバージョン2系は使う機会少なめかと、、、

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

jQuery2系で使えるバージョン一覧

src(url)で指定している数字の部分は下記バージョンに変更することができます。

2.2.4, 2.2.3, 2.2.2, 2.2.1, 2.2.0, 2.1.4, 2.1.3, 2.1.1, 2.1.0, 2.0.3, 2.0.2, 2.0.1, 2.0.0

jQuery 1.x【旧ブラウザ対策:1系】

一番古いバージョン1系は使う機会なんてないと思われがちですが、古いブラウザの場合こっちじゃないとjQueryが動作しない場合があります。

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

jQuery1系で使えるバージョン一覧

src(url)で指定している数字の部分は下記バージョンに変更することができます。

1.12.4, 1.12.3, 1.12.2, 1.12.1, 1.12.0, 1.11.3, 1.11.2, 1.11.1, 1.11.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3

裏技:コンソールから読み込ませる方法

ブラウザのコンソールからjQueryを打ち込んで動かしてみたい、でもこのサイトにはjQueryが入ってないから使えない。

こんな時に使える裏技があります、jQueryを読み込んでいないサイトでもjQueryを動かせるようになります。

デベロッパーツール(コンソール)で下記コードを実行

document.body.appendChild((function(){
  var jq = document.createElement("script");
  jq.src = '//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js';
  return jq;
})());

これでjQueryを読み込ませることができます、詳しいことについては「デベロッパーツールでjQueryが使えない時はこれ【コピペOK】」で解説していますので参考にどうぞ。

記事は以上になります。

人気記事無料体験が受けられるプログラミングスクール7社。現役エンジニアが厳選

人気記事「派遣社員からプログラマーへ」←その過程で読んだ勉強本まとめ