【JavaScript授業十八日目】JQuery(続き2)
●CSS
.btn
- cursor: pointer; カーソル乗った時に、カーソルの形変える
- transition: all 0.5s; カーソル乗った時に、変更する速度変える(現在は0.5秒で変わる)
●文字変更して太くする
$('.btn1-1').on('click', function () {
let code = '<strong>';
code += 'htmlメソッドで書き換えました';
code += '</strong>';
$('.box1-1').html(code);
});
・場所：$('.btn1-1')
・種類：クリック
・処理：無名関数
$('.box1-1').html(code);
↓ 同じ意味（JQueryだと短く記述できる）
document.getElementsByClassName("box1-1")[0].innerHTML = code;
●文字を太くする
$('.btn1-2').on('click', function () {
elm(エレメント：要素)：変更対象要素
let elm = $('.box1-2');
引数なしでhtmlメソッド呼び出し：取得
let oldHTML = elm.html();
変更後コンテンツ：変更前コンテンツ
let newHTML = '<strong>' + oldHTML + '</strong>';
elm.html(newHTML);
});
●文字消す
$('.btn2').on('click', function () {
$('.box2').empty();
});
●要素の挿入
$('.btn3').on('click', function () {
$('.box3').prepend('追加'); 要素内先頭に挿入
});
$('.btn4').on('click', function () {
$('.box4').append('追加'); 要素内末尾に挿入
});
$('.btn5').on('click', function () {
$('.box5').before('追加'); 要素の前に挿入
});
$('.btn6').on('click', function () {
$('.box6').after('追加'); 要素の後に挿入
});
●要素をラップ（囲む）
$('.btn7').on('click', function () {
$('#list7').wrap('<div class="wrap"></div>');
});
.wrap(<strong></strong>) こうすれば太くできる
●要素削除（emptyと似ているがこっちは要素ごと消す）
$('.btn8').on('click', function () {
$('#list8 li:last-child').remove();
});
●練習問題
マウスカーソルが乗った時、文字を「HOME」から「ホーム」に変更し、
マウスカーソルが外れた時、文字を「ホーム」から「HOME」に変更する
$(".btn9").on("mouseover", function () {
$('.btn9').html("ホーム");
});
$(".btn9").on("mouseout", function () {
$('.btn9').html("HOME");
});
PDFリンクの文字の後に「<span class="pdf">PDF</span>」を表示させること
※PDFの文字はリンク文字列の対象から外すこと
$('#list10>li:nth-child(2)').append('<span class="pdf">PDF</span>');
・これだとpdfの拡張子が増えた際に対応できてない
●[href$=".pdf"]を使えばできる
$('#list10>li a[href$=".pdf"]').after('<span class="pdf">PDF</span>');
◆CSS属性セレクタ
・要素名[属性名="属性値"]→完全一致
・要素名[属性名]→属性名一致
・要素名[属性名*="属性値"]→属性値部分一致
a[href*=".pdf"]
取得できる例）<a href="aaa.pdf?name=111">aaa</a>
・要素名[属性名^="属性値"]→属性値前方一致
a[href^=".pdf"]
取得できる例）<a href="pdf.html">aaa</a>
・要素名[属性名$="属性値"]→属性値後方一致
a[href$=".pdf"]
取得できる例）<a href="aaa.pdf">aaa</a>
●ボタンを押したら画像が切り替わり、一秒後に元の画像に戻る
$('.btn1-1').on('click', function () {
let elm = $('.player1');
属性値取得(JSでいうgetAttribute)→文字列型：img/p_01.gif
let tmpSrc = elm.attr('src');
属性値変更(JSでいうsetAttribute)
elm.attr('src', 'img/p_01magic.gif');
一秒後に変数に代入しておいた元の画像パスを設定
window.setTimeout(function () {
elm.attr('src', tmpSrc);
}, 1000);
});
●問題1
ID名「form2-2」からフォーカスを外したときに空文字の場合は「入力してください」と表示し、入力文字が10文字以上の場合は「10文字未満で入力してください」と表示する。※警告文はクラス名「warning2-2」に表示すること
ユーザ入力値取得
let formVal = $('#form2-2').val();
if (formVal.length == 0) {
$('.warning2-2').html('入力してください')
} else if (formVal.length >= 10) {
$('.warning2-2').html('10文字未満で入力してください')
} else {
$('.warning2-2').empty();
}
});
・場所：ID名「form2-2」
・種類：フォーカスが外れた時
・処理：ユーザ入力値チェック
ユーザ入力値取得
空文字確認
文字数確認
警告文の操作
●問題2
消費税の計算結果を表示する
$('#calc3').on('click', function () {
税抜価格の入力値を取得して変数priceValに代入
let priceVal = $('#price3-1').val();
税込価格の入力値を計算して四捨五入して変数taxIncludedPriceに代入
let taxInPrice = priceVal * 1.1;
taxInPrice = Math.round(taxInPrice);
税込価格を"#price3-2"テキストボックスに表示
$("#price3-2").val(taxInPrice);
消費税の入力値を計算して四捨五入して変数taxに代入
let tax = Math.round(taxInPrice - priceVal);
消費税を"#tax3"テキストボックスに表示
$("#tax3").val(tax);
});
●HTML
消費税：<input id="tax3" type="text" readonly="readonly">
税込価格：<input id="price3-2" type="text" readonly>
「readonly="readonly"」読み込り専用の属性
「readonly」この書き方でもOK(属性と値が一緒なら省略できる)
