こんにちは！
今日も頑張ろう

Lesson-14
jQuery を記述しましょう

L12.3 jQuery 基本仕様

L12.3.1 事前準備

(1) jQuery のダウンロードと読み込み

jQuery を使用する場合は、jQuery の読み込みが必要です。jQuery の読み込みは、head タグ内または body タグ内に記述することができますが jQuery を使用したスクリプト（JavaScript）の前に記述する必要があります。
jQuery の読み込みは、jQuery をダウンロードして自サイト内に配置する方法と CDN を使用する方法があります。CDN を使用することでダウンロードの手間を減らすと同時に自サーバーの負荷軽減や読み込み速度の高速化を行うことができます。
jQuery をダウンロードする場合は、以下の手順で行ってください。
1. Query の公式サイト（jQuery（英語サイト）（https://jquery.com/））を表示します。
2. 「Download jQuery」をクリックします。
3. 「Download the compressed, production jQuery x.x.x」を右クリックして「名前を付けてリンク先を保存...」を指定します。
jQuery には、compressed（圧縮版）と uncompressed（非圧縮版）があります。処理内容は同じですが以下の違いがあります。
- compressed（圧縮版）
  - コメントやスペース、タブなどを取り除いてファイルサイズを最小限にしたものです。
  - ファイルサイズが小さいのでページ読み込みの負荷が減少されます。
- uncompressed（非圧縮版）
  - コメントやスペース、タブなどが入っておりソースコードを調べる（参照する）のに適しています。
  - ファイルサイズが大きいいのでページ読み込みの負荷がかかります。

(2) jQuery 読み込み例（自サイト内に配置）

jQuery をダウンロードして自サイト内に配置する場合は、以下の記述を行います。

一般的に外部の JavaScript ファイルは、「js」フォルダ配下に格納します。
script タグは、head タグ内に記述する場合と body タグ内に記述する場合があります。
機能指示用 JavaScript は、外部ファイルに記述されることもあります。

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>（Webサイトタイトル）</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/（必要に応じて関連ライブラリィ用CSSを指定）" type="text/css">

<!-- 記述例 [1]：head タグ内に記述 -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/（必要に応じて関連ライブラリィを指定）"></script>
<script>
（機能指示用 JavaScript を記述）
</script>
</head>

<body>
（表示する文書タグを記述）

<!-- 記述例 [2]：bodyタグ内に記述 -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/（必要に応じて関連ライブラリィを指定）"></script>
<script>
（機能指示用 JavaScript を記述）
</script>
</body>
</html>

(3) jQuery 読み込み例（CDN を使用）

CDN を使用する場合は、以下の記述を行います。本例では、Google の CDN を使用しています。

script タグは、head タグ内に記述する場合と body タグ内に記述する場合があります。
機能指示用 JavaScript は、外部ファイルに記述されることもあります。

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>（Webサイトタイトル）</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/（必要に応じて関連ライブラリィ用CSSを指定）" type="text/css">

<!-- 記述例 [1]：head タグ内に記述 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/（必要に応じて関連ライブラリィを指定）"></script>
<script>
（機能指示用 JavaScript を記述）
</script>
</head>

<body>
（表示する文書タグを記述）

<!-- 記述例 [2]：bodyタグ内に記述 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/（必要に応じて関連ライブラリィを指定）"></script>
<script>
（機能指示用 JavaScript を記述）
</script>
</body>
</html>

L12.3.2 jQuery 記述型式

(1) jQuery の呼び出し

jQuery を呼び出し時は、JavaScript 内で以下の記述を行います。


// jQuery の記述型式
$(...)
jQuery(...) 							// 上記と同じ意味

// ... の部分は記述するものによって意味が異なります。
$(セレクタ, コンテキスト)
$(エレメント)
$(配列エレメント)
$(オブジェクト)
$(jQuery オブジェクト)
$()

