◆20200826 授業メモ クラス制御 thisの使い方 トラバース
本日の授業内容
要約
①クラス制御
.addClass('クラス名') →クラスを追加する
.removeClass('クラス名') →クラスを削除する
.toggleClass('クラス名') →クラスを付与・削除両方できる
②thisについて
＄（this）はイベント発生要素
→イベント発生要素のコピーだと思って見れば・・・。
同じ要素の記述を避けるだけではなく
これを使うことで同じ要素でも一斉に動作をさせるのではなく、1つ1つ動作させる
ことができる。
③＄（this）を起点に要素を選択
詳細は下記
④演習問題
以上。
以下より①～④の詳細・板書
以下板書
〇クラス制御
→jQueryでclassのつけ外し
06 - 3class.htmlより
// < !DOCTYPE html >
// <html lang="ja">
// <head>
// <meta charset="UTF-8">
// <meta name="viewport" content="width=device-width, initial-scale=1.0">
// <title>jQueryを試してみる</title>
// </head>
// <body>
// <div class="box">
// <div class="inner">
// <p class="btn1-1 btn">addClassメソッド</p>
// <p class="btn1-2 btn">removeClassメソッド</p>
// <p class="box1">ボックス１</p>
// <p class="btn2 btn">toggleClassメソッド</p>
// <p class="box2">ボックス２</p>
// <p class="btn3 btn">ホーム</p>
// <p class="box3">ボックス３</p>
// </div>
// </div>
<script>
$(function () {
// サンプル１－１
$('.btn1-1').on('click', function () {
$('.box1').addClass('pickup');
});
// サンプル１－２
$('.btn1-2').on('click', function () {
$('.box1').removeClass('pickup');
});
// サンプル２
$('.btn2').on('click', function () {
$('.box2').toggleClass('pickup');
});
// 練習１
// クラス名「btn3」をクリックしたときに
// クラス名「pickup」を追加・削除すること
$('.btn3').on('click', function () {
$('.btn3').toggleClass('pickup');
// $(this).toggleClass('pickup');
// イベントが発生した場所に処理をする場合 $(this)で場所を記述
// this＝'btn3'：イベント発生箇所
});
});
</script>
</body >
</html >
.addClass('クラス名') →クラスを追加する
.removeClass('クラス名') →クラスを削除する
.toggleClass('クラス名') →クラスを付与・削除両方できる
JSはクラス名のつけ外し
「data() 」を使うとHTML要素内に付与されたdata属性に対して、
取得・設定・変更などが簡単に行えるようになる。
〇nextメソッドについて
→「next() 」は、同じ階層にある要素を取得できるが、
対象要素の次に配置されている要素だけを取得するのが特徴
〇thisを使った演習問題
画像は07this.htmlの練習問題1の流れ図
以下板書
〇thisを使った問題演習
07this.htmlより
// < !DOCTYPE html >
// <html lang="ja">
// <head>
// <meta charset="UTF-8">
// <meta name="viewport" content="width=device-width, initial-scale=1.0">
// <title>jQueryを試してみる</title>
// </head>
// <body>
// <div class="box">
// <div class="inner">
// <ul class="list1 btnList">
// <li>
// <a class="btnNoHover" href="#">メニュー１</a>
// </li>
// <li>
// <a class="btnNoHover" href="#">メニュー２</a>
// </li>
// <li>
// <a class="btnNoHover" href="#">メニュー３</a>
// </li>
// </ul>
// </div>
// </div>
// <div class="box">
// <div class="inner">
// <ul class="list2 btnList">
// <li>
// <a class="btnNoHover" href="#">メニュー１</a>
// </li>
// <li>
// <a class="btnNoHover" href="#">メニュー２</a>
// </li>
// <li>
// <a class="btnNoHover" href="#">メニュー３</a>
// </li>
// </ul>
// </div>
// </div>
// <div class="box">
// <div class="inner">
// <form id="form3" action="#">
// <dl>
// <dt>名前</dt>
// <dd>
// <input class="check3" type="text" data-limit="5">
// <span class="warning"></span>
// </dd>
// <dt>メールアドレス</dt>
// <dd>
// <input class="check3" type="text" data-limit="20">
// <span class="warning"></span>
// </dd>
// <dt>本文</dt>
// <dd>
// <textarea class="check3" data-limit="200"></textarea>
// <span class="warning"></span>
// </dd>
// </dl>
// <div class="btnBox">
// <input type="submit" value="送信">
// </div>
// </form>
// </div>
// </div>
// <div class="box">
// <div class="inner">
// <form id="form3" action="#">
// <dl>
// <dt>名前</dt>
// <dd>
// <input class="check3" type="text" data-limit="5" data-require="true">
// <span class="warning"></span>
// </dd>
// <dt>メールアドレス</dt>
// <dd>
// <input class="check3" type="text" data-limit="20">
// <span class="warning"></span>
// </dd>
// <dt>本文</dt>
// <dd>
// <textarea class="check3" data-limit="200" data-require="true"></textarea>
// <span class="warning"></span>
// </dd>
// </dl>
// <div class="btnBox">
// <input type="submit" value="送信">
// </div>
// </form>
// </div>
// </div>
<script>
$(function () {
// サンプル１
$('.list1 a').on('click', function () {
$('.list1 a').toggleClass('current');
return false;
});
// onメソッドがあるのでイベント設定
// 場所：$('.list1 a')←list1の中にある子孫セレクタaを指す→3つのリンクを指す
// 種類：click
// 処理：クラス属性に'current'のつけ外し
// 戻り値：あり。「false」
// 3つ全てのボタンでクラスのつけ外し
// サンプル２
$('.list2 a').on('click', function () {
$(this).toggleClass('current');
return false;
// ↑a要素hrefに＃が記述されているため、 return false;の記述がないとtopにとんでしまう
//今回はリンクでページ遷移させるのではなくクラスのつけ外しのためだけに使用するので
// return false;でページ遷移をキャンセルさせる
});
// イベント設定：3つのリンク
// イベント発生時の処理
// thisを用いることによってイベント発生個所（1つのリンク）でクラスのつけ外しが可能になる
// サンプル３
// data属性とjQueryでの扱い方について調べること
// →「data() 」を使うとHTML要素内に付与されたdata属性に対して、
// 取得・設定・変更などが簡単に行えるようになる。
// nextメソッドについて調べること
// →「next() 」は、同じ階層にある要素を取得できるが、
// 対象要素の次に配置されている要素だけを取得するのが特徴
console.log('チェック');
let limit = $(this).data('limit');
// this＝$('.check3')
// ↑イベント発生したテキストボックスを指す
// .data('limit');→data-limit="20"
let val = $(this).val();
// $('.check3')で入力された入力値を取得して変数valに代入（.val）
console.log(limit);
console.log(val);
if (val.length > limit) {
$(this).next().html(limit + '文字以内で入力してください');
// 取得した文字数がlimit（20）より上回る場合は
// $(this).next()＝ $('.check3')の次に配置されている要素＝ class="warning"
// の部分に'limit+文字以内で入力してください'と表示する。
} else {
$(this).next().empty();
}
//取得した文字列の数がlimit（20）より下回る場合はコンテンツ（内容）削除
});
// 練習１
// サンプル３を参考にしてID名「form4」に以下のチェック処理を追加すること
// ・入力文字数チェック
// ・data-require属性が「true」の場合は必須項目として
// 未入力時は「入力してください」と警告を表示すること
console.log('チェック');
let limit = $(this).data('limit');
let val = $(this).val();
let require = $(this).data('require');
console.log(val.length);
$(this).next().html(val.length + '文字');
if (require == true && val.length === 0) {
$(this).next().html('必須項目なんで入力してください');
} else if (val.length > limit) {
$(this).next().html(limit + '文字以内で入力してください');
// 取得した文字列の数がlimit（20）より上回る場合は
// $(this).next()＝ class="warning"の部分に'limit（20）文字以内で入力してください'
// と表示する。
} else {
$(this).next().empty();
// $(this).next().html(val.length + '文字');
// ↑入力している文字数を表示させていたが必要なかったか・・
}
});
});
</script>
</body >
</html >
〇要素間の移動 トラバース
演習問題
08 - 5traverse.htmlより
// < !DOCTYPE html >
// <html lang="ja">
// <head>
// <meta charset="UTF-8">
// <meta name="viewport" content="width=device-width, initial-scale=1.0">
// <title>jQueryを試してみる</title>
// </head>
// <body>
// <div class="box">
// <div class="inner">
// <div class="box1">
// <h1>サンプル１</h1>
// <dl class="faq">
// <dt>質問１質問１質問１質問１質問１質問１</dt>
// <dd>回答１回答１回答１回答１回答１回答１</dd>
// <dt>質問２質問２質問２質問２質問２質問２</dt>
// <dd>回答２回答２回答２回答２回答２回答２</dd>
// <dt>質問３質問３質問３質問３質問３質問３</dt>
// <dd>回答３回答３回答３回答３回答３回答３</dd>
// </dl>
// </div>
// </div>
// </div>
<script>
// 練習１
// 質問をクリックした際に回答をスライドで表示・非表示させること
// ※質問を連続でクリックしても動きがおかしくならないようにすること
$(function () {
$('.faq dd').slideUp(500);
//↑この記述がないとddの部分が開きっぱなしになる。
$('.faq dt').on('click', function () {
$(this).next().stop().toggle(500);
//↑ $(this).next()＝dd→→→this＝dt、nextをつけると次のddを指す。
//↑thisを用いないとddの全箇所が動いてしまう。
//.stop().toggle(500);で動作中のクリックでも反応してくれるようになる。
})
});
</script>
</body >
</html >
