jQueryとは

jQueryとは

  • よく使うJavaScriptを簡単に使えるようにしたもの
  • JavaScriptのライブラリのひとつ
  • HTMLやCSSを操作して、要素・属性・スタイルを追加・変更・削除できる
  • 要素に対してアニメーションできる
  • 主要なブラウザをサポート(ブラウザ依存を気にしなくてよい)
  • 記述の仕方は、CSSに似ている
  • オープンソース(MITライセンス+GPLライセンス
  • 「Write Less, Do More」がモットー
  • jQueryのバージョンは、1.x系と2.x系と3.x系に分類できます
  • jQuery2以降は、IE8以前のサポートを除いたことで、より軽量化を図っています
  • http://iquery.com/

f:id:pbhfq:20170617205801p:plain

デザイナーのためのjQuery
  • 「メニューの開閉」「要素の非表示・表示」「画像のポップアップ表示」などWebページの表示されているものに対しての操作が中心
プログラマーのためのjQuery
  • Ajax通信やForm関連のエラーチェックやプラグインの開発など多岐にわたります


Ajax通信

  • Googleマップなどに使われた、Webページの情報をAjaxで表面に見えないところで読み込まれ、ユーザーの操作によって情報を変化させる手法

jQueryを導入したい

ダウンロードして利用する場合
  • 3.xは旧ブラウザには対応していません
  • compressed〜……改行などを除去してファイルサイズを抑えたファイル
  • uncompressed〜……圧縮前の元ファイル。構造が見やすい

head内に記述

  • 管理フォルダーの「js」フォルダー内に保存してパスを記述します
<script src="js/jquery-2.24.min.js"></script>
  • 外部にあるソースのリンクを利用する場合
CDNを利用する
  • Content Delivery Network
  • ネットワーク経由でコンテンツを提供するサービス
  • Minified(改行が除かれた圧縮版)
  • Google Ajax API CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>


《基本形》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>

<script>
  //jQueryを利用したコード
</script>
</body>
</html>

CDNの障害に備えて記述する場合
  • あらかじめ jQuery-3.2.1.min.jsダウンロードしておく
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/jquery-2.24.min.js"><\/script>');</script>
</script>
</head>
<body>

</body>
</html>

HTTP/HTTPSに対応する方法

developers.google.com

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

求職者支援訓練 フェリカテクニカルアカデミー