// jQuery 記述の例
// セレクタ（対象要素）にイベント（何か）があったら アクション（処理）する
$(セレクタ).on("イベント", (function() { アクション });
$(セレクタ).イベント(function() { アクション });

// #id1 がクリックされたら #id2 の "CSS に color: red" を指定
$("#id1").on("click", function(){ $("#id2").css("color", "red"); });
$("#id1").click(function(){ $("#id2").css("color", "red"); });

L12.3.3 セレクタ

主要なセレクタの記述方法は、以下の通りです。

記述型式	使用例	意味
全ての要素	$("*")	全ての要素
型指定	$("div")	div 要素
id 指定	$("#id1")	#id1 の要素
class 指定	$(".class1")	.class1 の要素
子孫結合指定	$("#id1 div")	#id1 名配下の div 要素
直下の子指定	$("#id1 > div")	#id1 名直下の div 要素
最初の子指定	$("p:first-child")	最初の p 要素
最後の子指定	$("p:last-child")	最後の p 要素
n 番目の子指定	$("p:nth-child(2)")	2 番目の p 要素
属性指定1	$("a[href]")	href 属性が指定されている a 要素
属性指定2	$("[name='name1']")	name 属性が name1 の要素
属性指定3	$("[href='#fref1']")	href 属性が #ref1 の要素
属性指定4	$("[href!='#fref1']")	href 属性が #ref1 以外の要素
n 番目指定	$("p:eq(2)")	3 番目の p 要素（最初は 0）
奇数番目指定	$("tr:odd")	奇数番目の tr 要素
偶数番目指定	$("tr:even")	偶数番目の tr 要素
複数指定	$(".class1,.class2,.class3")	.class1 と .class2 と .class3 の要素

L12.3.4 トラバースメソッド

要素の複数選択や絞り込みを行うトラバースの記述方法は、以下の通りです。

記述型式	使用例	意味
親要素指定	$("#id1").parent()	#id1 の親要素
先祖要素指定	$("#id1").parents()	#id1 の先祖要素
もっとも近い先祖要素指定	$("li.class1").closest("ul")	.class1 が指定されている li のもっとも近い ul 要素
子要素指定	$(".class1").children("p")	.class1 の子要素の p 要素
小孫要素指定	$(".class1").find("p")	.class1 の子孫要素の p 要素
前の兄弟要素指定	$(".class1").prev()	.class1 の前の兄弟要素
後ろの兄弟要素指定	$(".class1").next()	.class1 の後ろの兄弟要素
前の全ての兄弟要素指定	$(".class1").prevAll()	.class1 の前の全ての兄弟要素
後ろの全ての兄弟要素指定	$(".class1").nextAll()	.class1 の後ろの全ての兄弟要素
合致する要素指定	$(".class1").filter(".class2")	.class1 の中から .class2 に合致する要素
合致しない要素指定	$(".class1").not(".class2")	.class1 の中から .class2 に合致しない要素
最初の要素指定	$(".class1").first()	.class1 の最初の要素
最後の要素指定	$(".class1").last()	.class1 の最後の要素
最初から n 番目の要素指定	$(".class1").eq(2)	.class1 の中で最初から 3 番目の要素（最初は 0）
最後から n 番目の要素指定	$(".class1").eq(-2)	.class1 の中で最後から 2 番目の要素（最後は -1）
指定範囲の要素指定	$(".class1").slice(0, 3)	.class1 の中の 0, 1, 2 番目の要素（最初は 0 ／最後は -1／第 2 引数は未満値を指定）
加えた要素指定	$(".class1").add(".class2")	.class1 に .class2 を加えた要素
操作する前の要素指定	$(".class1").next().css("color", "red").end().css("color", "blue")	.class1 の次の要素の文字色を赤、操作前の要素の文字色を青に設定（操作は .next() や .find() が対象）
合致する要素の検査	$(".class1").is(".class2")	.class1 の中に .class2 に合致する要素があるかを検査し true / false を返却

L12.3.5 イベント

イベント発生時の処理の記述方法は、以下の通りです。


要素.on(イベント名, セレクタ, データ, 関数)

イベント名は、処理するイベント種別を指定します。イベント種別の後ろにピリオド（.）を付けてネームスペースを指定することができます。以下は、主要なイベント種別です。

change
フォーム部品の状態に変化があった時

click
要素がクリックされた時

forcus
要素にフォーカスがあたった時

blur
要素のフォーカルが外れた時

load
ドキュメントが読み込まれた後

resize
ウィンドウサイズが変化した時

scroll
画面がスクロールした時

keypress
キーボードのキーが押されている時（継続的に発生）

keydown
キーボードのキーが押された時（最初だけ発生）

keyup
キーボードのキーが離された時

mousedown
マウスボタンが押された時

mouseup
マウスボタンが離された時

mouseenter
マウスが入ってきた時

mouseleave
マウスが外れた時

mousemove
要素内でマウスが移動された時

submit
フォームが送信された時

error
何らかのJavaScriptエラーが発生した時
セレクタは、要素の内でさらに指定した要素だけを絞り込む時に指定します。
データは、処理関数に任意のデータを渡したい時に指定します。
関数は、イベント発生時に処理する関数を指定します。関数には、イベント情報が格納されているオブジェクトが引数として渡されます。以下は、主要なイベントオブジェクト内容です。

obj.type
change や click などのイベント種別を示します。

obj.target
イベントが発生した要素を示します。イベントハンドラを設定した要素または子要素になります。this と obj.target を比較することで、イベントが要素で発生したか子要素で発生したかを識別することができます。

obj.data
イベント設定時に指定したデータを示します。

obj.pageX
マウスイベントが発生したページ上のX位置を示します。

obj.pageY
マウスイベントが発生したページ上のY位置を示します。

obj.which
キーボードイベントの場合はキーコードが、マウスイベントの場合はボタン種別（1：左ボタン、2：中ボタン、3：右ボタン）を示します。

obj.result
他のイベントハンドラから返却された値（undefined 以外のもの）し示します。

obj.namespace
イベントのネームスペースを示します。

obj.timeStamp
イベントの発生時刻を示します。時刻は、1970年1月1日0時0分0秒(GMT)からの秒数で示されます。

記述例


// ボタンがクリックされた場合の処理
$("button").on("click", function() {
	// ボタンがクリックされた時の処理
})

// ボタンにマウスが侵入したかクリックされた場合の処理
$("button").on("click mouseenter", function() {
	// ボタンにマウスが侵入したかクリックされた時の処理
})

// 処理関数にデータ渡す場合の処理（data プロパティで参照）
$("#one").on("click", {name: "太郎"}, showText);
$("#two").on("click", {name: "花子"}, showText);

function showText(e) {
	console.log(e.data.name + "です。");
}

// 子要素に発生するイベントの処理（下記の HTML を想定）
// 	<ul>
// 		<li>リスト1<li>
// 		<li>リスト2<li>
// 		<li>リスト3<li>
// 	</ul>
// ul に対する 1 つのイベントで済みます。
// li 要素の個数が動的に変化しても対応可能です。
$("ul").on("click", "li", function() {
	// li 要素がクリックされた時の処理
})

// オンマウス／オフマウスの処理
$("button").on({
	"mouseenter": function() {
		// マウスが入って来た時の処理
	},
	"mouseleave": function() {
		// マウスが離れていった時の処理
	}
})

// click イベント処理の削除
$("button").off("click");

L12.3.6 属性・値

HTML の属性や値の参照や設定を行う場合の記述方法は、以下の通りです。

要素.attr(属性): 属性の参照
要素.attr(属性, 値): 属性に値の設定
要素.attr(属性リスト): 複数属性に値の設定
要素.removeAttr(属性): 属性の削除（空白で区切って複数の指定可）
要素.prop(プロパティ): JavaScript プロパティの参照
要素.prop(プロパティ, 値): JavaScript プロパティの設定
要素.prop(プロパティリスト)): 複数 JavaScript プロパティの設定
要素.removeProp(プロパティ): JavaScript プロパティの削除
要素.html(値): HTML 文字列の参照・設定
要素.text(値): 文字列の参照・設定
要素.val(値): フォーム要素の参照・設定
要素.addClass(値): 要素にクラス名の追加
要素.removeClass(値): 要素からクラス名の削除
要素.hasClass(値): 要素にクラス名があるかの検査し true / false を返却
要素.toggleClass(値): 要素にクラス名がある場合は削除し、ない場合は追加

