14-20 web API学習のまとめ
124664 ワード
Web API事件の3つの要素 イベントソース(誰):イベントをトリガするイベントタイプ(何のイベント):例えば、clickクリックイベントハンドラ(何をするか):イベントトリガ後に実行するコード(関数形式)、イベントハンドライベント実行ステップ 1.イベントソース2を取得します.イベント(バインディングイベント)3.イベントハンドラを追加します.操作要素JavaScriptのDOM操作はウェブページの内容、構造と様式を変えることができます.DOM操作要素を利用して要素の内容、属性などを変えることができます.(注意:これらの動作はすべて要素オブジェクトの属性によって実現される) 要素コンテンツ(取得または設定)を変更する .
element.innerTextは、開始位置から終了位置までのコンテンツelement.inners HTML inners Textが要素内容を変更する.
内容取得時の違い:innerTextはスペースと改行を削除し、innerHTMLはスペースと改行を保持します.
設定内容の違い:innerTextはhtmlを認識しません.innerHTMLは識別します.
ケースコード一般的な要素の属性操作1.innerText、innerHTML変更要素内容2.src、href 3.id、alt、title は、属性の値 を取得する.
元素オブジェクト.属性名
属性の値を設定
元素オブジェクト.属性名=値
ケースコード例:時分見舞い フォーム要素の属性動作 DOMを利用して、フォーム要素の属性type、value、checked、selected、disabledを操作できます.
属性の値を取得
元素オブジェクト.属性名
属性の値を設定
元素オブジェクト.属性名=値
フォーム要素にはdisabled、checked、selectedなどの属性があり、要素オブジェクトのこれらの属性の値はブール型である.
ケースコードスタイル属性操作 1.element.style行のスタイル操作2.element.classNameスタイル操作は、JSを通じて要素のサイズ、色、位置などのスタイルを変更できます.
一般的な方法
スタイル1:スタイル属性要素オブジェクトを操作するスタイル属性も対象です.
要素オブジェクト.スタイル属性=値;
ケースコード
1.すべての要素はスタイルをクリアします.2.現在の要素にスタイルを設定します.(自分を残してください.)3.順番を逆にしないように注意してください.まず他の人を殺して、自分をセットします.
ポイント
//これのforサイクルが始まりましたので、btns[i]を使えます.thisを使う必要があります.サイクルが終わったiはもう5になりました.最大の下付きは4です.undefinedです. tabバーをクリックして色を変えるケース インターレースの変色例ここでは、クラス名によって属性を変更したほうがいいです.js関数の中身 を変更しないでください. tabバー切替 カスタム属性操作は、属性値div.get Attribute()を取得する. 属性値div.setAttribute()を設定します.
属性div.removeAttributeを削除します. H 5カスタム属性の目的は、データを保存して使用することです.データベースに保存せずにページに保存できるデータもあります.
カスタム属性取得は、getAttribute(“属性名”)で取得します.
1.最初の取得方法:get Attribute(‘data-indx’);get Attribute(‘data-list-name’);2.第二の方法と取得方法:dataset.listName;dataset[‘listName’] ノード動作 親レベルノード consolie.log(erweim.parent Nodae);サブ要素ノード 1.第一の種類:consolone.log(l.childNodes)(基本的には使えない)2.第二の種類:consolie.log(l.Children);(最もよく使われる)consolie.log(l.Children[0]);第1のサブノードconsoline.log(l.Children[l.Children.length-1]を取得する.兄弟ノード1.上／下の兄弟ノード 1.nextSiblingの次の兄弟ノードは、要素ノードまたはテキストノードなどの2.previous Siblingの前の兄弟ノードを含む.
2.上/下の兄弟要素ノードを得るは、ノード を作成する.は、ノード1を追加し、親ノードを指定するサブノードリストの末尾にノードを追加し、cssと同様のafter疑似要素 を追加する.ケース簡易版の投稿メッセージ キーボードイベントオブジェクトは、keyCode属性を使用して、ユーザがどのキーを押すかを判断する .ケース:京東ボタンの入力内容をシミュレートします.sボタンを押すと、カーソルが検索ボックスに位置します. 注意:フォーカスイベントの取得をトリガします.要素オブジェクト・focus()を使用できます.ケース:京東エクスプレスの番号を模擬して要求を調べます.テキストボックスに内容を入力すると、テキストボックスの上に自動的に大きなサイズの内容が表示されます. BOMページ(ウィンドウ)ロードイベント(2種類)の1番目のwindow.onloadはウィンドウ(ページ)ロードイベントであり、ドキュメントの内容が完全にロードされると、イベント(画像、スクリプトファイル、CSSファイルなどを含む)をトリガします.は、アプリケーションの処理関数を呼び出します.2番目のDOMContentLoadedイベントのトリガは、DOMロードが完了したときだけで、スタイルテーブル、画像、flashなどを含みません. IE 9以上がサポート!!
ページの画像が多い場合、ユーザーからオンラインにアクセスすると、より長い時間が必要になります.インタラクティブ効果が実現できなくなり、必然的にユーザーの体験に影響を与えます.ウィンドウサイズのイベントを調整するwindow.onresizeは、ウィンドウサイズのローディングイベントを調整し、トリガすると呼び出される処理関数です.1.ウィンドウサイズがピクセル変化すると、このイベントが発生します.2.これを利用してレスポンスレイアウトを完了します.window.inner Width現在の画面の幅 タイマー(2つの)setTimeout()set Interval()set Timeout()爆弾タイマーオンタイマ一般関数は、コード順に直接起動される.
簡単に理解します.コールバックという意味です.前の仕事が終わったら、後でこの関数を呼び出します.例えば、タイマーの中の呼び出し関数、イベントハンドリング関数もコールバック関数です.
以前私たちが話したelement.onclick=function(){}またはelement.addEvent Listener("click",fn);中の関数もコールバック関数です. 停止タイマー set Interval()アラームタイマオンタイマ 停止タイマー:clear Interval()例:メールのカウントダウンボタンを送信した後、このボタンは60秒以内に再度クリックすることができず、メールの繰り返しを防ぐ. locationオブジェクトlocationオブジェクトの属性.例:5分自動ジャンプページ
<body>
<div>123</div>
<script>
//
// div
// 1.
var div = document.querySelector('div');
// 2.
// div.onclick
// 3.
div.onclick = function() {
console.log(' ');
}
</script>
</body>
element.innerTextは、開始位置から終了位置までのコンテンツelement.inners HTML inners Textが要素内容を変更する.
<body>
<button> </button>
<div> </div>
<p>1123</p>
<script>
// ， div
// 1.
var btn = document.querySelector('button');
var div = document.querySelector('div');
// 2.
btn.onclick = function() {
// div.innerText = '2019-6-6';
div.innerHTML = getDate();
}
function getDate() {
var date = new Date();
// 2019 5 1
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = [' ', ' ', ' ', ' ', ' ', ' ', ' '];
var day = date.getDay();
return ' ：' + year + ' ' + month + ' ' + dates + ' ' + arr[day];
}
</script>
</body>
内容取得時の違い:innerTextはスペースと改行を削除し、innerHTMLはスペースと改行を保持します.
設定内容の違い:innerTextはhtmlを認識しません.innerHTMLは識別します.
ケースコード
<body>
<div></div>
<p>
<span>123</span>
</p>
<script>
// innerText innerHTML
// 1. innerText html
var div = document.querySelector('div');
// div.innerText = ' ： 2019';
// 2. innerHTML html W3C
div.innerHTML = ' ： 2019';
//
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);
</script>
</body>
元素オブジェクト.属性名
属性の値を設定
元素オブジェクト.属性名=値
ケースコード
<body>
<button id="ldh"> </button>
<button id="zxy"> </button> <br>
<img src="images/ldh.jpg" alt="" title=" ">
<script>
// src
// 1.
var ldh = document.getElementById('ldh');
var zxy = document.getElementById('zxy');
var img = document.querySelector('img');
// 2.
zxy.onclick = function() {
img.src = 'images/zxy.jpg';
img.title = ' ';
}
ldh.onclick = function() {
img.src = 'images/ldh.jpg';
img.title = ' ';
}
</script>
</body>
<body>
<img src="images/s.gif" alt="">
<div> </div>
<script>
// ，
//
// ， ， src
// div ， ，
// 1.
var img = document.querySelector('img');
var div = document.querySelector('div');
// 2.
var date = new Date();
var h = date.getHours();
// 3.
if (h < 12) {
img.src = 'images/s.gif';
div.innerHTML = ' ， ， ';
} else if (h < 18) {
img.src = 'images/x.gif';
div.innerHTML = ' ， ， ';
} else {
img.src = 'images/w.gif';
div.innerHTML = ' ， ， ';
}
</script>
</body>
属性の値を取得
元素オブジェクト.属性名
属性の値を設定
元素オブジェクト.属性名=値
フォーム要素にはdisabled、checked、selectedなどの属性があり、要素オブジェクトのこれらの属性の値はブール型である.
ケースコード
<body>
<button> </button>
<input type="text" value=" ">
<script>
// 1.
var btn = document.querySelector('button');
var input = document.querySelector('input');
// 2.
btn.onclick = function() {
// value
input.value = ' ';
// disabled button
// btn.disabled = true;
this.disabled = true;
// this btn
}
</script>
</body>
一般的な方法
スタイル1:スタイル属性要素オブジェクトを操作するスタイル属性も対象です.
要素オブジェクト.スタイル属性=値;
ケースコード
<body>
<div></div>
<script>
// 1.
var div = document.querySelector('div');
// 2.
div.onclick = function() {
// div.style
this.style.backgroundColor = 'purple';
this.style.width = '250px';
}
</script>
</body>
1.すべての要素はスタイルをクリアします.2.現在の要素にスタイルを設定します.(自分を残してください.)3.順番を逆にしないように注意してください.まず他の人を殺して、自分をセットします.
ポイント
//これのforサイクルが始まりましたので、btns[i]を使えます.thisを使う必要があります.サイクルが終わったiはもう5になりました.最大の下付きは4です.undefinedです.
<button> 1</button>
<button> 2</button>
<button> 3</button>
<button> 4</button>
<button> 5</button>
<scritpt>
//1.
var btns = document.querySelectorAll('button');
//2.
// button
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function () {
// for btns[i],
// i 5 , undefined;
//
//
for (var j = 0; j < btns.length; j++) {
btns[j].style.backgroundColor = '';
}
//
this.style.backgroundColor = 'skyblue';
})
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table {
width: 800px;
margin: 100px auto;
text-align: center;
border-collapse: collapse;
font-size: 14px;
}
thead tr {
height: 30px;
background-color: skyblue;
}
tbody tr {
height: 30px;
}
tbody td {
border-bottom: 1px solid #d7d7d7;
font-size: 12px;
color: blue;
}
.bg {
background-color: skyblue;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>003526</td>
<td> 3 </td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td> 3 </td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td> 3 </td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td> 3 </td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td> 3 </td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td> 3 </td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
</tbody>
</table>
<script>
//1.
var trs = document.querySelector('tbody').querySelectorAll('tr');
//2.
for (var i = 0; i < trs.length; i++) {
trs[i].addEventListener('mouseover', function () {
//
// for (var j = 0; j < trs.length; j++) {
// trs[j].className = '';
// }
this.className = 'bg'
})
//
trs[i].addEventListener('mouseout', function () {
this.className = '';
})
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 978px;
margin: 100px auto;
}
.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current"> </li>
<li> </li>
<li> </li>
<li> （50000）</li>
<li> </li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
（50000）
</div>
<div class="item">
</div>
</div>
</div>
<script>
//1. , , , ( )
//
// var tab_list = document.querySelector('.tab_list');// . !!!!!
// var lis = document.querySelectorAll('li');
// var items = document.querySelectorAll('.item');// . !!!!!
// for (var i = 0; i < lis.length; i++) {
// lis[i].setAttribute('index', i)// set , get , index
// lis[i].onclick = function () {
// for (var i = 0; i < lis.length; i++) {
// lis[i].className = '';
// }
// //
// this.className = 'current';
// //2.
// var index = this.getAttribute('index');
// // ,
// for (var i = 0; i < items.length; i++) {
// items[i].style.display = 'none'
// }
// items[index].style.display = 'block';
// }
// }
// 1.
var lis = document.querySelectorAll('.tab_list li');
var items = document.querySelectorAll('.tab_con .item');// , classname !!!!
// 2.
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onclick = function () {
for (var i = 0; i < lis.length; i++) {
lis[i].classList.remove('current');
}
this.classList.add('current')
var index = this.index;
for (var j = 0; j < items.length; j++) {
items[j].style.display = 'none';
}
items[index].style.display = 'block';
}
}
</script>
</body>
</html>
属性div.removeAttributeを削除します.
カスタム属性取得は、getAttribute(“属性名”)で取得します.
1.最初の取得方法:get Attribute(‘data-indx’);get Attribute(‘data-list-name’);2.第二の方法と取得方法:dataset.listName;dataset[‘listName’]
2.上/下の兄弟要素ノードを得る
1.nextElementSibling
2.previousElementSibling
function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
var li = document.createElement('li)
1.node.appendChild(child)
var li = document.creareElement('li');
var ul = docunment.querySelector('ul');
ul.appendChild(li);
var lili = document.createElement('li');
ul.insertBefore(lili,ul.chileren[0]);
<body>
<textarea name="" id=""></textarea>
<button> </button>
<ul>
</ul>
<script>
1.
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
2.
btn.onclick = function(){
1.
var li = document.createElement('li');
li
li.innerHTML = text.value;
2.
ul.insertBefor(li,ul.children[0]);
}
</script>
</body>
<script>
//
//1. keyup
document.addEventListener('keyup', function() {
console.log(' ');
})
//3. keypress ctrl shift
document.addEventListener('keypress', function() {
console.log(' press');
})
//2. keydown ctrl shift
document.addEventListener('keydown', function() {
console.log(' down');
})
// 4. keydown -- keypress -- keyup
</script>
<script>
// keyCode ASCII
document.addEventListener('keyup', function(e) {
console.log('up:' + e.keyCode);
// keycode ASCII
if (e.keyCode === 65) {
alert(' a ');
} else {
alert(' a ')
}
})
document.addEventListener('keypress', function(e) {
// console.log(e);
console.log('press:' + e.keyCode);
})
</script>
<input type="text">
<script>
//
var search = document.querySelector('input');
// document keyup
document.addEventListener('keyup', function(e) {
// keyCode
if (e.keyCode === 83) {
//
search.focus();
}
})
</script>
<div class="search">
<div class="con">123</div>
<input type="text" placeholder=" " class="jd">
</div>
<script>
//
var con = document.querySelector('.con');
var jd_input = document.querySelector('.jd');
// keyup
jd_input.addEventListener('keyup', function() {
//
if (this.value == '') {
// ，
con.style.display = 'none';
} else {
// ， ，
con.style.display = 'block';
con.innerText = this.value;
}
})
// ，
jd_input.addEventListener('blur', function() {
con.style.display = 'none';
})
//
jd_input.addEventListener('focus', function() {
//
if (this.value !== '') {
//
con.style.display = 'block';
}
})
</script>
ページの画像が多い場合、ユーザーからオンラインにアクセスすると、より長い時間が必要になります.インタラクティブ効果が実現できなくなり、必然的にユーザーの体験に影響を与えます.
<script>
window.addEventListener('load', function() {
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
alert(' ');
})
})
window.addEventListener('load', function() {
alert(22);
})
document.addEventListener('DOMContentLoaded', function() {
alert(33);
})
</script>
<script>
//
window.addEventListener('load', function() {
var div = document.querySelector('div');
//
window.addEventListener('resize', function() {
// window.innerWidth
console.log(' ');
if (window.innerWidth <= 800) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
})
})
</script>
<div></div>
簡単に理解します.コールバックという意味です.前の仕事が終わったら、後でこの関数を呼び出します.例えば、タイマーの中の呼び出し関数、イベントハンドリング関数もコールバック関数です.
以前私たちが話したelement.onclick=function(){}またはelement.addEvent Listener("click",fn);中の関数もコールバック関数です.
<script>
//
setTimeout(function() {
console.log(' ');
}, 2000);
function callback() {
console.log(' ');
}
//
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);
</script>
<body>
<img src="images/ad.jpg" alt="" class="ad">
<script>
//
var ad = document.querySelector('.ad');
//
setTimeout(function() {
ad.style.display = 'none';
}, 5000);
</script>
</body>
<button> </button>
<script>
var btn = document.querySelector('button');
//
var timer = setTimeout(function() {
console.log(' ');
}, 5000);
//
btn.addEventListener('click', function() {
//
clearTimeout(timer);
})
</script>
<script>
// 1. setInterval
setInterval(function() {
console.log(' ');
}, 1000);
</script>
<div>
<span class="hour">1</span>
<span class="minute">2</span>
<span class="second">3</span>
</div>
<script>
// 1. （ ）
var hour = document.querySelector('.hour'); //
var minute = document.querySelector('.minute'); //
var second = document.querySelector('.second'); //
var inputTime = +new Date('2019-5-1 18:00:00'); //
countDown(); // ，
// 2.
setInterval(countDown, 1000);
function countDown() {
var nowTime = +new Date(); //
var times = (inputTime - nowTime) / 1000; // times
var h = parseInt(times / 60 / 60 % 24); //
h = h < 10 ? '0' + h : h;
hour.innerHTML = h; //
var m = parseInt(times / 60 % 60); //
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
var s = parseInt(times % 60); //
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}
</script>
： <input type="number"> <button> </button>
<script>
var btn = document.querySelector('button');
// ，
var time = 3;
//
btn.addEventListener('click', function() {
//
btn.disabled = true;
//
var timer = setInterval(function() {
//
if (time == 0) {
//
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = ' ';
} else {
btn.innerHTML = ' ' + time + ' ';
time--;
}
}, 1000);
});
</script>
<button> </button>
<div></div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.addEventListener('click', function() {
// console.log(location.href);
location.href = 'http://www.itcast.cn';
})
var timer = 5;
setInterval(function() {
if (timer == 0) {
location.href = 'http://www.itcast.cn';
} else {
div.innerHTML = ' ' + timer + ' ';
timer--;
}
}, 1000);
</script>