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

今回は「jQuery入門(2)」という事で、皆さんおなじみの「element.textContent」をjQuery流に書き換えてみましょう。

単に置き換えるだけではあまりにも寂しく、あまりにも解説することがないので、セレクタと絡めてご説明します。

書き換えを行う

先ずは、普通のJavaScriptの例を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<!-- <link rel="stylesheet" href="css/style.css"> -->
		<title>jQuery - textプロパティ</title>
	</head>
	<body>
		<div id="wrapper">
			<p>テキスト1</p>
			<p>テキスト2</p>
			<p>テキスト3</p>
			<p>テキスト4</p>
		</div>
		
		<script>
			<!--
			window.onload = function() { 
				elements = document.querySelectorAll('#wrapper p');
				
				for (i = 0; i < elements.length; i++) {
					elements[i].textContent = '書き換え後のテキスト';
				}
			}
			-->
		</script>
	</body>
<html>

この例では、最初に「document.querySelectorAll(‘#wrapper p’)」で、セレクタに合致するすべての要素を取得します。

次に、「for」文を回して、全ての要素の内容を書き換えています。

(要素の内容を書き換えるためには、「textContentプロパティ」を書き換えればいいのはご理解いただけますね?)

では、jQueryで書き換えたリストを次に示します。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<!-- <link rel="stylesheet" href="css/style.css"> -->
		<title>jQuery - textプロパティ</title>
	</head>
	<body>
		<div id="wrapper">
			<p>テキスト1</p>
			<p>テキスト2</p>
			<p>テキスト3</p>
			<p>テキスト4</p>
		</div>
		
		<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
		<script>
			<!--
			$(function() {
				$('#wrapper p').text('書き換え後のテキスト');
			});
			-->
		</script>
	</body>
<html>

これもすべての要素の内容を書き換えていますが、「for」文がありませんよね?

実は「textContent」の説明に絡めて、jQuery流のセレクタについて説明したかったのでした。(;^_^A

textContentの書き換え

では、「textContent」の書き換えについてですが、jQueryではプロパティではなく、「text()」メソッドで書き換えます。今回は「text(‘書き換え後のテキスト’)」とメソッドで指示していますので、要素の内容が、指定の通り書き換えられます。

では次に、セレクタについてご説明します。プレーンなJavaScriptでは、「document.querySelectorAll(~)」でセレクタに合致する要素をまとめて取得し、その一つ一つにプロパティの書き換えやメソッドを適用していました。

jQueryでは、「$(‘~’)」でセレクタを指定し、それにマッチした要素にメソッドを適用すると、「すべての要素に」「メソッドを適用」します。これが「for」文が無い理由です。

では、今回はさらっと終わらせていただきます。次回は、「CSS」の設定と「要素の内容の設定」を行いましたので、逆の「CSSの取得」と「要素の内容の取得」を行います。