Lesson 4

HTML

Lesson 4 Chapter 1
テキストの設定(text)

Lesson3では、jQueryにおけるアニメーション機能である「エフェクト」について説明してきました。
Lesson4では、jQueryを用いて、特定の要素の「HTMLを操作」する方法について学んでいきましょう。

それでは、まず最初に、指定した要素のHTMLの「テキスト情報を操作」する方法について説明を行います。

text()アクション

text()は、指定した要素のHTMLのテキスト情報を操作することができるアクションです。
text()アクションを使用すると、テキスト情報の"取得"やテキスト情報の"設定"といった操作を行うことができます。

テキスト情報の取得

まずは、テキスト情報の取得の方法について見ていきましょう。
以下は、指定した要素のテキスト情報を取得する際の文法です。

jQuery
$('要素名').text();

今回は、以下のようなサンプルコードを用意しました。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div>divの要素</div>
  </body>
</html>
<style>
  div {
    display:block;
    width:300px;
    height:300px;
    text-align:center;
    line-height:300px;
    background-color: aquamarine;
    font-size: 26px;
  }
</style>
<script>
    let text = $("div").text();
    console.log(text);
</script>

HTMLやCSSの構造はLesson3のものと基本的に同じですが、scriptタグにて、<div>要素のHTML構造に対し、text()アクションを使用して、テキスト情報を取得しています。
また、取得した情報をtextという変数に代入し、それをconsole.log()を用いてブラウザのコンソールにログ出力する、という処理を記述しています。

では実際に、上記のサンプルコードを実行した結果を確認してみましょう。

text.png sample.htmlの実行結果

実行すると、上記のような結果が得られます。期待通りに、<div>要素のテキスト情報を取得し、ブラウザのコンソールにログとして出力することができました。

ブラウザのコンソールを表示する方法

ブラウザのディペロッパーツールを使用して、コンソールを表示することができます。コンソールを表示することで、上記の実行結果のように、ログを出力することができ、検証の際などに役立てることができます。
では、今回は例として、Google Chromeにおけるコンソールの表示方法について説明します。
①1枚目の添付画像のように、ブラウザの画面右上の赤枠で囲まれている3点マークをクリックします。
②「その他のツール」より、「ディペロッパーツール」を選択します。
③2枚目の添付画像のようなツールが出現しますので、赤枠の「コンソール」タブをクリックすることで、コンソールが表示されます。

console.png 添付画像１：「ディペロッパーツール」を選択

console2.png 添付画像２：「コンソール」タブを選択

テキスト情報の設定

続いて、テキスト情報を設定する方法について見ていきましょう。
以下のような記述をすることで、指定した要素のHTMLに対し、任意のテキスト情報をセットすることができます。
また、すでにテキスト情報がセットされている場合は、指定したテキスト情報で上書きされます。

jQuery
$('要素名').text('任意のテキスト情報');

それでは、任意のテキスト情報をセットするサンプルコードを以下に表示します。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div>divの要素</div>
  </body>
</html>
<style>
  div {
    display:block;
    width:300px;
    height:300px;
    text-align:center;
    line-height:300px;
    background-color: aquamarine;
    font-size: 26px;
  }
</style>
<script>
    $("div").text("新しいテキストです");
</script>

以下に実行結果を表示します。

text2.png sample.htmlの実行結果

<div>要素に対し、非常に簡単にテキスト情報を変更することができました。

このように、text()アクションは、特定の要素のテキスト情報を簡単に操作することができる、基本的かつ非常に便利なアクションですので、しっかりと使いこなせるようになりましょう。

Lesson 4 Chapter 2
HTMLマークアップの設定（html）

このチャプターでは、html()アクションについての説明を行います。

html()アクション

html()は、指定した要素のHTML情報を操作することができるアクションです。
前回のチャプターのtext()アクションでは、要素内のテキスト情報のみの操作が可能でしたが、html()アクションでは、指定した要素の"HTMLの情報"をまるごと"取得"や"設定"といった操作を行うことができます。

では、早速、HTMLの取得の方法から見ていきましょう。

HTMLの取得

指定した要素のHTMLを取得するには、以下のように記述します。

jQuery
$('要素名').html();

続けて、html()アクションを使用したサンプルコードを以下に記載します。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div><span>divの要素</span></div>
  </body>
