【JavaScript授業十九日目】JQuery(続き3)
●クラス属性追加（HTML）
<p class="box1">ボックス１</p>
↓
<p class="box1 pickup">ボックス１</p>
JS
$('.btn1-1').on('click', function () {
$('.box1').addClass('pickup');
});
●クラス属性削除（HTML）
<p class="box1 pickup">ボックス１</p>
↓
<p class="box1">ボックス１</p>
JS
$('.btn1-2').on('click', function () {
$('.box1').removeClass('pickup');
});
●クラス属性追加・削除（HTML）
<p class="box2">ボックス２</p>
↓↑
<p class="box2 pickup">ボックス２</p>
JS
$('.btn2').on('click', function () {
$('.box2').toggleClass('pickup');
});
・場所：クラス名「btn2」
・種類：クリック
・処理： クラス名「pickup」を追加・削除
・簡易的なデザイン変更：CSSメソッド
・本格的なデザイン変更：デザインはCSSファイルで定義。JSでクラス名の付け外し
JSでプログラミングする際は
「HTML(文書構造)」
「CSS(デザイン)」
「JS(文書構造の変更)」
をすべて使う
●複数あるa要素にクラス追加する（通常の書き方）
↓
$('.list1 a').on('click', function () {
$('.list1 a').toggleClass('current');
return false;
});
・イベント発生：3つのリンク
・場所：クラス名「list1」の子孫「a」→3つ
・種類：クリック
・処理：クラス属性'current'を付け外して、戻り値「false」あり
●複数あるa要素にクラス追加する（thisを使った書き方）
↓
$('.list2 a').on('click', function () {
$(this).toggleClass('current');
$(this)：イベントが発生した場所
return false;
イベントに対する戻り値「false」
イベント設定：a要素がクリックされたとき
ブラウザの挙動：href属性をみてページ遷移
イベントに対して「false」を返すことで
ブラウザの挙動「ページ遷移」を実行させない
});
・イベント発生：3つのリンク
・場所：クラス名「list1」の子孫「a」→3つ
・種類：クリック
・処理：イベント発生個所（1つのリンク）でクラスの付け外し
戻り値の補足↓
・「return false;」 HTMLの属性<>内で「href="javascript:void(0)"」するのと一緒
・実際の現場ではJSの知識がない人もいるので、「href="#"」みたいな書き方で来ることがあるので、その時に使える
◇◇◇◇◇◇◇◇◇テキスト載ってないところ◇◇◇◇◇◇◇◇◇◇◇
●dataメソッド「date-〇〇〇属性の値を取得する」
・引数に〇〇〇部分を指定する
・HTML要素内に付与されたdata属性に対して、取得・設定・変更
・data属性の取得：data('属性名')
・data属性の設定：data('属性名','属性値')
・data()メソッド（空の状態）を実行することですべてのdata属性が取得できる
●nextメソッド
・対象要素の次に配置されている要素だけを取得
・何の要素が次に配置されているか分からなくても取得できるのがポイント
・nextメソッドの取得：next()
・nextメソッドの取得：next("要素")
・引数を活用すると条件検索
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
●入力文字数チェック
$(this)：イベント発生したテキストボックス
.dateメソッド：date-〇〇属性を取得する
今回はdate-limit属性の値を取得する
変数limit「入力文字数の上限数」を代入している
let limit = $(this).data('limit');
ユーザ入力値の取得：イベント発生テキストボックスの
入力値を変数valに代入
let val = $(this).val();
条件：ユーザ入力値(val)の文字数が
上限値(limit)より多かったらtrueになる条件
if (val.length > limit) {
上限値を超えた時の処理：イベント発生時テキストボックスの
次の要素のコンテンツを書き換え(警告文表示)
$(this).next().html(limit + '文字以内で入力してください');
} else {
上限値以下の時の処理：イベント発生時テキストボックスの
次の要素のコンテンツを削除(警告文なしにする)
$(this).next().empty();
}
});
●問題（入力文字数チェック+未入力時は「入力してください」と警告を表示）
let limit = $(this).data('limit');
let require = $(this).data('require');
let val = $(this).val();
if条件：「requireがture」かつ「文字数が0」の時
if (require && val.length === 0) {
$(this).next().html('入力してください');
else if条件：文字数が上限値(limit)より多い時
} else if (val.length > limit) {
$(this).next().html(limit + '文字以内で入力してください');
それ以外の条件の時
} else {
$(this).next().empty();
}
});
$('.box4 .target').nextAll(':last-child') ←例)最後の要素とるとき
●prev：読み・・・プレブ
