2023/01/06

【2023年版】jQuery最新は3.6.3／コピペで使えるスクリプトも紹介

JavaScript

うぇぶとまと

jQueryのライブラリ読み込ませるの忘れてた！ってスクリプト自体忘れたわ。いちいちググるのめんどくせーから記事で残しとこ、初心者の方にはきっと需要があるはず。

jQueryの最新バージョンは「3.6.3」となっています、GoogleのCDN経由で読み込ませるスクリプトを置いておきますのでご自由にご利用ください。

目次【本記事の内容】

１.jQueryをGoogleのCDN経由で読み込む方法
- ①：jQuery 3.x【最新3.6.3：３系】
- ②：jQuery 2.x【使い分け用：２系】
- ③：jQuery 1.x【旧ブラウザ対策：１系】
２.裏技：jQueryをコンソールから読み込ませる方法

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

プログラミング初心者のためにjQueryについて超簡単におさらいしておきます、jQueryを使うには「①：jQuery本体をダウンロードして読み込む方法」と、「②：CDNを経由して使う方法」の２つ存在します。

①jQuery本体をダウンロードして読み込む方法は、jQueryの公式サイトにある「Download jQuery」からライブラリを保存して適時パスを通して使用する形になります、本番サイトなど公開時にはこっちの方が好ましいです。

②CDNを経由する方法であればjQueryをダウンロードする必要はありません、headタグ内に専用のスクリプトタグをコピペするだけでjQueryが使えるようになります（スクリプトに関しては本記事で紹介しています）

jQuery 3.x【最新3.6.3：３系】

バージョン３系は今までのjQueryに改良を加えた最新バージョンです、特別な理由がない限りは３系の最新を利用するのが無難、下記のスクリプトをheadにコピペするだけで使えます。

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

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

src(url)で指定している数字の部分は下記バージョンに変更することができます。使用しているプラグインに応じて使い分けるといいでしょう。

3.6.3, 3.6.2, 3.6.1, 3.6.0, 3.5.1, 3.5.0, 3.4.1, 3.4.0, 3.3.1, 3.3.0, 3.2.1, 3.2.0, 3.1.1, 3.1.0, 3.0.0

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

ぶっちゃけバージョン２系は使う機会少なめかと思います、稀に２系じゃないと動作しないプラグインもありますので使い分け用と考えましょう。

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

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

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【旧ブラウザ対策：１系】

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

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

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

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を読み込んでいないサイトでも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】」で解説していますので参考にどうぞ。

記事は以上になります。

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

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

jQuery