</html>
<style>
  div {
    display:block;
    width:300px;
    height:300px;
    text-align:center;
    line-height:300px;
    background-color: aquamarine;
    font-size: 26px;
  }
</style>
<script>
    let html = $("div").html();
    console.log(html);
</script>

今回は、scriptタグにて、<div>要素に対し、html()アクションを使用して、HTML情報を取得した内容をそのままコンソールにログ出力するような処理としています。
ちなみに、<div>要素内には<span>要素も記述しています。

では実際に、上記のサンプルコードを実行した結果を確認してみましょう。

html.png sample.htmlの実行結果

実行すると、上記のような結果が得られました。ログには、「<span>divの要素</span>」と出力されています。
つまり、html()アクションによって、今回は<div>要素内のHTML情報を取得しているため、テキスト情報だけでなく、<span>要素も一緒に取得される、という挙動となります。

HTMLの設定

続いて、HTMLを設定する方法について見ていきましょう。
指定した要素に対し、任意のHTMLをセットするには、以下のように記述します。
また、すでにHTMLがある場合は、指定したHTMLで上書きされます。

jQuery
$('要素名').html('任意のHTML');

それでは、以下に、任意のHTMLをセットするサンプルコードを記載します。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div><span>divの要素</span></div>
  </body>
</html>
<style>
  div {
    display:block;
    width:300px;
    height:300px;
    text-align:center;
    line-height:300px;
    background-color: aquamarine;
    font-size: 26px;
  }
</style>
<script>
    $("div").html("<p>新しいHTMLです</p>");
</script>

今回は、<div>要素に対し、<p>要素を含めた「<p>新しいHTMLです</p>」というコードをHTMLとしてセットする記述を行いました。
以下にサンプルコードの実行結果を表示します。

html2.png sample.htmlの実行結果

<div>要素に対し、期待通りに「新しいHTMLです」という文言がセットされています。
また、文言を挟んでいる<p>要素も正しくセットされているかどうかを確認するために、ブラウザのディベロッパーツールより、「要素」のタブを開き、実行結果のHTMLの状態を確認します。
すると、こちらも期待通りに、<div>要素に対し、「<p>新しいHTMLです</p>」というHTMLとしてセットされていることを確認することができました。

このように、html()アクションは、特定の要素のHTMLを簡単に操作することができる便利なアクションです。
HTMLレベルで操作することのできる点では、text()アクションよりも、より柔軟性のあるアクションとも言えるでしょう。

Lesson 4 Chapter 3
フォームフィールドの設定（val）

このチャプターでは、val()アクションについて学んでいきましょう。

val()アクション

val()は、フォーム要素の値を操作することができるアクションです。
input要素、textarea要素、select要素などのフォーム要素に対し、値の取得やセットの操作が可能となります。

フォーム要素の値の取得

val()アクションを用いたフォーム要素の値を取得するには、以下のように記述します。

jQuery
$('フォーム要素').val();

val()アクションを使用したサンプルコードを以下に記載します。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <input type="text" value="inputフォーム要素">
  </body>
</html>
<style>
  div {
    width:300px;
    height:50px;
    text-align:center;
    line-height:50px;
    font-size: 26px;
  }
</style>
<script>
  let val = $("input").val();
  console.log(val);
</script>

今回は、<input>要素に対し、value属性に「inputフォーム要素」という文言が初期状態で入力された状態です。この<input>要素のvalue属性の値を取得するために、$("input").val();を使用し、値の取得を行ったのちに、ログ出力をする処理を実装しています。
以下にサンプルコードの実行結果を表示します。

val.png sample.htmlの実行結果

上記の実行結果の通り、取得したフォーム内の値をログ出力できていることを確認することができました。

フォーム要素への値の設定

フォーム要素へ値を設定するには、val()アクションを用いて以下のように記述します。

jQuery
$('フォーム要素').val('任意の値');

以下にサンプルコードを記載します。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <input type="text" value="inputフォーム要素">
  </body>
</html>
<style>
  div {
    width:400px;
    height:50px;
    text-align:center;
    line-height:50px;
    font-size: 26px;
  }
</style>
<script>
  $("input").val("フォームの値を更新します");
</script>

<input>要素に対し、value属性に「inputフォーム要素」という文言が初期状態で入力されています。$("input").val("フォームの値を更新します");のコードが実行されることにより、フォーム要素のvalue属性の値が上書きされます。
以下にサンプルコードの実行結果を表示します。

