JSの構成
WebAPIとJavaScriptベースの違い
Web APIは、ページの相互作用効果のためにJavaScriptベースを広範囲に使用するJavaScriptベースのアプリケーションです。
APIとWebAPIの違い
- APIはプログラマーに提供されるツールであり、あなたはそれを使うことができます
- Web APIは、ブラウザの機能とページ要素を操作するためにブラウザによって提供されるAPI（DOMおよびBOM）のセットです。
- Web APIには通常、ブラウザーでのインタラクティブな効果のための入力と出力（関数は戻り値を渡し、戻り値に参加します）があります。
判定
DOM：ドキュメントオブジェクトモデル。Webコンテンツにアクセスして操作するためのインターフェイスとメソッドを提供します。DOMを使用すると、Webページ構造の外観とスタイルを変更できます。
DOMツリー
- ページはドキュメントであり、ドキュメントで表されます
- ページ上のすべての要素はタグと呼ばれ、要素で表されます
- ページのすべてのコンテンツはノードと呼ばれ、ノードで示されます
要素を取得
ID名で要素を取得する
getElementById（id）を介して取得します
予防
- 戻り値は要素オブジェクトです
- パラメータは大文字と小文字を区別する文字列です
- jsコードは上から下に順番に実行されるため、script要素はbody要素の下に記述されます。
- console.dirは、返された要素オブジェクトを出力して、要素の属性とメソッドをより適切に表示できます。
<!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>通过id名获取元素</title>
</head>
<body>
<div id='box'>hello word</div>
</body>
<script>
var box = document.getElementById('box');
console.log(box);
console.log(typeof box);
console.dir(box)
</script>
</html>
タグ名で要素を取得する
getElementsByTagName（ 'tag name'）に従って取得します
予防
- パラメータは大文字と小文字を区別する文字列です
- 戻り値は、疑似配列の形式で格納された要素オブジェクトのコレクションです。
- 各要素オブジェクトは、トラバースすることで取得できます
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通过标签名获取元素</title>
</head>
<body>
<ul>
<li>CSDN 程序员的天堂</li>
<li>CSDN 程序员的天堂</li>
<li>CSDN 程序员的天堂</li>
<li>CSDN 程序员的天堂</li>
<li>CSDN 程序员的天堂</li>
<li>CSDN 程序员的天堂</li>
</ul>
</body>
<script>
var lis = document.getElementsByTagName('li');
console.log(lis);
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
</script>
</html>
要素内のラベルを取得します（国を保存するための曲線）
アイデアは次のとおりです
- 最初に要素のIDを取得します
- 要素のIDで要素のタグ名を取得します
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取某个元素的标签</title>
</head>
<body>
<!-- 要求如下：获取第二个ul里面的li -->
<ul>
<li>hello word</li>
<li>hello word</li>
<li>hello word</li>
<li>hello word</li>
<li>hello word</li>
</ul>
<ul id="UI">
<li>尧子陌</li>
<li>尧子陌</li>
<li>尧子陌</li>
<li>尧子陌</li>
<li>尧子陌</li>
<li>尧子陌</li>
</ul>
</body>
<script>
var ul = document.getElementById('UI');
var lis = ul.getElementsByTagName('li');
console.log(lis);
</script>
</html>
クラス名で要素を取得する
getElementsByClassName（ 'class name'）を介して要素ノートを取得します
- パラメータは大文字と小文字を区別する文字列です
- 戻り値は要素オブジェクトのコレクションです
- 互換性があります（h5の新機能）
<!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>通过类名获取元素</title>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
</body>
<script>
var boxs = document.getElementsByClassName('box');
console.log(boxs)
</script>
</html>
querySelector（ 'selector'）を介して要素を取得します
予防
- 指定されたセレクターの最初の要素オブジェクトを取得できます
- パラメータのセレクターには記号を追加する必要があります
<!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>通过类名获取元素</title>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
</body>
<script>
var boxs = document.getElementsByClassName('box');
console.log(boxs)
</script>
</html>
querySelectorAll（ 'selector'）を介して要素を取得します
予防
- 戻り値は、指定されたセレクターのすべての要素オブジェクトのコレクションです。
- パラメータのセレクタは署名する必要があります
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通过querySelectorAll('选择器')来获取元素对象</title>
</head>
<body>
<ul id="box">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script>
var box = document.getElementById('box')
var lis = box.querySelectorAll('li');
console.log(lis);
</script>
</html>
特別な要素を取得する（body html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取特殊元素</title>
</head>
<body>
</body>
<script>
var body = document.body;
console.log(body);
console.dir(body);
var html = document.documentElement;
console.log(html);
console.dir(html)
</script>
</html>
イベントベース
JavaScriptを使用すると動的ページを作成できますが、イベントはjavascriptで検出できる動作です。
トリガー------>応答メカニズム
イベントの3つの要素
- イベントソース：イベントがトリガーされたオブジェクト
- イベントタイプ：クリックイベント、キーボードプレスイベントなど、トリガーされるイベントの種類
- イベントハンドラー：関数の割り当てにより完了
イベントの3つの要素：唐寅はQiuxiangを指しています
ボタンをクリックして、唐寅のQiuxiangのポイントの警告ボックスをポップアップします
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件三要素</title>
</head>
<body>
<button>唐伯虎</button>
</body>
<script>
var bth = document.querySelector('button');
bth.onclick = function() {
alert('唐伯虎点秋香')
}
</script>
</html>
イベント実行手順
1.イベントソースを取得します
2.イベントオブジェクトをバインドします
3.イベントハンドラー
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件执行的步骤</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
<script>
// 获取事件源
var div = document.querySelector('div');
// 绑定事件类型并执行事件处理程序
div.onclick = function() {
console.log('hello word');
}
</script>
</html>
マウスイベント
操作要素
DOMを操作することで、要素の外観、構造、内容などを変更できます。
要素の内容を変更する操作要素
- element.innerHTML
- element.innerText
違いは次のとおりです
- innerHTMLは、w3cが推奨する標準であり、HTMLタグのスペースと改行を認識します。
- innerTextは、w3cで推奨されていない標準であり、HTMLタグスペースと改行を認識しません。
- innerHTMLとinnerTextはどちらも読み取りと書き込みが可能です
要素の内容を変更するための演習1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>innerHTML执行的步骤</title>
<style>
div {
font: normal normal 20px '楷体';
color: blue;
}
</style>
</head>
<body>
<button>time</button>
<div></div>
</body>
<script>
var bth = document.querySelector('button');
var div = document.querySelector('div')
bth.onclick = function() {
div.innerHTML = getTimer()
}
function getTimer() {
var date = new Date();
var year = date.getFullYear(); //年
var mouth = date.getMonth(); //年
var day = date.getDate(); //当天日期
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
var week = date.getDay(); //星期
return year + '年' + mouth + '月' + day + '日' + arr[week]
}
</script>
</html>
要素の内容を変更するための演習2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>innerHTML及innerText</title>
</head>
<body>
<div> </div>
<p>
hello word
<span>尧子陌</span>
</p>
</body>
<script>
var div = document.querySelector('div');
div.innerHTML = '<strong>惊鸿</strong>'
var p = document.querySelector('p');
console.log(p.innerHTML);
console.log(p.innerText);
</script>
</html>
一般的に使用される要素の属性
共通要素属性の演習1
対応するボタンをクリックして、対応する季節の写真を表示します
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常用的属性</title>
<style>
img {
width: 528px;
height: 300px;
}
button:nth-of-type(1) {
margin-left: 0px;
}
button {
margin-left: 134px;
}
</style>
</head>
<body>
<img src="./upload/star.jpeg" alt="星星">
<br />
<button id="spring">春</button>
<button id="summer">夏</button>
<button id="fall">秋</button>
<button id="winter">冬</button>
</body>
<script>
var img = document.querySelector('img');
var spring = document.getElementById('spring');
var summer = document.querySelector('#summer');
var fall = document.querySelector('#fall');
var winter = document.getElementById('winter')
spring.onclick = function() {
img.src = './upload/spring.jpg';
img.title = '春'
}
summer.onclick = function() {
img.src = './upload/summer.jpg';
img.title = '夏'
}
fall.onclick = function() {
img.src = './upload/autumn.jpeg';
img.title = '秋'
}
winter.onclick = function() {
img.src = './upload/winter.jpg';
img.title = '冬'
}
</script>
</html>
共通要素属性の演習2
異なる時間に応じて、異なる写真やテキストを表示する
アイデアは次のとおりです
- システム時刻に基づいて判断するため、組み込みの日付オブジェクトが必要です
- マルチブランチセンテンスを使用して、さまざまな写真を判断して設定します
- divコンテナが必要で、時間に応じて異なるテキストを設定します
- 画像コンテナが必要です。時間に応じて異なる時間を設定してください
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常用元素属性之习题2</title>
<style>
* {
margin: 0;
padding: 0;
}
img {
width: 600px;
height: 600px;
}
div {
font: normal normal 20px '宋体';
color: blue;
}
</style>
</head>
<body>
<img src="./upload/star.jpeg" alt="">
<div></div>
</body>
<script>
// 获取div及img的元素对象
var div = document.querySelector('div');
var img = document.querySelector('img')
// 获取内置对象之小时
var date = new Date();
var h = date.getHours();
console.log(h);
if (h < 12) {
img.src = './upload/morning.jpg';
div.innerHTML = '早晨好'
} else if (h < 18) {
img.src = './upload/midday.jpg';
div.innerHTML = '下午好'
} else {
img.src = 'upload/night.jpg';
div.innerHTML = '晚上好'
}
</script>
</html>
一般的なフォーム属性
予防
- フォームの値はinnerHTMLとinnerTextで変更できません
- フォームの値は値によって変更されます
- これは、現在のイベント関数の呼び出し元です
フォームの一般的な属性の演習1
現在のボタンをクリックすると、フォームの内容が変更され、ボタンが無効になります
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单常用属性之习题1</title>
</head>
<body>
<button>按钮</button>
<input type="text" value="可用">
</body>
<script>
var bth = document.querySelector('button');
var ipt = document.querySelector('input');
bth.onclick = function() {
ipt.value = '禁用';
this.disabled = true
}
</script>
</html>
フォームの共通属性のJingdongパスワードボックスの模倣
コアアイデア
アイボタンをクリックすると、入力タイプがパスワードボックスから入力ボックスに変換されます
次のように進めます
-
ボタンには2つの状態があります。1回クリックして入力タイプに変更し、もう一度クリックしてパスワードボックスタイプに変更します。
-
フラグ変数を宣言します。フラグが0の場合、フォームタイプは入力ボックスであり、フラグは1です。フラグが1の場合、フォームタイプはパスワードボックスであり、フラグは0です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>彷京东密码框</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 400px;
height: 40px;
margin: 200px auto;
}
input {
outline: none;
width: 400px;
height: 40px;
border: 0;
border-bottom: 1px solid gray;
}
img {
position: absolute;
top: 10px;
left: 362px;
width: 25px;
}
</style>
</head>
<body>
<div class="box">
<label for="">
<img src="./upload/close.png" alt="" id="eyes">
</label>
<input type="password" id="ipt">
</div>
</body>
<script>
var eyes = document.querySelector('#eyes');
var ipt = document.querySelector('input');
var flag = 0;
eyes.onclick = function() {
if (flag == 0) {
ipt.type = 'text';
this.src = './upload/open.png';
flag = 1
} else {
ipt.type = 'password';
this.src = './upload/close.png';
flag = 0;
}
}
</script>
</html>
スタイル操作属性
- element.style：インラインスタイル操作
- element.className：クラス名の操作スタイル
予防
- fontSize、backgroundColorなど、スタイルを変更するときは、キャメルケースの名前を使用します。
- jsによって変更されたスタイルは、比較的高い割合を占めるインラインスタイルに属しています
スタイル操作属性の演習1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>样式操作属性之习题</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
color: red;
}
</style>
</head>
<body>
<div></div>
</body>
<script>
var box = document.querySelector('div');
box.onclick = function() {
this.style.backgroundColor = 'yellow'
}
</script>
</html>
スタイル操作の2次元コード隠蔽
コアアイデア
- 表示プロパティを使用して、要素を表示または非表示にします。dispaly：block（display）dispaly：block（hide）
- ボタンをクリックしてQRコードを非表示にします
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>样式操作之二维码</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 160px;
margin: 200px auto;
}
img:nth-of-type(2) {
position: absolute;
top: -10px;
right: -14px;
}
</style>
</head>
<body>
<div class="box">
<img src="./upload/tao.png" alt="">
<img src="./upload/wrong.png" alt="" class="bth">
</div>
</body>
<script>
var box = document.querySelector('.box');
var bth = document.querySelector('.bth');
bth.onclick = function() {
box.style.display = 'none'
}
</script>
</html>
スタイル操作淘宝網ウィザードマップ
アイデアは次のとおりです
- まず第一に、スプライトの写真は定期的に見つけることができます
- ループを使用して、スプライト画像の背景位置を変更します
- i * 44は、各スプライトのy座標の位置です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>样式操作之精灵图</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
width: 128px;
margin: 200px auto;
overflow: hidden;
list-style: none;
}
li {
float: left;
width: 24px;
height: 24px;
margin-left: 5px;
margin-bottom: 5px;
border: 1px solid gray;
background: url('./upload/sprite.png') no-repeat;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script>
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
var index = i * 44
console.log(lis[i]);
console.log(index);
console.log(lis[i].style.backgroundPosition = '0 -' + index + 'px');
}
</script>
</html>
隠しテキストコンテンツを表示するスタイル操作
2つのイベントが必要です：フォーカスイベントを取得するとフォーカスイベントを失う
- フォーカスが取得されると、フォームのコンテンツは空になります
- フォーカスが失われると、フォームのコンテンツはデフォルト値に復元されます
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>样式操作之显示与隐藏文本内容</title>
<style>
input {
display: block;
width: 200px;
margin: 200px auto;
padding-left: 20px;
color: #999;
}
</style>
</head>
<body>
<input type="text" value="手机">
</body>
<script>
// 获取元素对象
var ipt = document.querySelector('input');
// 绑定事件
ipt.onfocus = function() {
if (this.value == '手机') {
this.value = ''
}
this.style.color = '#333'
}
ipt.onblur = function() {
if (this.value == '') {
this.value = '手机'
}
this.style.color = '#999'
}
</script>
</html>
calssName操作スタイル
主なアイテム
- クラスはキーワードです
- スタイルが多い場合は、クラス名を使用してスタイル属性などを操作します。
- classNameは要素のクラス名を直接変更し、元のクラス名を上書きします
ClassName操作スタイルの演習1
divをクリックすると、スタイルを変更するために複数のクラス名が追加されます
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>className来操作样式</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background: pink;
margin: 200px auto;
}
.box {
box-sizing: border-box;
width: 400px;
height: 400px;
background-color: blueviolet;
margin: 200px auto;
padding-top: 200px;
text-align: center;
font: normal normal 25px '楷体';
}
</style>
</head>
<body>
<div>文本</div>
</body>
<script>
// 获取事件源
var div = document.querySelector('div');
console.log(div);
div.onclick = function() {
this.className = 'box'
}
</script>
</html>
classNmae操作スタイルのパスワードボックス形式はエラーを促します
- 最初に判断するのは、焦点がぼやけているかどうかです。
- 入力が正しければ、正しい情報が表示され、アイコンプロンプトは緑色になります
- 入力した単語数が6〜11桁でない場合、最初にエラーメッセージが表示され、アイコンが赤になります
- classNameを使用してスタイルを操作する
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>classNmae操作样式之密码框格式提示错误</title>
<style>
* {
margin: 0;
padding: 0;
}
.register {
width: 800px;
margin: 200px auto;
}
.message {
display: inline-block;
font-size: 12px;
color: #999;
background: url('./upload/mess.png') no-repeat;
padding-left: 20px;
}
.right {
background: url('./upload/right.png') no-repeat;
color: green;
}
.wrong {
background: url('./upload/wrong.png') no-repeat;
color: red;
}
</style>
</head>
<body>
<div class="register">
<input type="password">
<p class="message">请输入6~16位密码</p>
</div>
</body>
<script>
// 获取元素对象
var ipt = document.querySelector('input');
var message = document.querySelector('.message');
//进行内部处理得出结果
ipt.onblur = function() {
if (this.value.length < 6 || this.value.length > 16) {
message.innerHTML = '输入的信息有误';
message.className = 'message wrong'
} else {
message.innerHTML = '输入的信息正确';
message.className = 'message right'
}
}
</script>
</html>
