◆20200825 授業メモ jQuery 要素操作
本日の授業内容
・jQueryの続き 要素の操作について
☆他、要素操作一覧
prepend： 対象要素内の先頭に挿入
append ：対象要素内末尾に挿入
before ：対象要素の前に挿入
after ：対象要素の後ろに挿入
wrap ：指定した要素のラップ
remove： 対象要素を削除
.attr('属性名'); 属性値取得→getAttributeと同じ働き
.attr('属性名', '属性値'); 属性値変更→setAttributeと同じ働き
.val(); value属性取得
.val('変更する値'); value値の変更
要素名［属性名＝'属性値'］→完全一致
要素名［属性名］→属性名一致
要素名［属性名 *＝'属性値'］→属性値部分
例）a[href *= 'pdf']
→href属性の「pdf」と記述している部分という意味
要素名［属性名 ^＝'属性値'］→属性値前方一致
※^←キャレットと言う
要素名［属性名＄＝'属性値'］→属性値後方一致
→これは属性名や属性値の部分が各条件に一致している箇所に何ならかの処理を
施すときに使う
・演習問題
解いてた時に出てきたワードの復習
window.setTimeout→遅延処理に使うwindowオブジェクト
Math.round( )→（ ）内を四捨五入するMathオブジェクト
$('#tax3').val( );→HTMLのID＝tax3の部分に.valで取得した値を表示させる。
※ valで取得した値は.htmlでは表示されなかったので要注意
以下板書
jQueryの続き
〇要素の操作
----------------演習問題1----------------
06 - 1contents.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">htmlメソッド</p>
// <p class="box1-1">ボックス１－１</p>
// < p class="btn1-99 btn" > 練習</ >
// <p class="btn1-2 btn">htmlメソッド</p>
// <p class="box1-2">ボックス１－２</p>
// <p class="btn2 btn">emptyメソッド</p>
// <p class="box2">ボックス２</p>
// <p class="btn3 btn">prependメソッド</p>
// <p class="box3">ボックス３</p>
// <p class="btn4 btn">appendメソッド</p>
// <p class="box4">ボックス４</p>
// <p class="btn5 btn">beforeメソッド</p>
// <p class="box5">ボックス５</p>
// <p class="btn6 btn">afterメソッド</p>
// <p class="box6">ボックス６</p>
// <p class="btn7 btn">wrapメソッド</p>
// <ul id="list7">
// <li>項目１</li>
// <li>項目２</li>
// <li>項目３</li>
// </ul>
// <p class="btn8 btn">removeメソッド</p>
// <ul id="list8">
// <li>項目１</li>
// <li>項目２</li>
// <li>項目３</li>
// </ul>
// <p>
// <a class="btn9 btn" href="">HOME</a>
// </p>
// <ul id="list10">
// <li>
// <a href="sample1.html">HTMLリンク</a>
// </li>
// <li>
// <a href="sample2.pdf">PDFリンク</a>
// </li>
// <li>
// <a href="sample3.html">HTMLリンク</a>
// </li>
// <li>
// <a href="sample4.pdf">HTMLリンク</a>
// </li>
// </ul>
// </div>
// </div>
<script>
$(function () {
// サンプル１－１
$('.btn1-1').on('click', function () {
let code = '<strong>';
code += 'htmlメソッドで書き換えました';
code += '</strong>';
$('.box1-1').html(code);
});
// 場所： $('.btn1-1')
// 種類：'click'
// 処理：無名関数 function ()
// inner.HTML='変更したい文字'と同じ
// サンプル１－２
$('.btn1-2').on('click', function () {
let elm = $('.box1-2');
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>');
});
// サンプル８
$('.btn8').on('click', function () {
$('#list8 li:last-child').remove();
});
});
</script>
</body >
</html >
// 練習
// クラス名「btn1-99」をクリック
// クラス名「box1-1」の内容を変更すること
// ・イベント設定
// ・ｈｔｍｌメソッドの利用
$('.btn1-99').on('click', function () {
$('.box1-1').html('変更しました');
});
☆要素操作一覧
prepend 対象要素内の先頭に挿入
append 対象要素内末尾に挿入
before 対象要素の前に挿入
after 対象要素の後ろに挿入
wrap 指定した要素のラップ
remove 対象要素を削除
.attr('属性名'); 属性値取得→getAttributeと同じ働き
.attr('属性名', '属性値'); 属性値変更→setAttributeと同じ働き
要素名［属性名＝'属性値'］→完全一致
要素名［属性名］→属性名一致
要素名［属性名 *＝'属性値'］→属性値部分
要素名［属性名 ^＝'属性値'］→属性値前方一致
要素名［属性名＄＝'属性値'］→属性値後方一致
→これで場所の特定がはかどる
例 a[href *= 'pdf']
< a href = 'aaa.pdf' > aaa</ >
<a href='pdf.html'>aaa</a>
<a href='a_pdf.html'>aaa</a>
--------------------演習問題2--------------------
06 - 2attr.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">attrメソッド</p>
// <p class="btn1-2 btn">攻撃</p>
// <p class="box1">
// <img class="player1" src="img/p_01.gif">
// </p>
// <p class="box2-1">
// 入力欄２－１
// <input id="form2-1" type="text">
// <span class="warning2-1 warning"></span>
// </p>
// <p class="box2-2">
// 入力欄２－２
// <input id="form2-2" type="text">
// <span class="warning2-2 warning"></span>
// </p>
// <div class="box3">
// 入力欄３
// <p>
// 税抜価格：<input id="price3-1" type="text" size="8">
// </p>
// <p>
// 消費税：<input id="tax3" type="text" readonly>
// </p>
// <p>
// 税込価格：<input id="price3-2" type="text" readonly>
// </p>
// <p>
// <input id="calc3" type="button" value="計算">
// </p>
// </div>
// </div>
// </div>
<script>
$(function () {
// サンプル１－１
$('.btn1-1').on('click', function () {
let elm = $('.player1');
let tmpSrc = elm.attr('src');//属性値を取得
elm.attr('src', 'img/p_01magic.gif');//書き換え
window.setTimeout(function () {
elm.attr('src', tmpSrc);
}, 1000);
});
// 練習１
// クラス名「btn1-2」をクリックしたときに
// クラス名「player1」のsrc属性を「img/p_01mov.gif」に変更する
// 1秒後に元の画像に戻すこと
$('.btn1-2').on('click', function () {
let elm = $('.player1');
let tmpSrc = elm.attr('src');//属性値を取得（引数の個数が1つだから）
// 元の属性値を変数tmpSrcに代入
// 文字列型：'img/p_01mov.gif'
elm.attr('src', 'img/p_01mov.gif');//属性の書き換え（引数の個数が2つだから）
// src→img / p_01mov.gifへ
window.setTimeout(function () {
elm.attr('src', tmpSrc);
// 元の画像に1000ミリ秒かけて戻す処理
}, 1000);
});
// サンプル２
// イベント blur→フォーカスが外れたときに作動する
let formVal = $('#form2-1').val();
console.log(formVal);
if (formVal === '') {
$('.warning2-1').html('入力してください')
}
});
// 練習２
// ID名「form2-2」からフォーカスを外したときに
// 空文字の場合は「入力してください」と表示すること
// 入力文字が10文字以上の場合は「10文字未満で入力してください」と表示すること
// ※警告文はクラス名「warning2-2」に表示すること
let formVal = $('#form2-2').val();
console.log(formVal.length);
if (formVal === '') {
$('.warning2-2').html('入力してください')
} else if (formVal.length > 0) {
$('.warning2-2').on('empty', $('.warning2-2').html(''))
}
if (formVal.length >= 10) {
$('.warning2-2').html('10文字未満でにゅうりょくしろ')
}
});
// 練習３
// 入力欄３を使用して消費税の計算結果を表示すること
var tax = 1.10;
// ↑税率の設定
$('#calc3').on('click', function () {
let foRm = $('#price3-1').val();
// 税込み価格の計算
let result = Math.round(foRm * tax)
console.log(result);
$('#price3-2').val(result);
// 消費税額の計算
console.log(result - foRm);
$('#tax3').val(result - foRm);
});
});
</script>
</body >
</html >
