Web白描

jQueryとは

★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/

デザイナーのためのjQuery

「メニューの開閉」「要素の非表示・表示」「画像のポップアップ表示」などWebページの表示されているものに対しての操作が中心

プログラマーのためのjQuery

Ajax通信やForm関連のエラーチェックやプラグインの開発など多岐にわたります

Ajax通信

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

jQueryを導入したい

ダウンロードして利用する場合

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

CDNを利用する

Content Delivery Network
ネットワーク経由でコンテンツを提供するサービス
Minified（改行が除かれた圧縮版）
Google Ajax API CDN（https://developers.google.com/speed/libraries#jquery）

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

メリット

サーバーの負荷が軽くなる
表示する速度が上がる

つまり、CDNを使うと、ページを読み込む時間が短くなり、より快適なWebサイトを作ることが可能になります。

《基本形》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  //jQueryを利用したコード
</script>
</body>
</html>

HTTP/HTTPSに対応する方法

ライブラリをインポートする際、次のようにプロトコルを省略することで、現在のページに応じて「http://」「https://」を動的に切り替えられます
Hosted Libraries | Hosted Libraries | Google Developers

developers.google.com

はじめてのjQuery

Web制作の現場で使えるjQuery　UIデザイン入門

Progate

jQuery CDN

3.x snippet:

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

2.x snippet:

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

1.x snippet:

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

基本フォーマット

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの練習</title>
</head>
<body>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function(){

});
</script>
</body>
</html>