logo

NOTE BOOK

HTML5/CSS3の授業ノート

jQuery

Date.2022.3.12

JavaScript/jQueryについて

ここまで、HTMLでマークアップした文書をCSSでレイアウトしてWEBサイトを作る勉強をしてきました。
WEBページの「動き」を作るにはJavaScriptが必要になります。
CSS3ではアニメーションが使えるようになり装飾的な小さな動き(クリックされたらその要素の色が変わる、など)をつけることはできるようになりましたが、文章の内容などページの要素そのものを書き換えたりすることはできません。
HTML内にプログラムを埋め込むことで、Webページに様々な機能を付加して「クリックされたら○○する」などのユーザーの動きに応じたものを作ることができます。

JavaScriptってなに？

JavaScriptはたくさんあるプログラム言語のうちの一つで、JSと略されたりもします。「Java」と略するのは間違いです。
同じ名前を冠してはいますが元々は開発元が異なり、のちにその開発元が合併したことで改名したため大変ややこしいのですが、全く別物なので間違えないようにしましょう。

jQueryってなに？

jQueryはJavaScriptのライブラリの一つです。よく使う機能をひとまとめにして部品化して、簡単に記述できるようにしたものです。
JavaScriptではCSSと同じようにブラウザの種類ごとに実装差異があり、全部のブラウザで同じ動作をさせるとなると記述が難しいという難点がありました。
jQueryはブラウザごとの違いを吸収して、より簡単にプログラミングできるように設計されています。

ざっくり言うと…

JavaScriptは「魔法の書」を持っていなくても、ものすごく長い呪文を間違えなく唱えられれば使える呪文です。
jQueryは短い呪文で簡単に唱えられる魔法ですが、「魔法の書」を持っていないと使えません。重たい本なのでページの読み込みや処理は多少遅くなります。

このサイトではjQueryを学んでいきます。

jQueryの使い方

1.導入方法(魔法の書を手に入れる)

jQuery公式サイトからダウンロードして、自サイトのフォルダの中に置く。オフラインでも表示できるためこの方法がおすすめです。
公式ページから最新版を入手

jQueryの公式サイトから最新版を入手

またはCDN(コンテンツデリバリーネットワーク)経由で読み込みする方法もあります。

どちらの場合も<script type="text/javascript" src="ファイルのパス"></script>で読み込む。
<head>内に記述するのが一般的だが、サイトの表示が遅くなるので最近は</body>の直前に記述することが多い。 
<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>JavaScript/jQueryについて</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
〜〜〜〜〜〜〜〜〜〜
〜〜〜〜〜〜〜〜〜〜
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script>
/*プログラムの内容*/
$(function(){
	$("セレクター").jQueryの命令;
});
</script>
</body>
</html>

2.jQueryの書き方

$(function(){
	$("セレクター").jQueryの命令;
});

一行めは$(document).ready(function(){　の略で、読み込みを待ってから実行する。と言う意味です。
HTMLは上から順番に読んでいくため、記述の場所によってはHTML要素より先にjQueryを実行しようとして上手くいかないことがあるので、HTMLの読み込みが完了するまで待機させることができます。

2行目は、HTMLのどの要素を操作するかをセレクターで指定し、操作する内容を書きます。