記述例


// 属性の値を参照
value1 = $("img.img1").attr("src");

// 属性に値を設定
$("img.img1").attr("src", "images/photo1.jpg");

// 複数の属性に値を設定
$("img.img1").attr({
	src: "images/photo1.jpg",
	width: "100",
	height: "100"
});

// 属性の削除
$("img.img1").removeAttr("width height");

// attr と prop の違い（href 属性）（以下の HTML を想定）
// 	<a id="id1" href="#jump1">Jump Label</a>
value1 = $("#id1").attr("href");		// "#jump1" を返却
value1 = $("#id1").prop("href");		// "http://sample.com/index.html#jump1" を返却

// attr と prop の違い（checked 属性）（以下の HTML を想定）
// 	<input id="id1" type="checkbox" checked>
value1 = $("#id1").attr("checked");		// "checked" を返却
value1 = $("#id1").prop("checked");		// true を返却

// HTML 文字列を参照（以下の HTML を想定）
// 	<p id="id1"><b>Text1</b></p>
value1 = $("#id1").html();				// "<b>Text1</b>" を返却

// HTML 文字列を設定（以下の HTML を想定）
// 	<p id="id1"><b>Text1</b></p>
$("#id1").html("<i>Text2</i>");			// "<p id="id1"><i>Text2</i></p>" に変更

