【Chapter2】要素の操作

概要と目標 jQueryを使って要素を
操作できるようになろう。

jQueryを使ってHTMLの要素を操作する方法を学習し、
ドロワーメニューを作れるようになる。

今回のゴール

RERUN

テキストの変更と取得 `text()`メソッドで、
テキストを操作できる。

HTMLの要素に含まれるテキストは、text() メソッドで変更したり取得したりできる。

text() ・・・テキストを変更したり取得したりする

$(セレクタ).text(変更するテキスト);
                    省略可

  パラメータを省略すればテキストを取得できる

詳細はjQuery API Documentationを参照

`text()`メソッドを使ってみよう！

「chapter02」 › 「element」フォルダ内の「index.html」をテキストエディタで開き、HTMLの構成を確認する
「chapter02」 › 「element」フォルダ内の「app.js」をテキストエディタで開く
下記のjQueryを追記

chapter02/element/app.js

$(function () {
  /*
    変更と取得
  --------------------------------------- */
  // text() ・・・ テキストの変更と取得
  $('#item1').text('textメソッドで変更したぜ'); // 変更

  var text = $('#item2').text(); // 取得
  $('#text1').text(text);
});

上書き保存
ブラウザで「chapter02」› 「element」フォルダ内の「index.html」をブラウザで表示
テキストが変更・取得出来たかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

HTMLの変更と取得 `html()`メソッドで、
HTMLを操作できる。

HTMLの要素に含まれる要素は、html() メソッドで変更したり取得したりできる。

html() ・・・ HTMLを変更したり取得したりする

$(セレクタ).html(変更するHTML);
                    省略可

  パラメータを省略すればHTMLを取得できる

詳細はjQuery API Documentationを参照

`html()`メソッドを使ってみよう！

「chapter02」 › 「element」フォルダ内の「index.html」をテキストエディタで開き、HTMLの構成を確認する
「chapter02」 › 「element」フォルダ内の「app.js」をテキストエディタで開く
下記のjQueryを追記

chapter02/element/app.js

$(function () {
  /*
    変更と取得
  --------------------------------------- */

  // text() ・・・ テキストの変更と取得
  $('#item1').text('textメソッドで変更したぜ'); // 変更

  var text = $('#item2').text(); // 取得
  $('#text1').text(text);

  // html() ・・・ HTMLの変更と取得
  $('#item3').html('<em>htmlメソッドで</em>変更したぜ'); // 変更

  var text = $('#item4').html(); // 取得
  $('#text2').html(text);
});

上書き保存
ブラウザで「chapter02」› 「element」フォルダ内の「index.html」をブラウザで表示
テキストが変更・取得出来たかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

要素の追加好きな場所に、好きな要素を。

jQueryには要素を追加するメソッドがいくつか用意されている。
追加したい場所に応じて、メソッドを使い分ける。

prepend（プリペンド）() ・・・子要素の先頭に追加

$(セレクタ).prepend(追加するHTML);

詳細はjQuery API Documentationを参照

append（アペンド）() ・・・子要素の末尾に追加

$(セレクタ).append(追加するHTML);

詳細はjQuery API Documentationを参照

before（ビフォアー）() ・・・セレクタで指定した要素の手前に追加

$(セレクタ).before(追加するHTML);

詳細はjQuery API Documentationを参照

after（アフター）() ・・・セレクタで指定した要素の後に追加

$(セレクタ).after(追加するHTML);

詳細はjQuery API Documentationを参照

要素を追加するメソッドを使ってみよう！

「chapter02」 › 「element」フォルダ内の「index.html」をテキストエディタで開き、HTMLの構成を確認する
「chapter02」 › 「element」フォルダ内の「app.js」をテキストエディタで開く
下記のjQueryを追記

chapter02/element/app.js

$(function () {
  /*
    変更と取得
  --------------------------------------- */

  // text() ・・・ テキストの変更と取得
  $('#item1').text('textメソッドで変更したぜ'); // 変更

  var text = $('#item2').text(); // 取得
  $('#text1').text(text);

  // html() ・・・ HTMLの変更と取得
  $('#item3').html('<em>htmlメソッドで</em>変更したぜ'); // 変更

  var text = $('#item4').html(); // 取得
  $('#text2').html(text);

  /*
    要素を追加するメソッド
  --------------------------------------- */

  // prepend() ・・・ 子要素の先頭に追加
  $('ul').prepend('<li>prependで追加</li>');

  // append() ・・・ 子要素の末尾に追加
  $('ul').append('<li>appendで追加</li>');

  // before() ・・・ セレクタで指定した要素の手前に追加
  $('#item3').before('<li>beforeで追加</li>');

  // append() ・・・ セレクタで指定した要素の後に追加
  $('#item4').after('<li>afterで追加</li>');
});

上書き保存
ブラウザで「chapter02」› 「element」フォルダ内の「index.html」をブラウザで表示
要素が追加出来たかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

要素の削除中身を消すか、要素ごと消すか。

要素の中身を空にする時は、 empty() メソッド
要素のごと削除する時は、 remove() メソッドを使う。

