jQuery（ジェイクエリー）とは、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月にリリースした。様々な場面で活用されており、JavaScriptライブラリのスタンダードと呼ぶ者もいる
jQueryの特徴
jQueryの使い方
jQueryを使用する際には、まずjQuery本体をダウンロード、もしくはCDN（Content Delivery Network）を使い、HTMLファイルにリンクさせる必要があります。
jQuery本体はバージョンが1系と2系に分類されていて、2系は1系に比べIE8以前のサポートを除いたことでより軽量化を図っています。（※なので2系を使っているWEBサイトはIE8未満ではjQueryは動きません）
本体をダウンロードして使う場合
上記のjQuery公式サイトからダウンロードしましょう。jQueryはバージョンにより動かないメソッドがあるのでバージョンコントロールが必要です。
古いjQueryのバージョンはこちらからダウンロード出来ます
https://code.jquery.com/jquery/code.jquery.com
また、公式サイトからダウンロードする際に「compressed」と「uncompressed」の２種類のファイルが用意されています。
- compressed～……改行などを除去してファイルサイズを抑えたファイル
- uncompressed～……圧縮前の元ファイル。構造が見やすいがファイルサイズは大きい
通常、jQuery本体の記述を触る事はほとんど無いので、ファイルにサイズの軽い「compressed」版を使用しましょう。
本体をCDNで使う場合
CDN(Content Delivery Network)とは、ネットワーク経由でコンテンツを提供するサービスで、jQuery本体をダウンロードする事無くネットワーク上にあるjQuery本体を使用する方法です。
CDNを使用する場合のメリットは、他のサイトでも同じCDNのjQuery本体を使用している場合、ユーザーがそのサイトを先に閲覧してればブラウザにキャッシュされるのでjQueryを読み込む必要が無い。つまり、使うサイトが多いほど事前にキャッシュされてる可能性が上がります。
CDNの場合、一見メリットだらけのように見えますが、CDN元でシステムトラブルがあったり、ネットワークが不安定な所では動かないので注意が必要です。またCDNの場合は、Minified（改行が除かれた圧縮版）を使用しましょう。
CDNはjQueryの公式サイト以外にもGoogleやMicrosoftにも用意されています。
https://www.asp.net/ajax/cdn#jQuery_Releases_on_the_CDN_0www.asp.net
記述方法
HTMLファイルは上から順番に読み込まれるという原則から、jQueryを使用する際は必ずjQuery本体を最初に記述しましょう。
jQuery本体をダウンロードしている場合
<head> ・・・ <script src="js/jquery-1.11.0.min.js"></script> </head>
もしくは
<body> ・・・ <script src="js/jquery-1.11.0.min.js"></script> </body>
CDNの場合
<head> ・・・ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> </head>
基本形
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="js/jquery-1.11.0.min.js"></script> <script> //jQueryを利用したコード </script> </head> <body> </body> </html>
CDNを使用する場合、万が一ネットワークが不安定になった時の事も考えて、バックアップ用にダウンロードしたjQueryと両方を記述する方法もあります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> window.jQuery || document.write('<script src="jquery-1.11.0.min.js"><\/script>');</script> </script> </head> <body> </body> </html>