val2.png sample.htmlの実行結果

このように、期待通りに、値の設定ができていることが確認できました。

先述した通り、サンプルコードで例に挙げたinput要素だけでなく、textarea要素、select要素などの様々なフォーム要素に対し、val()アクションは使用することができます。
より掘り下げて活用方法を知りたい方は、公式サイトのドキュメントを参照いただくことをおすすめします。

Lesson 4 Chapter 4
要素の追加（append/prepend）

このチャプターでは、jQueryにおける要素の追加の方法について説明を行います。

append()アクションによる要素の追加

append()アクションを使用すると、任意の要素を、既存の要素の子要素として追加することができます。
以下が文法です。

jQuery
$('既存の要素').append('任意の要素');

以下のサンプルコードを使って挙動を見てみましょう。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div>divの要素</div>
  </body>
</html>
<style>
  div {
    width:300px;
    height:200px;
    text-align:center;
    line-height:200px;
    background-color: aquamarine;
    font-size: 26px;
  }
  p {
    width:300px;
    height:200px;
    text-align:center;
    line-height:200px;
    background-color: aqua;
    font-size: 26px;
  }
</style>
<script>
  $("body").append("<p>pの要素</p>");
</script>

上記のサンプルコードでは、$("body").append("<p>pの要素</p>");の処理が実行されることにより、body要素に対し、新しく<p>pの要素</p>というHTMLが動的に追加されます。
以下に実行結果を表示します。

append.png sample.htmlの実行結果

このように、body要素内にすでに存在するdiv要素の後に続く形で追加されました。
この際の、HTML構造を以下に表示します。

sample.html
<html>
  <body>
    <div>divの要素</div>
    <p>pの要素</p>
  </body>
</html>

このように、append()アクションは、「指定した要素の"最後の子要素"として追加される」（列の一番最後尾に並ぶようなイメージ）という挙動となります。

prepend()アクションによる要素の追加

要素の追加のもう1つのメジャーな方法として、prepend()アクションによる追加の方法があります。prepend()アクションを使用することで、既存の要素に対して、"先頭の子要素"として追加することができます。
appendアクションとは、「子要素として追加される際の場所が異なる」ということを把握しておきましょう。
以下が文法です。

jQuery
$('既存の要素').prepend('任意の要素');

prepend()アクションを使用したサンプルコードを以下に記載します。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div>divの要素</div>
  </body>
</html>
<style>
  div {
    width:300px;
    height:200px;
    text-align:center;
    line-height:200px;
    background-color: aquamarine;
    font-size: 26px;
  }
  p {
    width:300px;
    height:200px;
    text-align:center;
    line-height:200px;
    background-color: aqua;
    font-size: 26px;
  }
</style>
<script>
  $("body").prepend("<p>pの要素</p>");
</script>

今回は、append()アクションではなく、prepend()アクションを使用しています。
以下に実行結果を表示します。

prepend.png sample.htmlの実行結果

このように、body要素内の先頭の子要素としてp要素が追加されます。そのため、すでに存在するdiv要素よりも上部に表示されます。
また、この際の、HTML構造を以下に表示します。

sample.html
<html>
  <body>
    <p>pの要素</p>
    <div>divの要素</div>
  </body>
</html>

このように、動的に追加する要素を先頭の子要素として見せたい場合は、prepend()アクションを使うようにしましょう。

このチャプターでは、要素の追加方法として、append()アクション、prepend()アクションの使用方法を説明しました。
どちらも新しい要素を動的に追加することができる便利なアクションです。正しく使い分けができるように、しっかりと違いについても理解しておきましょう。

Lesson 4 Chapter 5
要素の削除（remove/empty）

このチャプターでは、要素の削除の方法について説明します。
要素の削除の方法には、remove()アクションとempty()アクションの2種類が存在します。
それぞれ使い方について、順番に見ていきましょう。

remove()アクションによる要素の削除

remove()は、指定した要素を削除することができるアクションです。
以下が文法です。

jQuery
$('任意の要素').remove();

それでは、サンプルコードを参考に、remove()アクションの挙動について確認していきましょう。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div>divの要素</div>
  </body>
</html>
<style>
  div {
    width:300px;
    height:200px;
    text-align:center;
    line-height:200px;
    background-color: aquamarine;
    font-size: 26px;
  }