// 文字列を参照（以下の HTML を想定）
// 	<p id="id1"><b>Text1</b></p>
value1 = $("#id1").text();				// "Text1" を返却

// 文字列を設定（以下の HTML を想定）
// 	<p id="id1"><b>Text1</b></p>
$("#id1").text("<i>Text2</i>");			// "<p id="id1">&lt;i&gt;Text2&lt;/i&gt;</p>" に変更

// フォーム要素の値の参照
value1 = $("input#id1").val();

// フォーム要素の値の設定
$("input#id1").val("value1");

// フォーム要素（checkbox、radio ボタン）の参照
value1 = $("input[name='color1']:checked").val();

// フォーム要素（checkbox、radio ボタン）の設定（配列を使用）
$("input[name='color1']").val(["Check1"]);

// クラス名の追加
$("#id1").addClass("class1");

// クラス名の削除
$("#id1").removeClass("class1");

// クラス名があるかの検査
value1 $("#id1").hasClass("class1");	// class1 がある場合は true ない場合は false を返却

// クラス名の設定の反転
$("#id1").toggleClass("class1");		// class1 がある場合は削除し、ない場合は追加

L12.3.7 スタイルシート

スタイルシートの参照や設定を行う場合の記述方法は、以下の通りです。

要素.css(プロパティ): CSS のプロパティの値を参照
要素.css(プロパティ, 値): CSS のプロパティに値を設定
要素.css(プロパティリスト): CSS の複数プロパティに値を設定
要素.width(): 要素の横幅（パディングを含まない）を参照
要素.width(値): 要素の横幅（パディングを含まない）を設定
要素.innerWidth(): 要素の横幅（パディングを含む）を参照
要素.innerWidth(値): 要素の横幅（パディングを含む）を設定
要素.outerWidth(): 要素の横幅（ボーダーを含む）を参照
要素.outerWidth(値): 要素の横幅（ボーダーを含む）を設定
要素.outerWidth(true): 要素の横幅（マージンを含む）を参照
要素.height(): 要素の高さ（パディングを含まない）を参照
要素.height(値): 要素の高さ（パディングを含まない）を設定
要素.innerHeight(): 要素の高さ（パディングを含む）を参照
要素.innerHeight(値): 要素の高さ（パディングを含む）を設定
要素.outerHeight(): 要素の高さ（ボーダーを含む）を参照
要素.outerHeight(値): 要素の高さ（ボーダーを含む）を設定
要素.outerHeight(true): 要素の高さ（マージンを含む）を参照
要素.offset(): 要素の画面上の縦位置、横位置を参照
要素.offset(値): 要素の画面上の縦位置、横位置を設定
要素.position(): 要素の親要素からの相対位置を参照
要素.scrollTop(): 要素の縦方向のスクロール位置を参照
要素.scrollTop(値): 要素の縦方向のスクロール位置を設定
要素.scrollLeft(): 要素の横方向のスクロール位置を参照
要素.scrollLeft(値): 要素の横方向のスクロール位置を設定

記述例


// CSS のプロパティの値の参照
value1 = $("#id1").css("color");		// #id1 の color プロパティの値を value1 に格納

// CSS のプロパティの値の設定
$("#id1").css("color", "red");			// #id1 の color プロパティに red を設定

// 要素の横幅（パディングを含まない）を参照
value1 = $("#id1").width();				// #id1 の横幅を value1 に格納

// 要素の横幅（パディングを含まない）を設定
$("#id1").width(200);

// 要素の横幅（パディングを含む）を参照
value1 = $("#id1").innerWidth();

// 要素の横幅（ボーダーを含む）を参照
value1 = $("#id1").outerWidth();

// 要素の横幅（マージンを含む）を参照
value1 = $("#id1").outerWidth(true);

// 要素の高さ（パディングを含まない）を参照
value1 = $("#id1").height();

// 要素の画面上の位置を参照
value1 = $("#id1").offset();			// #id1 の画面上の位置（value1.top：縦位置、value1.left：横位置）を参照

// 要素の画面上の位置を設定
$("#id1").offset({						// #id1 の画面上の位置（縦位置：200、横位置：100）を設定
	top: 200,
	left: 100
});

// 要素の親要素からの相対位置を参照
value1 = $("#id1").position();			// #id1 の親要素からの相対位置（value1.top：縦位置、value1.left：横位置）を参照

