読者です 読者をやめる 読者になる 読者になる

求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

jQuery基礎

jQuery

jQueryとは?

jQuery(ジェイクエリー)とは、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。様々な場面で活用されており、JavaScriptライブラリのデファクトスタンダードと呼ぶ者もいる。

f:id:yachin29:20160912224018j:plain
https://jquery.com/

jQueryを使うメリット

  • ライブラリを使用する事でJavaScriptに比べ簡潔かつ短い記述で済む。
  • ブラウザ間の挙動の差異をなくすように元々設計されている。
  • 多くのサイト制作者が使っているので、ネット上に多くの情報が公開されている。

jQueryを使うデメリット

  • 使うコードも使わないコードもすべてまとめてライブラリになっている為、サイト全体のパフォーマンス低下に繫がる。

jQueryライブラリの使い方

ダウンロードして使う場合

公式サイトからダウンロードしましょう。jQueryには1.x系、2.x系、3.x系と大きく分けて3種類あります。

  • 1.x系 IE8以前の古いブラウザーに対応
  • 2.x系 古いブラウザーが非対応
  • 3.x系 今まで1.x系、2.x系に分かれてたバージョンを3.x系に統一されていきます。

compressed~……改行などを除去してファイルサイズを抑えたファイル
uncompressed~……圧縮前の元ファイル。構造が見やすい

CDNを利用する

CDN(Contents Delivery Network, CDN)とは、ファイルや画像といったWEBコンテンツをインターネット経由で配信するために最適化されたネットワークのことです。
サーバーが世界各地に分散しているので、最適なパフォーマンスを訪問者に提供することができ、一度ダウンロードしたWEBコンテンツはキャッシュされるので、再ダウンロードする必要がないといった利点もあります。


jQuery CDN

Google CDN


記述方法

head内に記述

<head>
 ・・・
<script src="js/jquery-1.11.3.min.js"></script>
</head>

body内に記述

<body>
 ・・・
<script src="js/jquery-1.11.3.min.js"></script>
</body>

基本形

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
  //jQueryを利用したコード
</script>
</head>
<body>

</body>
</html>


ネットワーク上のデータであるCDNを使用する際に気を付けなければいけないのが、CDN側のサーバーが万が一トラブルを起こして繋がらなくなってしまった時です。
そういう場合の為に保険として自前のjQueryファイルとCDNの両方を併記する方法もあります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
	(window.jQuery || document.write('<script src="../js/jquery-1.11.3.min.js"><\/script>'));
</script>
<script>
  //jQueryを利用したコード
</script>
</head>
<body>

</body>
</html>
広告を非表示にする