- 博主簡(jiǎn)介：想進(jìn)大廠的打工人
- 博主主頁：@xyk:
- 所屬專欄:?JavaEE初階
本篇文章為大家?guī)鞪avaScript WebAPI的使用，請(qǐng)各位過目~~
目錄
文章目錄
一、什么是JavaScript WebAPI
1.1 什么是DOM
二、常用的DOM?API
2.1 獲取元素
2.2 什么是事件
2.2.1 獲取/修改元素
三、簡(jiǎn)單的代碼示例
3.1 計(jì)數(shù)器
3.2?全選/取消全選按鈕
3.3 點(diǎn)擊圖片切換
3.4?點(diǎn)擊文字放大
3.5?實(shí)現(xiàn)夜間/日間模式的切換
四、操作頁面節(jié)點(diǎn)
4.1 新增節(jié)點(diǎn)
?4.2 刪除節(jié)點(diǎn)
五、綜合案例
5.1 猜數(shù)字
5.2 表白墻
一、什么是JavaScript WebAPI
前面學(xué)習(xí)的 JS 分成三個(gè)大的部分
- ECMAScript: 基礎(chǔ)語法部分
- DOM API: 操作頁面結(jié)構(gòu)
- BOM API: 操作瀏覽器
WebAPI 就包含了 DOM + BOM.
這個(gè)是 W3C 組織規(guī)定的.
1.1 什么是DOM
DOM 全稱為 Document Object Model，頁面文檔對(duì)象模型，html中的每個(gè)標(biāo)簽都是可以映射到JS中的一個(gè)對(duì)象中的, 標(biāo)簽中的內(nèi)容都可以通過JS對(duì)象感知到, JS對(duì)象修改對(duì)應(yīng)的屬性能夠影響到標(biāo)簽的展示, 通過這樣的DOM API就可以讓JS代碼來操作頁面元素.
一個(gè)頁面的結(jié)構(gòu)是一個(gè)樹形結(jié)構(gòu), 稱為 DOM 樹：
二、常用的DOM?API
2.1 獲取元素
這部分工作類似于 CSS 選擇器的功能.任何一個(gè)頁面都有一個(gè)document對(duì)象，其中document對(duì)象中的querySelector和querySelectorAll函數(shù)可以用來選擇元素, 通過傳入CSS選擇器來達(dá)到目的, 選擇的范圍是位于該函數(shù)之前所存在的選擇器, 沒找到返回值為null.
var element = document.querySelector(selectors);var element = document.querySelectorAll(selectors);document相當(dāng)于整個(gè)頁面的對(duì)象，通過它可以使用一些方法獲取HTML元素
<div class="box">abc</div>
<div id="id">def</div>
<h3><span><input type="text"></span></h3>
<script>
var elem1 = document.querySelector('.box');
console.log(elem1);
var elem2 = document.querySelector('#id');
console.log(elem2);
var elem3 = document.querySelector('h3 span input');
console.log(elem3);
</script>
如果想把符合選擇的元素都選中就需要使用querySelectorAll函數(shù)了, 在使用上和和querySelector 是一樣的.
<div class="box">abc</div>
<div id="id">def</div>
<script>
var elems = document.querySelectorAll('div');
console.log(elems);
</script>
2.2 什么是事件
JS 要構(gòu)建動(dòng)態(tài)頁面, 就需要感知到用戶的行為.
用戶對(duì)于頁面的一些操作(點(diǎn)擊, 選擇, 修改等) 操作都會(huì)在瀏覽器中產(chǎn)生一個(gè)個(gè)事件, 被 JS 獲取到, 從而進(jìn)行更復(fù)雜的交互操作.
事件的三要素:
- 事件源, 哪個(gè)HTML元素產(chǎn)生的事件.
- 事件類型, 比如鼠標(biāo)點(diǎn)擊, 鼠標(biāo)移動(dòng), 鍵盤輸入等.
- 事件處理程序, 當(dāng)事件發(fā)生之后, 要執(zhí)行哪個(gè)代碼.
代碼示例：
<button id="btn">點(diǎn)我一下</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function () {
alert("hello world");
}
</script>
- btn 按鈕就是事件源.
- 點(diǎn)擊就是事件類型
- function 這個(gè)匿名函數(shù)就是事件處理程序
- 其中 btn.onclick = function() 這個(gè)操作稱為 注冊(cè)事件/綁定事件
2.2.1 獲取/修改元素
在選中元素后, 就可以使用innerHTML屬性來獲取/修改一個(gè)標(biāo)簽里面的內(nèi)容了.
<div>
<span>hello world</span>
<span>hello world</span>
</div>
<script>
var div = document.querySelector('div');
// 讀取 div 內(nèi)部?jī)?nèi)容
console.log(div.innerText);
// 修改 div 內(nèi)部?jī)?nèi)容, 界面上就會(huì)同步修改
div.innerText = 'hello js <span>hello js</span>';
</script>
可見，innerText只能獲取文本內(nèi)容, 并不能獲取html結(jié)構(gòu)，通過innerHTML是可以獲取到div內(nèi)部的html結(jié)構(gòu)的，會(huì)將div標(biāo)簽中的html代碼也獲取到.
那么可以通過innerHTML來顯示寫入的HTML標(biāo)簽，?innerHTML用的場(chǎng)景是要比innerText更多的.
<div>
<span>hello world</span>
<span>hello world</span>
</div>
<script>
var div = document.querySelector('div');
// 讀取頁面內(nèi)容
console.log(div.innerHTML);
// 修改頁面內(nèi)容
div.innerHTML = '<span>hello js</span>'
</script>
?修改元素也是一樣的~
<div>
<span>hello world</span>
<span>hello world</span>
</div>
<button class="but">點(diǎn)一下試試</button>
<script>
let but = document.querySelector('.but');
but.onclick = function () {
let div = document.querySelector('div');
div.innerHTML = '<h1>這是一個(gè)一級(jí)標(biāo)題</h1>>';
console.log(div.innerHTML)
}
</script>
三、簡(jiǎn)單的代碼示例
3.1 計(jì)數(shù)器
<div id='count'>0</div>
<button id='countAdd'>計(jì)數(shù)器:點(diǎn)擊+1</button>
<script>
let counterAdd = document.querySelector('#countAdd');
counterAdd.onclick = function () {
let num = document.querySelector('#count');
let num1 = parseInt(num.innerHTML);
console.log(num1);
num1++;
num.innerHTML = num1;
};
</script>
這個(gè)代碼要注意的是, num.innerHTML這里拿到的元素內(nèi)容是字符串類型的, 直接進(jìn)行加法運(yùn)算就是字符串拼接的效果了, 而要完成算數(shù)相加的效果就需要將字符串轉(zhuǎn)換為整數(shù), 和Java中類似, 可以使用parseInt方法將字符串轉(zhuǎn)換為整數(shù), 而如果是浮點(diǎn)數(shù)就使用parseFloat方法
3.2?全選/取消全選按鈕
<input type="checkbox" id="all">我全都要 <br>
<input type="checkbox" class="girl">貂蟬 <br>
<input type="checkbox" class="girl">小喬 <br>
<input type="checkbox" class="girl">安琪拉 <br>
<input type="checkbox" class="girl">妲己 <br>
<script>
// 1. 獲取到元素
var all = document.querySelector('#all');
var girls = document.querySelectorAll('.girl');
// 2. 給 all 注冊(cè)點(diǎn)擊事件, 選中/取消所有選項(xiàng)
all.onclick = function () {
for (var i = 0; i < girls.length; i++) {
girls[i].checked = all.checked;
}
}
// 3. 給 girl 注冊(cè)點(diǎn)擊事件
for (var i = 0; i < girls.length; i++) {
girls[i].onclick = function () {
// 檢測(cè)當(dāng)前是不是所有的 girl 都被選中了.
all.checked = checkGirls(girls);
}
}
// 4. 實(shí)現(xiàn) checkGirls
function checkGirls(girls) {
for (var i = 0; i < girls.length; i++) {
if (!girls[i].checked) {
// 只要一個(gè) girl 沒被選中, 就認(rèn)為結(jié)果是 false(找到了反例)
return false;
}
}
// 所有 girl 中都沒找到反例, 結(jié)果就是全選中
return true;
}
</script>
1.點(diǎn)擊全選按鈕, 則選中所有選項(xiàng)
2. 只要某個(gè)選項(xiàng)取消, 則自動(dòng)取消全選按鈕的勾選狀態(tài)
3.3 點(diǎn)擊圖片切換
我們還可以在代碼中使用DOM直接獲取元素的屬性并修改元素的屬性, 比如這里實(shí)現(xiàn)一個(gè)效果, 就是點(diǎn)擊一個(gè)圖片就可以切換到另一張圖片, 然后再點(diǎn)擊就能再切換回來, 這個(gè)案例我們只需要設(shè)置點(diǎn)擊事件為修改圖片的路徑即可, 也就是修改src屬性.
<style>
img {
height: 500px;
}
</style>
<img src="https://wallpaperm.cmcm.com/fedea52c7f796c3eeeb8598d4a09a3e7.jpg" alt="">
<script>
let img = document.querySelector("img");
console.dir(img);
img.onclick = function() {
if (img.src.indexOf('a3e7.jpg') !== -1) {
img.src = 'https://ts1.cn.mm.bing.net/th/id/R-C.aa013700cacbd3db5776611cc7d786f4?rik=TrvmCRz42t76Dw&riu=http%3a%2f%2fimg.mm4000.com%2ffile%2fd%2fcf%2fc2faf5b719.jpg&ehk=mrYQeWJ8fZTs0fQ26qK%2buqQpLix4fOW4LAP3z3pF35E%3d&risl=&pid=ImgRaw&r=0';
} else {
img.src = 'https://wallpaperm.cmcm.com/fedea52c7f796c3eeeb8598d4a09a3e7.jpg';
}
}
</script>
3.4?點(diǎn)擊文字放大
CSS 中指定給元素的屬性, 都可以通過 JS 來修改.
行內(nèi)樣式操作：
element.style.[屬性名] = [屬性值];
element.style.cssText = [屬性名+屬性值];<div style="font-size:20px;">
這是一段文本,點(diǎn)擊之后字體放大
</div>
<script>
let div = document.querySelector("div");
div.onclick = function() {
//1.獲取文字大小屬性
let size = parseInt(div.style.fontSize);
console.log("修改前" + size);
//2.修改文字大小
size += 5;
//3.寫回到屬性
div.style.fontSize = size + "px";
console.log("修改后" + size);
}
</script>
3.5?實(shí)現(xiàn)夜間/日間模式的切換
實(shí)現(xiàn)點(diǎn)擊界面, 切換日間模式和夜間模式
<div class="container light">
這是一大段話. <br>
這是一大段話. <br>
這是一大段話. <br>
這是一大段話. <br>
</div>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
}
.light {
background-color: #f3f3f3;
color: #333;
}
.dark {
background-color: #333;
color: #f3f3f3;
}
</style>
<script>
let div = document.querySelector('div');
div.onclick = function () {
console.log(div.className);
if (div.className.indexOf('light') != -1) {
div.className = 'container dark';
} else {
div.className = 'container light';
}
}
</script>
四、操作頁面節(jié)點(diǎn)
述涉及的操作都是針對(duì)頁面已有的元素進(jìn)行操作的, 利用DOM API還可以完成添加/刪除元素的操作.
4.1 新增節(jié)點(diǎn)
添加元素主要有兩個(gè)步驟, 首先需要?jiǎng)?chuàng)建一個(gè)新的創(chuàng)建元素節(jié)點(diǎn), 然后把這個(gè)元素節(jié)點(diǎn)插入到父元素中就能完成元素的的添加(依賴于DOM樹).
可以使用creatElement方法來創(chuàng)建一個(gè)新的元素:
let element = document.createElement('元素標(biāo)簽名');
插入到DOM樹中:
父元素.appendChild(創(chuàng)建的子元素);
代碼示例：
<div class="container">
</div>
<script>
var div = document.createElement('div');
div.id = 'mydiv';
div.className = 'box';
div.innerHTML = 'hehe';
var container = document.querySelector('.container');
container.appendChild(div);
</script>
?4.2 刪除節(jié)點(diǎn)
父元素.removeChild(需要?jiǎng)h除的子元素);
五、綜合案例
5.1 猜數(shù)字
查看mdn文檔：
生成一個(gè)1到10的隨機(jī)數(shù)，利用Math.random()函數(shù)來獲取隨機(jī)數(shù), 該函數(shù)生成隨機(jī)數(shù)的范圍是[0,1)區(qū)間內(nèi)的一個(gè)小數(shù), 我們需要的是[1,10]之間的整數(shù), 我們可以乘上10后再拿到整數(shù)部分+1就能得到目標(biāo)區(qū)間的數(shù)了.
<div>
<h2>猜數(shù)字游戲</h2>
玩家輸入一個(gè) 1-10 數(shù)字：<input id="input_num" type="text"><p></p>
<input type="button" value=" 查看結(jié)果 " onclick="selectResult()">
<div id="result_div">
</div>
</div>
<script>
// 原生js猜數(shù)字游戲
function selectResult(){
// 產(chǎn)生隨機(jī)數(shù) 1-10
var randomNum = 1+Math.floor(Math.random()*10);
var userInputNum = document.getElementById("input_num").value;
var msg;
if(randomNum==userInputNum){
msg="<h4>恭喜：猜對(duì)了</h4>"
}else{
msg="<h4>抱歉：猜錯(cuò)了，正確的數(shù)字是："+randomNum+"</h4>";
}
document.getElementById("result_div").innerHTML = msg;
}
</script>
5.2 表白墻
目標(biāo)頁面如下, 點(diǎn)擊提交, 能夠把用戶輸入的話, 顯示在頁面中, 點(diǎn)擊撤銷, 能夠撤回最后一條顯示在頁面的話.
?代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表白墻</title>
<style>
* {
/* 消除瀏覽器的默認(rèn)樣式 */
margin: 0;
padding: 0;
/* 保證盒子不被撐大 */
box-sizing: border-box;
}
.container {
width: 600px;
margin: 20px auto;
}
h1 {
text-align: center;
}
p {
text-align: center;
color: #666;
margin: 20px 0;
}
.row {
/* 開啟彈性布局 */
display: flex;
height: 40px;
/* 水平方向居中 */
justify-content: center;
/* 垂直方向居中 */
align-items: center;
}
.row span {
width: 80px;
}
.row input {
width: 200px;
height: 30px;
}
.row button {
width: 280px;
height: 30px;
color: white;
background-color: orange;
/* 去掉邊框 */
border: none;
border-radius: 5px;
}
/* 點(diǎn)擊的時(shí)候有個(gè)反饋 */
.row button:active {
background-color: grey;
}
.message{
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>表白墻</h1>
<p>輸入內(nèi)容后點(diǎn)擊提交, 信息會(huì)顯示到下方表格中</p>
<div class="row">
<span>是誰: </span>
<input type="text">
</div>
<div class="row">
<span>對(duì)誰: </span>
<input type="text">
</div>
<div class="row">
<span>說: </span>
<input type="text">
</div>
<div class="row">
<button id="submit">提交</button>
</div>
<div class="row">
<button id="revert">撤銷</button>
</div>
</div>
<script>
// 實(shí)現(xiàn)提交操作. 點(diǎn)擊提交按鈕, 就能夠把用戶輸入的內(nèi)容提交到頁面上顯示.
// 點(diǎn)擊的時(shí)候, 獲取到三個(gè)輸入框中的文本內(nèi)容
// 創(chuàng)建一個(gè)新的 div.row 把內(nèi)容構(gòu)造到這個(gè) div 中即可.
let containerDiv = document.querySelector('.container');
let inputs = document.querySelectorAll('input');
let button = document.querySelector('#submit');
button.onclick = function() {
// 1. 獲取到三個(gè)輸入框的內(nèi)容
let from = inputs[0].value;
let to = inputs[1].value;
let msg = inputs[2].value;
if (from == '' || to == '' || msg == '') {
return;
}
// 2. 構(gòu)造新 div
let rowDiv = document.createElement('div');
rowDiv.className = 'message';
rowDiv.innerHTML = from + ' 對(duì) ' + to + ' 說: ' + msg;
containerDiv.appendChild(rowDiv);
// 3. 清空之前的輸入框內(nèi)容
for (let input of inputs) {
input.value = '';
}
}
let revertButton = document.querySelector('#revert');
revertButton.onclick = function() {
// 刪除最后一條消息.
// 選中所有的 row, 找出最后一個(gè) row, 然后進(jìn)行刪除
let rows = document.querySelectorAll('.message');
if (rows == null || rows.length == 0) {
return;
}
containerDiv.removeChild(rows[rows.length - 1]);
}
</script>
</body>
</html>
效果展示：?文章來源：http://www.zghlxwxcb.cn/news/detail-459755.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-459755.html
到了這里，關(guān)于JavaScript WebAPI 實(shí)戰(zhàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