// 要素の縦方向のスクロール位置を参照
value1 = $("#id1").scrollTop();			// #id1 の縦方向のスクロール位置を参照

// 要素の横方向のスクロール位置を参照
value1 = $("#id1").scrollLeft();		// #id1 の横方向のスクロール位置を参照

L12.3.8 エフェクト

要素に効果を与える場合の記述方法は、以下の通りです。

要素.show([d][,e][,c]): 要素を表示にします。
要素.hide([d][,e][,c]): 要素を非表示にします。
要素.toggle([d][,e][,c]): 要素の表示／非表示を切り替えます。
要素.fadeIn([d][,e][,c]): 要素をフェードインします。
要素.fadeOut([d][,e][,c]): 要素をフェードアウトします。
要素.fadeTo(d, o[,e][,c]): 要素の透明度を徐々に変化させます。
要素.fadeToggle([d][,e][,c]): 要素がフェードインされていればフェードアウトし、フェードアウトされていればフェードインします。
要素.slideUp([d][,e][,c]): 要素をスライドアップします。
要素.slideDown([d][,e][,c]): 要素をスライドダウンします。
要素.slideToggle([d][,e][,c]): 要素がスライドアップされていればスライドダウンし、スライドダウンされていればスライドアップします。
要素.animete(p[,d][,e][,c]): 要素にアニメーション効果を適用します。

引数の意味は、以下の通りです。

カッコ（[...]）の引数は、カンマ（,）を含めて省略可能です。
d（duration）は、変化に要する時間をミリ秒単位で指定します。"fast"、"normal"、"slow" での指定も可能です。省略時は、400ms になります。
e（easing）は、変化速度の種別を指定します。"linear" はリニア、"swing" は最初ゆっくりで後半は早く変化します。省略時には "swing" になります。
c（complete）は、アニメーション完了時に呼び出す関数を指定します。
o（opacity）は、透明度を指定します。1.0 で完全表示、0.0 で完全透明を指定します。
p（properties）は、アニメーション完了後のプロパティを指定します。
d（duration）、e（easing）、c（complete）は、リスト型式の引数で指定することも可能であり、この時は、以下の値も指定可能です。

queue
アニメーション効果の開始をキューイングするか否かを true / false で指定します。

specialEasing
e（easing）をプロパティ別に指定します。

step
アニメーション実行中に定期的に呼び出される関数を指定します。

progress
アニメーション実行中に定期的に呼び出される関数を指定します。

記述例


// 要素を表示
$("#id1").show();

// 要素を非表示
$("#id1").hide();

// 要素の表示／非表示を切り替え
$("#id1").toggle();

// 要素をフェードイン
$("#id1").fadeIn();

// 要素をフェードアウト
$("#id1").fadeOut();

// 要素の透明度を変化
$("#id1").fadeTo("normal", 0.2);

// 要素のフェードイン／フェードアウトを切り替え
$("#id1").fadeToggle();

// 要素をスライドアップ
$("#id1").slideUp();

// 要素をスライドダウン
$("#id1").slideDown();

// 要素のスライドアップ／スライドダウンを切り替え
$("#id1").slideToggle();

// 要素のアニメーション効果を実施
$("#id1").animate({
	opacity: 0,
	width: "200px",
	height: "100px"
});

// 要素のアニメーション効果を実施（相対サイズ指定）
$("#id1").animate({
	opacity: 0,
	width: "+=100",
	height: "-=50"
});