empty（エンプティ）() ・・・要素の中身を空にする

$(セレクタ).empty();

詳細はjQuery API Documentationを参照

remove（リムーブ）() ・・・要素を削除する

$(セレクタ).remove();

詳細はjQuery API Documentationを参照

要素を削除するメソッドを使ってみよう！

「chapter02」 › 「element」フォルダ内の「index.html」をテキストエディタで開き、HTMLの構成を確認する
「chapter02」 › 「element」フォルダ内の「app.js」をテキストエディタで開く
下記のjQueryを追記

chapter02/element/app.js

$(function () {
  /*
    変更と取得
  --------------------------------------- */

  // text() ・・・ テキストの変更と取得
  $('#item1').text('textメソッドで変更したぜ'); // 変更

  var text = $('#item2').text(); // 取得
  $('#text1').text(text);

  // html() ・・・ HTMLの変更と取得
  $('#item3').html('<em>htmlメソッドで</em>変更したぜ'); // 変更

  var text = $('#item4').html(); // 取得
  $('#text2').html(text);

  /*
    要素を追加するメソッド
  --------------------------------------- */

  // prepend() ・・・ 子要素の先頭に追加
  $('ul').prepend('<li>prependで追加</li>');

  // append() ・・・ 子要素の末尾に追加
  $('ul').append('<li>appendで追加</li>');

  // before() ・・・ セレクタで指定した要素の手前に追加
  $('#item3').before('<li>beforeで追加</li>');

  // append() ・・・ セレクタで指定した要素の後に追加
  $('#item4').after('<li>afterで追加</li>');

  /*
  要素を削除するメソッド
  --------------------------------------- */

  // empty() ・・・ 要素内容を空にする
  $('#item5').empty();

  // remove() ・・・ 要素ごと削除する
  $('#item6').remove();
});

上書き保存
ブラウザで「chapter02」› 「element」フォルダ内の「index.html」をブラウザで表示
要素が削除出来たかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

クリックイベントクリックした時に何かする。

クリックした時に何かしたければ、click() メソッドを使う。

click（クリック）() ・・・クリックイベントを指定

$(セレクタ).click(function() {
  // セレクタの要素をクリックした時の処理

});

詳細はjQuery API Documentationを参照

`click()`メソッドを使ってみよう！

「chapter02」 › 「click」フォルダ内の「index.html」をテキストエディタで開き、HTMLの構成を確認する
「chapter02」 › 「click」フォルダ内の「app.js」をテキストエディタで開く
下記のjQueryを追記

chapter02/click/app.js

$(function () {
  // click() ・・・　クリックイベントを指定
  $('.js-button').click(function () {
    $('ul').append('<li>追加したリスト項目</li>');
  });
});

上書き保存
ブラウザで「chapter02」› 「click」フォルダ内の「index.html」をブラウザで表示
クリックすると要素が追加されるかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

属性の変更と取得属性も自由に変更できる

属性を変更したり、取得したりする場合は、attr() メソッドを使う。
なお、属性を削除する場合は、removeAttr()メソッドを使う。

attr（アトリビュート）() ・・・属性の変更したり取得したりする

$(セレクタ).attr(属性名, 変更する属性値);
                           省略可

【変更する属性値】を省略すれば属性値を取得できる

詳細はjQuery API Documentationを参照

removeAttr（リムーブアトリビュート）() ・・・属性を削除する

$(セレクタ).removeAttr(削除する属性名);

詳細はjQuery API Documentationを参照

属性を変更したり取得したりしてみよう。

「chapter02」 › 「attribute」フォルダ内の「index.html」をテキストエディタで開き、HTMLの構成を確認する
「chapter02」 › 「attribute」フォルダ内の「app.js」をテキストエディタで開く
下記のjQueryを追記

chapter02/attribute/app.js

$(function () {
  // attr() ・・・　属性の変更と取得
  $('.js-changeButton').click(function () {
    // 属性の変更
    $('img').attr('src', 'images/logo-secondary.png');
  });


  $('.js-getButton').click(function () {
    // 属性の取得
    var alt = $('img').attr('alt');
    $('p').after('<p>' + alt + '</p>');
  });

  // removeAttr() ・・・　属性の削除
  $('.js-removeButton').click(function () {
    $('a').removeAttr('target');
  });
});

上書き保存
ブラウザで「chapter02」› 「attribute」フォルダ内の「index.html」をブラウザで表示
クリックすると属性が変更/取得できるかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

CSSの操作jQueryからCSSを設定できる。

jQueryでCSSを設定する場合は、css() メソッドを使う

css（シーエスエス）() ・・・ CSSの変更したり取得したりする

$(セレクタ).css(プロパティ名, 変更する値);
                            省略可

【変更する値】を省略すれば属性値を取得できる

詳細はjQuery API Documentationを参照

CSSを変更したり取得したりしてみよう。

「chapter02」 › 「css」フォルダ内の「index.html」をテキストエディタで開き、HTMLの構成を確認する
「chapter02」 › 「css」フォルダ内の「app.js」をテキストエディタで開く
下記のjQueryを追記

chapter02/css/app.js

