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

jQueryのライブラリ読み込ませるの忘れてた!ってスクリプト自体忘れたわ。いちいちググるのめんどくせーから記事で残しとこ、初心者の方にはきっと需要があるはず。
目次【本記事の内容】
jQueryをGoogleのCDN経由で読み込む方法【おさらい】
プログラミング初心者のためにjQueryについて超簡単におさらいしておきます、jQueryを使うには「①:jQuery本体をダウンロードして読み込む方法」と、「②:CDNを経由して使う方法」の2つ存在します。
①jQuery本体をダウンロードして読み込む方法は、jQueryの公式サイトにある「Download jQuery」からライブラリを保存して適時パスを通して使用する形になります、本番サイトなど公開時にはこっちの方が好ましいです。
②CDNを経由する方法であればjQueryをダウンロードする必要はありません、head
タグ内に専用のスクリプトタグをコピペするだけでjQueryが使えるようになります(スクリプトに関しては本記事で紹介しています)
jQuery 3.x【最新3.7.0:3系】
バージョン3系は今までのjQueryに改良を加えた最新バージョンです、特別な理由がない限りは3系の最新を利用するのが無難、下記のスクリプトをhead
にコピペするだけで使えます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
jQuery3系で使えるバージョン一覧
src(url)で指定している数字の部分は下記バージョンに変更することができます。使用しているプラグインに応じて使い分けるといいでしょう。
3.7.0, 3.6.4, 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【使い分け用:2系】
ぶっちゃけバージョン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を動かせるようになります。
デベロッパーツール(コンソール)で下記コードを実行
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】」で解説していますので参考にどうぞ。
記事は以上になります。