// 要素のアニメーション効果を実施（基本属性を配列エレメントで指定）
$("#id1").animate({
	opacity: 0,
	width: "200px",
	height: "100px"
}, {
	duration: 1000,
	easing: 'linear',
	complete: function() { alert("Complete!");
});

L12.3.9 DOM 操作

DOM（Document Object Model）操作の記述方法は、以下の通りです。

要素.prepend(c[,c]): 要素の先頭にコンテンツ（c）を追加します。
要素.prependTo(t): 要素をターゲット（t）の先頭に追加します。（上記と同じ）
要素.append(c[,c]): 要素の末尾にコンテンツ（c）を追加します。
要素.appendTo(t): 要素をターゲット（t）の末尾に追加します。（上記と同じ）
要素.before(c[,c]): 要素の直前にコンテンツ（c）を追加します。
要素.insertBefore(t): 要素をターゲット（t）の直前に追加します。（上記と同じ）
要素.after(c[,c]): 要素の直後にコンテンツ（c）を追加します。
要素.insertAfter(t): 要素をターゲット（t）の直後に追加します。（上記と同じ）
要素.wrap(w): 要素をラッピングエレメント（w）で囲みます。
要素.wrapAll(w): 要素集合をラッピングエレメント（w）で囲みます。
要素.wrapInner(w): 要素のコンテンツをラッピングエレメント（w）で囲みます。
要素.replaceAll(t): ターゲット（t）を要素で置き換えます。
要素.replaceWith(c): 要素をコンテンツ（c）で置き換えます。
要素.remove([s]): 要素を削除します。セレクタ（s）に ":contains('文字列')" を指定すると文字列を含む要素だけを削除することができます。
要素.detach([s]): 要素を削除します。セレクタ（s）に ":contains('文字列')" を指定すると文字列を含む要素だけを削除することができます。remove は完全に削除されますが detach は、jQuery の要素として残り、再度挿入することができます。
要素.empty(): 要素の子孫要素をすべて削除します。
要素.unwrap(): 要素の親要素を削除します。

引数の意味は、以下の通りです。

カッコ（[...]）の引数は、カンマ（,）を含めて省略可能です。
c（Content／コンテンツ）は、"<b>コンテンツ</b>" のように記述します。
t（Target／ターゲット）は、"div" のように記述します。
w（Wrapping Element／ラッピングエレメント）は、"<div class='box' />" のように記述します。
s（Selector／セレクタ）は、"p" のように記述します。

記述例


// 要素の先頭にコンテンツを追加
// <p>...</p> → <p><b>コンテンツ</b>...</p>
$("p").prepend("<b>コンテンツ</b>");
$("<b>コンテンツ</b>").prependTo("p");

// 要素の末尾にコンテンツを追加
// <p>...</p> → <p>...<b>コンテンツ</b></p>
$("p").append("<b>コンテンツ</b>");
$("<b>コンテンツ</b>").appendTo("p");

// 要素の直前にコンテンツを追加
// <p>...</p> → <b>コンテンツ</b><p>...</p>
$("p").before("<b>コンテンツ</b>");
$("<b>コンテンツ</b>").insertBefore("p");

// 要素の直後にコンテンツを追加
// <p>...</p> → <p>...</p><b>コンテンツ</b>
$("p").after("<b>コンテンツ</b>");
$("<b>コンテンツ</b>").insertAfter("p");

// 要素をラッピングエレメントで囲む
// <p>...</p><p>...</p> → 
// <div class='class1'><p>...</p></div><div class='class1'><p>...</p></div>
$("p").wrap("<div class='class1' />");

// 要素集合をラッピングエレメントで囲む
// <p>...</p><p>...</p> → 
// <div class='class1'><p>...</p><p>...</p></div>
$("p").wrapAll("<div class='class1' />");

// 要素のコンテンツをラッピングエレメントで囲む
// <p>...</p> → <p><b class='class1'>...</b></p>
$("p").wrapInner("<b class='class1' />");

// ターゲットを要素で置き換え
// <div class='class1'>...</div> → <div class='class2'>コンテンツ</div>
$("<div class='class2'>コンテンツ</div>").replaceAll("div.class1");
$("div.class1").replaceWith("<div class='class2'>コンテンツ</div>");

// 要素の中からセレクタに合致する要素を削除
// セレクタを省略すると、すべての要素を削除します。
// remove は、削除に対して、detach は、jQuery 要素として残ります
// <div><p>...</p></div> → （削除）
$("div").remove();
$("div").detach();

// 要素の子孫要素をすべて削除
// <div><p><b>...</b></p></div> → <div></div>
$("div").empty();

// 要素の親要素を削除
// セレクタを省略すると、すべての要素を削除します
// <div><p>...</p></div> → <p>...</p>
$("p").unwrap("div");

L12.3.10 その他

その他の機能の記述方法は、以下の通りです。

要素.each(関数): 要素群に対して関数を実行します。
要素.get(インデックス): jQuery 要素群を JavaScript 要素群に変換します。
要素.toArray(): jQuery 要素群を JavaScript 配列に変換します。
要素.index(): 要素群の中でセレクタに合致する要素のインデックスを返します。
要素.data(値): 要素にデータ（key: value）を設定します。
要素.removeData(): 要素のデータを削除します。

記述例


// 要素群に対して関数の実行
$("div").each(function() {
	// 要素単位の処理
	alert($(this).html());
});

// jQuery 要素群を JavaScript 要素群に変換
obj = $("div").get();					// すべての要素を変換
obj = $("div").toArray();				// すべての要素を変換
obj = $("div").get(index);				// 指定した位置（0から）の要素を変換

// 要素のインデックス値を返却
value1 = $("#id1").index();				// インデックス値は 0 からの値

// 要素にデータ（key=data）を設定
$("#id1").data("key1", "data1");

// 要素にデータ（key=data）を設定（複数）
$("#id1").data({ "key1": "data1", "key2": "data2" });

// 要素のデータ（key=data）から値の取得
value1 = $("#id1").data("key1");		// "data1"

// 要素のデータ（key=data）からすべての値の取得
value1 = $("#id1").data();				// { "key1": "data1", "key2": "data2" }

// 要素からデータを削除
$("#id1").removeData("key1");

// 要素からデータを削除（複数）
$("#id1").removeData("key1", "key2");

// 要素からデータを削除（全て）
$("#id1").removeData();

L12.3.11 ユーティリティ

ユーティリティの機能の記述方法は、以下の通りです。

$.data(エレメント, キー, 値): エレメントにデータ（key: data）を設定します。
$.data(エレメント,): エレメントのデータ（key: data）を参照します。
$.trim(文字列): 文字列の前後のホワイトスペースを除去します。
$.parseJSON(値): 値を JSON と解釈してオブジェクトに変換します。
$.parseXML(値): 値を XML と解釈してオブジェクトに変換します。
$.parseHTML(値): 値を HTML と解釈して配列に変換します。
$.each(値, 関数): 値（配列やオブジェクト）の属性をひとつづつ処理します。
$.grep(値, 関数): 値（配列）から条件に合致するものを抜き出します。
$.unique(値): 値（DOM 要素の配列）から重複した要素を排除しソートします。

記述例


// document エレメントにデータ（key: data）を設定
$.data(docement, "key", "data");

// document エレメントにデータ（key）を参照
value1 = $.data(docement, "key");

// 文字列の前後のホワイトスペースを除去
value1 = $.trim("     abc     ");

// JSON のオブジェクトに変換・参照
// 変数名と値はダブルクォーテーション（"）で囲む必要あり
value1 = '{ "name":"tarou", "age":"20" }';
obj1 = $.parseJSON(value1);
value2 = obj1.name;
value3 = obj1.age;

// XML のオブジェクトに変換・参照
value1 = '<xml><name>tarou</name><age>20</age></xml>';
obj1 = $.parseXML(value1);
value2 = $(obj1).find("name").text();
value3 = $(obj1).find("age").text();

// HTML の配列に変換・参照
value1 = '<div class="name">tarou</div><div class="age">20</div>';
html1 = $.parseHTML(value1);
value2 = html[0];
value3 = html[1];

// 配列をひとつずつ処理
var array = [ "Red", "Green", "Blue" ];
$.each(array, function(index, val) {
	// 配列の項目単位の処理
	// index に配列のインデックス値、val に配列の値
	console.log(index + ":" + val);		// 0:Red, 1:Green, 2:Blue
});

// オブジェクトの属性をひとつずつ処理
var params = { height: "100px", width: "100px" };
$.each(params, function(key, val) {
	// オブジェクトの属性単位の処理
	// key に属性の key、val に属性の値
	console.log(key + "=" + val);		// height=100px, width:100px
});

// 配列から条件に合致するものを抜き出し
value1 = [ "sun", "mon", "tue", "wed", "thu", "fri", "sat" ];
value2 = $.grep(value1, function(value, index) {
	// 配列の項目単位の処理
	// value に配列の値、index に配列のインデックス値
	// 抜き出す場合は、true を返却、それ以外の場合は、false を返却
	// 引数に false を指定すると返却値の true と false の扱いが反転
	// 例：$.grep(value1, function(value, index) { ... }, false);
	return (value.match(/u/));
});

// DOM 要素の配列から重複した要素を排除しソート
// 以下の HTML を想定
// <div id="a" class="blue"></div>
// <div id="b" class="blue red"></div>
// <div id="c" class="blue red"></div>
// <div id="d" class="red"></div>
value1 = $(".blue").get();				// a, b, c
value2 = $(".red").get();				// b, c, d
value3 = value1.concat(value2);			// a, b, c, b, c, d
value4 = $.unique(value3);				// a, b, c, d

L12.3.12 jQuery のサンプル

(1) エフェクト関連サンプル

jQuery を使用してボックスに効果を適用するサンプルです。

ソースコード表示

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery サンプル</title>
<style>
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
.container {
	width: 100%;
	margin: 0 auto;
	padding: 20px 0;
	border: 1px #ccc solid;
}
.container h1 {
	padding: 0 0 20px 0;
	font-size: 28px;
	text-align: center;
}
.container ol li {
	margin: 0 0 10px 30px;
}
.container ol li button {
	display: inline-block;
	padding: 5px 10px;
	margin: 0 10px;
}
.container ol li div {
	padding: 10px 0;
}
.container ol li div p {
	width: 256px;
	height: 128px;
	background: url('images/jquery-256x128.jpg');
	background-size: cover;
	color: white;
	font-weight: bold;
	text-align: center;
}
</style>
</head>
<body>
	<div class="container">
		<h1>jQuery サンプル</h1>
		<ol>
			<li>文字の色や大きさが変わります。<button id="jq-01-on">実行</button><button id="jq-01-off">元に戻す</button>
				<div><p id="jq-01">jQuery サンプル</p></div>
			</li>
			<li>文字だけ消します。<button id="jq-02-on">実行</button><button id="jq-02-off">元に戻す</button>
				<div><p id="jq-02">jQuery サンプル</p></div>
			</li>
			<li>フェードアウトします。<button id="jq-03-on">実行</button><button id="jq-03-off">元に戻す</button>
				<div><p id="jq-03">jQuery サンプル</p></div>
			</li>
			<li>上にスライドします。<button id="jq-04-on">実行</button><button id="jq-04-off">元に戻す</button>
				<div><p id="jq-04">jQuery サンプル</p></div>
			</li>
			<li>透明にします。<button id="jq-05-on">実行</button><button id="jq-05-off">元に戻す</button>
				<div><p id="jq-05">jQuery サンプル</p></div>
			</li>
			<li>縮みます。<button id="jq-06-on">実行</button><button id="jq-06-off">元に戻す</button>
				<div><p id="jq-06">jQuery サンプル</p></div>
			</li>
			<li>消します。<button id="jq-07-on">実行</button><button id="jq-07-off">元に戻す</button>
				<div><p id="jq-07">jQuery サンプル</p></div>
			</li>
		</ol>
	</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('#jq-01-on').click(function(){
	$('#jq-01').css('transition', '2s');
	$('#jq-01').css('font-size', '1.5rem');
	$('#jq-01').css('color', 'red');
})
$('#jq-01-off').click(function(){
	$('#jq-01').css('transition', '2s');
	$('#jq-01').css('font-size', '1.0rem');
	$('#jq-01').css('color', 'white');
})
$('#jq-02-on').click(function(){
	$('#jq-02').css('transition', '2s');
	$('#jq-02').css('color', '#ffffff00');
})
$('#jq-02-off').click(function(){
	$('#jq-02').css('transition', '2s');
	$('#jq-02').css('color', '#ffffffff');
})
$('#jq-03-on').click(function(){
	$('#jq-03').fadeOut(2000);
})
$('#jq-03-off').click(function(){
	$('#jq-03').fadeIn(2000);
})
$('#jq-04-on').click(function(){
	$('#jq-04').slideUp(2000);
})
$('#jq-04-off').click(function(){
	$('#jq-04').slideDown(2000);
})
$('#jq-05-on').click(function(){
	$('#jq-05').fadeTo(2000, '0');

})
$('#jq-05-off').click(function(){
	$('#jq-05').fadeTo(2000, '1');
})
$('#jq-06-on').click(function(){
	$('#jq-06').css('transition', '2s');
	$('#jq-06').css('height', '0px');

})
$('#jq-06-off').click(function(){
	$('#jq-06').css('transition', '2s');
	$('#jq-06').css('height', '128px');
})
$('#jq-07-on').click(function(){
	$('#jq-07').hide();

})
$('#jq-07-off').click(function(){
	$('#jq-07').show();
})
</script>
</body>
</html>

※リロード（再描画）して確認してください。

リロード

PAGE
TOP

Lesson-14 jQuery を記述しましょう

目次

L12.3 jQuery 基本仕様

L12.3.1 事前準備

(1) jQuery のダウンロードと読み込み

(2) jQuery 読み込み例（自サイト内に配置）

(3) jQuery 読み込み例（CDN を使用）

L12.3.2 jQuery 記述型式

(1) jQuery の呼び出し

L12.3.3 セレクタ

L12.3.4 トラバースメソッド

L12.3.5 イベント

L12.3.6 属性・値

L12.3.7 スタイルシート

L12.3.8 エフェクト

L12.3.9 DOM 操作

L12.3.10 その他

L12.3.11 ユーティリティ

L12.3.12 jQuery のサンプル

(1) エフェクト関連サンプル

Lesson-14
jQuery を記述しましょう