$(function () {
  // css() ・・・　CSSの変更と取得
  $('.js-changeButton1').click(function () {
    // CSSの変更
    $('.box1').css('background-color', '#ddd');
  });

  $('.js-changeButton2').click(function () {
    // CSSの変更（複数）
    $('.box2').css({
      'background-color': '#ddd',
      'color': '#666',
      'padding': '1em'
    });
  });

  $('.js-getButton').click(function () {
    // CSSの  取得
    var color = $('.text').css('color');
    $('.text').after('<p>' + color + '</p>');
  });
});

上書き保存
ブラウザで「chapter02」› 「css」フォルダ内の「index.html」をブラウザで表示
クリックするとCSSが変更/取得できるかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

Cassの操作classを追加したり、削除したりする

jQueryでclassを追加したり、削除したりできる。

addClass（アドクラス）() ・・・ classを追加する

$(セレクタ).addClass(class名);

詳細はjQuery API Documentationを参照

removeClass（リムーブクラス）() ・・・ classを削除する

$(セレクタ).removeClass(class名);

【class名】を省略すれば全てのclassを削除できる

詳細はjQuery API Documentationを参照

toggleClass（トグルクラス）() ・・・ addClass/removeClassを自動判別する

$(セレクタ).toggleClass(class名);

詳細はjQuery API Documentationを参照

classを操作してみよう。

「chapter02」 › 「class」フォルダ内の「index.html」をテキストエディタで開き、HTMLの構成を確認する
「chapter02」 › 「class」フォルダ内の「app.js」をテキストエディタで開く
下記のjQueryを追記

chapter02/class/app.js

$(function () {
  // addClass() ・・・ classの追加
  $('.js-addButton').click(function () {
    $('p').addClass('text');
  });

  // removeClass() ・・・ classの削除
  $('.js-removeButton').click(function () {
    $('p').removeClass('text');
  });

  // toggleClass() ・・・ classの削除
  $('.js-toggleButton').click(function () {
    $('p').toggleClass('text');
  });
});

上書き保存
ブラウザで「chapter02」› 「class」フォルダ内の「index.html」をブラウザで表示
クリックするとclassが追加/削除できるかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

練習問題今回の理解度をチェック。

「chapter02」 › 「training」フォルダ内の「index.html」を開き、
下記の問題を解いて下さい。

ブラウザでの完成例

RERUN

新しいウインドウで表示する

jQueryの本体（1.x系）をCDNで読み込んで下さい。
chapter02」 › 「training」フォルダ内に新規ファイルを作成して下さい。
- ファイル名： app.js
上記で作成したJSファイルを、「training」フォルダ内にある「index.html」から参照して下さい。
JSファイル内にDOMが読み込まれてから処理を実行する命令を記述
「メニューを開閉」ボタンをクリックすると左からメニューが出てくるようにして下さい
- CSSの追記や変更はOK
- アニメーションもCSSで設定してOK

解答例

chapter02/training/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>練習問題2</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>練習問題2</h1>
    <nav>
      <button class="js-button">メニューを開閉</button>

      <ul class="drawer">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Service</a></li>
        <li><a href="#">Works</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <p>
      ドロワーメニューを作ってみてよう。<br>
      アニメーションをCSSでやってあげると、<br>
      jQueryはそこまで難しくはない。
    </p>
  </main>

  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  <script src="app.js"></script>
</body>
</html>

chapter02/training/style.css

* {
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
  padding: 1em;
}

button {
  position: fixed;
  top: 2em;
  left: 2em;
  z-index: 1;
  cursor: pointer;
}

main {
  text-align: center;
  line-height: 2;
}

.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: -100%;
  padding: 4em 0;
  width: 80%;
  max-width: 300px;
  height: 100%;
  background-color: #333;
  box-shadow: 1px 0 4px rgba(0, 0, 0, .3);
  list-style: none;
  transition: all 0.3s ease-in-out;
}

.is-active .drawer{
  left: 0;
}

.drawer a {
  display: block;
  padding: 1em;
  color: #ccc;
  text-decoration: none;
  font-weight: bold;
}

.drawer a:hover {
  background-color: #212121;
  color: #fff;
}

chapter02/training/app.js

$(function () {
  $('.js-button').click(function () {
    $('body').toggleClass('is-active');
  });
});

解答例は全問題のチェックボックスが on になるとご覧いただけます。

まとめ jQueryを使えば、
DOMを操作することは用意である。

jQueryには要素を操作する様々なメソッドがある。

要素内を変更するにはtext()やhtml()を使う
要素を追加するにはprepend()やappend()などがある
属性やCSS、classを操作することもできる

Chapter02 要素の操作

text()メソッドを使ってみよう！

html()メソッドを使ってみよう！

要素を追加するメソッドを使ってみよう！

要素を削除するメソッドを使ってみよう！

click()メソッドを使ってみよう！

属性を変更したり取得したりしてみよう。

CSSを変更したり取得したりしてみよう。

classを操作してみよう。

`text()`メソッドを使ってみよう！

`html()`メソッドを使ってみよう！

`click()`メソッドを使ってみよう！