こんにちは、「BRANCH FOR PRO」の中の人です。

今回は、「jQuery」について解説したいと思います。

対象読者は、「JavaScriptは知っているけれど、jQueryは使ったことがない人」です。

jQueryを使うための準備

先ずは、jQueryを使うための前準備をご説明します。

HTMLファイルにscriptタグで入れている場合の例は、次の通りとなります。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<!-- <link rel="stylesheet" href="css/style.css"> -->
		<title>jQueryの練習</title>
	</head>
	<body>
		<div id="wrapper">
			<p>テストです</p>
		</div>
		
		<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <!-- ここが「jQuery」を使うための準備です！ -->
		<script>
			<!--
			// JavaScriptのコード
			-->
		</script>
	</body>
</html>

普通のJavaScriptの前に、なんだか呪文めいた

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

が入っているのがお分かりかと思います。

これは、「jQueryをインターネットからダウンロードして、使う準備をします」という呪文です。

「src=”～～～”」と入っているので、「ローカルにダウンロードしておけばいいんじゃないの？」と思う方もいらっしゃると思います。

それでも動くのですが、色々なメリットがあるので（今回は深入りしませんが…）、敢えてインターネットからダウンロードする形にしています。

その次に現れている

<script>～</script>

には、通常のJavaScriptが書かれます。

「jQueryを準備した」とは言っても、普通の今までのJavaScriptが動かなくなるわけではないので、その点は大丈夫です。

jQueryを動かしていこう

では、次に簡単な例をお見せします。

<div id="wrapper">

内のpタグで囲まれたテキストの背景色を変更してみましょう。

先ず、普通のJavaScriptでは、次のようなコードになります。

<script>
	<!--
	window.onload = function() {
		element = document.querySelector('#wrapper p');
		element.style.backgroundColor = '#ff0000';
	}
	-->
</script>

では、jQueryで書き換えてみます。

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
	<!--
	$(function() {
		$('#wrapper p').css('background-color', '#ff0000');
	});
	-->
</script>

解説

JavaScriptは読み込まれた瞬間に実行されるので、どちらの例でもHTMLの読み込みが完了した時点で実行されるように指示しています。

通常のJavaScriptですと、

window.onload = function() {

となりますが、jQueryですと、もっと簡単に

$(function() {

となります。

これは、どちらも「おまじない」として覚えておきましょう。

次に、CSSのセレクタ形式で、要素（element）を選択しています。

通常のJavaScriptでは、「document.querySelector(‘#wapper p)」で要素を選択しますが、jQueryですと「$(‘#wapper p’)」とだけ書けば要素を選択できます。短いですね。

それからCSSでは、通常のJavaScriptでは「style.backgroundColor」というプロパティを操作しますが、jQueryではCSSでの書き方「background-color」を「ハイフンなし、ハイフンの次の文字列の最初の文字を大文字にする」という指定に書き換えなければなりません。

jQueryでは、「css()」メソッドで直接「(‘CSSので書き方’, ‘CSSの値’)」と素直に書けます。

あとは、対応するかっこを閉じて、プログラムを終了しています。

これだけですと、jQueryのありがたみが少ないのですが（かえって煩雑？）、「セレクタの指定が簡単」「CSSの指定が素直」という2点に注目してください。

次の記事では、JavaScriptの「textContent」をjQuery流に書き換える予定です。お楽しみに！