</style>
<script>
  $("div").remove();
</script>

上記のサンプルコードでは、$("div").remove();の処理が実行されることにより、div要素が削除されます。
そのため、実行結果は、以下のように画面に何も表示されていない状態となります。

remove.png sample.htmlの実行結果

また、この際の、HTML構造を以下に表示します。

sample.html
<html>
  <body>
  </body>
</html>

このように、任意の要素自体を削除してしまいたい場合は、remove()アクションを活用すればOKです。

empty()アクションによる要素の削除

もう1つの削除の手法として、empty()アクションがあります。empty()アクションを使用すると、指定した要素内の子要素および孫要素をすべて削除することが可能です。
remove()アクションでは、指定した要素そのものが削除対象でしたが、empty()アクションの場合、指定した要素自体は削除されずに残ります。
以下が文法です。

jQuery
$('任意の要素').empty();

それでは、サンプルコードを参考に、empty()アクションの挙動について確認していきましょう。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div><span>spanの要素</span></div>
  </body>
</html>
<style>
  div {
    width:300px;
    height:200px;
    text-align:center;
    line-height:200px;
    background-color: aquamarine;
    font-size: 26px;
  }
</style>
<script>
  $("div").empty();
</script>

上記のサンプルコードでは、div要素内に、子要素としてspan要素が存在しています。$("div").empty();の処理が実行されることにより、div要素内の子要素が削除されます。
つまり、子要素であるspan要素のみが削除されるため、結果は以下のように、div要素のみが残った状態となります。

empty.png sample.htmlの実行結果

また、この際の、HTML構造を以下に表示します。

sample.html
<html>
  <body>
    <div></div>
  </body>
</html>

このように、任意の要素の子要素以下を削除したい場合には、remove()アクションを活用するようにしましょう。

このチャプターでは、要素を削除するための2通りの方法について学びました。挙動の違いを理解し、上手く使い分けをしていけるようになりましょう。

Lesson 4 Chapter 6
CSSクラスの付与/削除（addClass/removeClass）

このチャプターでは、任意の要素に対するCSSクラスの付与および削除の方法について、説明を行います。
CSSクラスの付与をするにはaddClass()アクションを、削除を行うにはremoveClass()アクションを使用します。
では、それぞれ使い方について、順番に説明を行います。

addClass()アクションによるCSSクラスの付与

addClass()は、指定した要素に対し、CSSクラスを追加することができるアクションです。
文法は以下のように記述します。

jQuery
$('任意の要素').addClass('任意のクラス名');

それでは、サンプルコードを参考に、addClass()アクションの挙動について確認していきましょう。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div>divの要素</div>
  </body>
</html>
<style>
  div {
    width:300px;
    height:200px;
    text-align:center;
    line-height:200px;
    background-color: aquamarine;
    font-size: 26px;
  }
  div.sampleclass {
    background-color: orange;
  }
</style>
<script>
  $("div").addClass('sampleclass');
</script>

以下にサンプルコードの実行結果を表示します。
$("div").addClass("sampleclass");の処理が実行されることにより、div要素に対し、CSSクラスsampleclassが追加されます。
さらに、sampleclassが追加されたことで、background-color: orange;のスタイルが適用されるため、div要素の背景色がオレンジ色に変更されます。

addclass.png sample.htmlの実行結果

また、この際の、HTML構造を以下に表示します。

sample.html
<html>
  <body>
    <div class="sampleclass">divの要素</div>
  </body>
</html>

このように、簡単にCSSクラスを追加することができました。

では、続いて、CSSクラスの削除の方法についても見てみましょう。

removeClass()アクションによるCSSクラスの削除

removeClass()は、指定した要素に付与されているCSSクラスを削除することができるアクションです。
以下が文法です。

jQuery
$('任意の要素').removeClass('任意のクラス名');

それでは、先ほどaddClass()アクションによって追加したCSSクラスsampleclassを、removeClass()アクションを使用して削除を実行します。
以下は、そのサンプルコードです。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div class="sampleclass">divの要素</div>
  </body>
</html>
<style>
  div {
    width:300px;
    height:200px;
    text-align:center;
    line-height:200px;
    background-color: aquamarine;
    font-size: 26px;
  }
  div.sampleclass {
    background-color: orange;
  }
</style>
<script>
  $("div").removeClass('sampleclass');
</script>

以下にサンプルコードの実行結果を表示します。
$("div").removeClass("sampleclass");の処理が実行されることにより、div要素からCSSクラスsampleclassが削除された結果、background-color: orange;のスタイルの適用もされなくなるため、div要素の背景色が黄緑色に変更されます。

removeclass.png sample.htmlの実行結果

また、この際の、HTML構造を以下に表示します。

sample.html
<html>
  <body>
    <div>divの要素</div>
  </body>
</html>

addClass()アクション、removeClass()アクションを使用することで、簡単にCSSクラスの付与と削除を行うことができました。クラスを選択するセレクタ$('.クラス名')とも相性が良いため、これらのアクションをしっかりと使いこなせるようになりましょう。

Lesson 4 Chapter 7
その他のHTML操作

これまでのチャプターでは、text()アクションや、val()といった代表的なアクションについての説明を行いました。
このチャプターでは、他にも便利で使い所の多いアクションについて、2つほどピックアップし、紹介します。

css()アクションによるスタイルの操作

css()は、指定した要素のCSSスタイルを操作することができるアクションです。
文法は以下のように記述します。

jQuery
$('任意の要素').css('任意のプロパティ', '値');

上記のように記述することで、指定した要素に対し、任意のCSSスタイルを設定することができます。
それでは、サンプルコードを参考に、css()アクションの挙動について確認していきましょう。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <div>divの要素</div>
  </body>
</html>
<style>
  div {
    width:300px;
    height:200px;
    text-align:center;
    line-height:200px;
    background-color: aquamarine;
    font-size: 26px;
  }
</style>
<script>
  $("div").css("background-color", "orange");
</script>

上記のサンプルコードでは、
$("div").css("background-color", "orange");というコードが存在しています。
この処理を解説すると、div要素に対し、CSSのプロパティであるbackground-colorの値をorangeへと変更する、という内容です。
つまり、元々のスタイルとして設定しているbackground-color: aquamarine;の内容が上書きされることになります。
以下に実行結果を表示します。

css.png sample.htmlの実行結果

css()アクションを使用することで、このように簡単にCSSスタイルを操作することができます。例えば、Webページ上のとあるイベント発生をきっかけにコンテンツの色や形を変えたりといった制御をする際に、このcss()アクションが役立つでしょう。
使い所もよくあるアクションですので、しっかりと使い方を覚えておきましょう。

では、以下に、もう1つ便利なアクションについて紹介します。

attr()アクションによる属性の操作

attr()は、指定した要素の属性情報を操作することができるアクションです。
属性情報を取得する際には、以下のように記述します。

jQuery
$('任意の要素').attr("任意の属性名");

では、属性情報を取得するために、以下のようなサンプルコードを用意しました。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <input type="text" value="inputフォーム要素">
  </body>
</html>
<style>
  input {
    width:400px;
    height:50px;
    text-align:center;
    line-height:50px;
    font-size: 26px;
  }
</style>
<script>
  let attr = $("input").attr("value");
  console.log(attr);
</script>

上記のサンプルコードでは、$("input").attr("value");によってinput要素のvalue属性の値を取得し、その内容をコンソールにログ出力するような処理を実装しています。
以下にサンプルコードの実行結果を表示します。
結果、期待通りに、value属性の値を取得できていることを確認することができました。

attr.png sample.htmlの実行結果

また、属性情報をセットするには、以下のように、attr()アクションの第2引数に、セットしたい値を記述します。

jQuery
$('任意の要素').attr("任意の属性名", "セットする値");

以下は、そのサンプルコードです。

sample.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.4.js">
  </head>
  <body>
    <input type="text" value="inputフォーム要素">
  </body>
</html>
<style>
  input {
    width:400px;
    height:50px;
    text-align:center;
    line-height:50px;
    font-size: 26px;
  }
</style>
<script>
  $("input").attr("value", "attr()によって更新した値です");
</script>

$("input").attr("value", "attr()によって更新した値です");の処理により、input要素のvalue属性の値が設定した内容で上書きされます。
以下が、サンプルコードを実行結果です。
このように、属性情報が設定した内容に変更されていることを確認することができました。

attr2.png sample.htmlの実行結果

このレッスンでは、jQueryにおける代表的な「HTML操作系アクション」について、いくつか紹介しました。ここまで紹介してきた操作を使いこなせるようが出来れば、実際の開発においても、多いに役立つでしょう。