前言
DOM&BOM基礎(chǔ)是很重要前端知識(shí)咸作，在這里我準(zhǔn)備了所有相關(guān)知識(shí)的概念描述以及示例Demo，連載7篇宵睦，和大家一起溫故而知新记罚，覆蓋每一個(gè)知識(shí)點(diǎn)，相信在以后的開(kāi)發(fā)和面試中你總會(huì)用到它壳嚎。
常用的鍵盤事件
<body>
<script>
// 常用的鍵盤事件
//1. keyup 按鍵彈起的時(shí)候觸發(fā)
// document.onkeyup = function() {
// console.log('我彈起了');
// }
document.addEventListener('keyup', function() {
console.log('我彈起了');
})
//3. keypress 按鍵按下的時(shí)候觸發(fā) 不能識(shí)別功能鍵 比如 ctrl shift 左右箭頭啊
document.addEventListener('keypress', function() {
console.log('我按下了press');
})
//2. keydown 按鍵按下的時(shí)候觸發(fā) 能識(shí)別功能鍵 比如 ctrl shift 左右箭頭啊
document.addEventListener('keydown', function() {
console.log('我按下了down');
})
// 4. 三個(gè)事件的執(zhí)行順序 keydown -- keypress -- keyup
</script>
</body>
鍵盤事件對(duì)象之keyCode屬性
<body>
<script>
// 鍵盤事件對(duì)象中的keyCode屬性可以得到相應(yīng)鍵的ASCII碼值
// 1. 我們的keyup 和keydown事件不區(qū)分字母大小寫 a 和 A 得到的都是65
// 2. 我們的keypress 事件 區(qū)分字母大小寫 a 97 和 A 得到的是65
document.addEventListener('keyup', function(e) {
// console.log(e);
console.log('up:' + e.keyCode);
// 我們可以利用keycode返回的ASCII碼值來(lái)判斷用戶按下了那個(gè)鍵
if (e.keyCode === 65) {
alert('您按下的a鍵');
} else {
alert('您沒(méi)有按下a鍵')
}
})
document.addEventListener('keypress', function(e) {
// console.log(e);
console.log('press:' + e.keyCode);
})
</script>
</body>
模擬京東按鍵輸入內(nèi)容
<body>
<input type="text">
<script>
// 核心思路： 檢測(cè)用戶是否按下了s 鍵桐智，如果按下s 鍵，就把光標(biāo)定位到搜索框里面
// 使用鍵盤事件對(duì)象里面的keyCode 判斷用戶按下的是否是s鍵
// 搜索框獲得焦點(diǎn)： 使用 js 里面的 focus() 方法
var search = document.querySelector('input');
document.addEventListener('keyup', function(e) {
// console.log(e.keyCode);
if (e.keyCode === 83) {
search.focus();
}
})
</script>
</body>
模擬京東快遞單號(hào)查詢案例
<body>
<div class="search">
<div class="con">123</div>
<input type="text" placeholder="請(qǐng)輸入您的快遞單號(hào)" class="jd">
</div>
<script>
// 快遞單號(hào)輸入內(nèi)容時(shí)烟馅， 上面的大號(hào)字體盒子（con）顯示(這里面的字號(hào)更大）
// 表單檢測(cè)用戶輸入： 給表單添加鍵盤事件
// 同時(shí)把快遞單號(hào)里面的值（value）獲取過(guò)來(lái)賦值給 con盒子（innerText）做為內(nèi)容
// 如果快遞單號(hào)里面內(nèi)容為空说庭，則隱藏大號(hào)字體盒子(con)盒子
var con = document.querySelector('.con');
var jd_input = document.querySelector('.jd');
jd_input.addEventListener('keyup', function() {
// console.log('輸入內(nèi)容啦');
if (this.value == '') {
con.style.display = 'none';
} else {
con.style.display = 'block';
con.innerText = this.value;
}
})
// 當(dāng)我們失去焦點(diǎn)，就隱藏這個(gè)con盒子
jd_input.addEventListener('blur', function() {
con.style.display = 'none';
})
// 當(dāng)我們獲得焦點(diǎn)刊驴，就顯示這個(gè)con盒子
jd_input.addEventListener('focus', function() {
if (this.value !== '') {
con.style.display = 'block';
}
})
</script>
</body>
BOM頂級(jí)對(duì)象window
<body>
<script>
// window.document.querySelector()
var num = 10;
console.log(num);
console.log(window.num);
function fn() {
console.log(11);
}
fn();
window.fn();
// alert(11);
// window.alert(11)
console.dir(window);
// var name = 10;
console.log(window.name);
</script>
</body>
window常見(jiàn)事件onload
<head>
<script>
// window.onload = function() {
// var btn = document.querySelector('button');
// btn.addEventListener('click', function() {
// alert('點(diǎn)擊我');
// })
// }
// window.onload = function() {
// alert(22);
// }
window.addEventListener('load', function() {
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
alert('點(diǎn)擊我');
})
})
window.addEventListener('load', function() {
alert(22);
})
document.addEventListener('DOMContentLoaded', function() {
alert(33);
})
// load 等頁(yè)面內(nèi)容全部加載完畢，包含頁(yè)面dom元素 圖片 flash css 等等
// DOMContentLoaded 是DOM 加載完畢寡润，不包含圖片 falsh css 等就可以執(zhí)行 加載速度比 load更快一些
</script>
</head>
<body>
<button>點(diǎn)擊</button>
</body>
調(diào)整窗口大小事件
<body>
<script>
window.addEventListener('load', function() {
var div = document.querySelector('div');
window.addEventListener('resize', function() {
console.log(window.innerWidth);
console.log('變化了');
if (window.innerWidth <= 800) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
})
})
</script>
<div></div>
</body>
定時(shí)器之setTimeout
<body>
<script>
// 1. setTimeout
// 語(yǔ)法規(guī)范： window.setTimeout(調(diào)用函數(shù), 延時(shí)時(shí)間);
// 1. 這個(gè)window在調(diào)用的時(shí)候可以省略
// 2. 這個(gè)延時(shí)時(shí)間單位是毫秒 但是可以省略捆憎，如果省略默認(rèn)的是0
// 3. 這個(gè)調(diào)用函數(shù)可以直接寫函數(shù) 還可以寫 函數(shù)名 還有一個(gè)寫法 '函數(shù)名()'
// 4. 頁(yè)面中可能有很多的定時(shí)器，我們經(jīng)常給定時(shí)器加標(biāo)識(shí)符 （名字)
// setTimeout(function() {
// console.log('時(shí)間到了');
// }, 2000);
function callback() {
console.log('爆炸了');
}
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);
// setTimeout('callback()', 3000); // 我們不提倡這個(gè)寫法
</script>
</body>
清除setTimeout定時(shí)器
<body>
<button>點(diǎn)擊停止定時(shí)器</button>
<script>
var btn = document.querySelector('button');
var timer = setTimeout(function() {
console.log('爆炸了');
}, 5000);
btn.addEventListener('click', function() {
clearTimeout(timer);
})
</script>
</body>
5秒之后自定關(guān)閉的廣告
<body>
<img src="images/ad.jpg" alt="" class="ad">
<script>
var ad = document.querySelector('.ad');
setTimeout(function() {
ad.style.display = 'none';
}, 5000);
</script>
</body>
定時(shí)器之setInterval
<body>
<script>
// 1. setInterval
// 語(yǔ)法規(guī)范： window.setInterval(調(diào)用函數(shù), 延時(shí)時(shí)間);
setInterval(function() {
console.log('繼續(xù)輸出');
}, 1000);
// 2. setTimeout 延時(shí)時(shí)間到了梭纹，就去調(diào)用這個(gè)回調(diào)函數(shù)躲惰，只調(diào)用一次 就結(jié)束了這個(gè)定時(shí)器
// 3. setInterval 每隔這個(gè)延時(shí)時(shí)間，就去調(diào)用這個(gè)回調(diào)函數(shù)栗柒，會(huì)調(diào)用很多次礁扮，重復(fù)調(diào)用這個(gè)函數(shù)
</script>
</body>
清除setInterval定時(shí)器
<body>
<button class="begin">開(kāi)啟定時(shí)器</button>
<button class="stop">停止定時(shí)器</button>
<script>
var begin = document.querySelector('.begin');
var stop = document.querySelector('.stop');
var timer = null; // 全局變量 null是一個(gè)空對(duì)象
begin.addEventListener('click', function() {
timer = setInterval(function() {
console.log('ni hao ma');
}, 1000);
})
stop.addEventListener('click', function() {
clearInterval(timer);
})
</script>
</body>
發(fā)送短信案例
<body>
手機(jī)號(hào)碼： <input type="number"> <button>發(fā)送</button>
<script>
// 按鈕點(diǎn)擊之后知举，會(huì)禁用 disabled 為true
// 同時(shí)按鈕里面的內(nèi)容會(huì)變化瞬沦， 注意 button 里面的內(nèi)容通過(guò) innerHTML修改
// 里面秒數(shù)是有變化的，因此需要用到定時(shí)器
// 定義一個(gè)變量雇锡，在定時(shí)器里面逛钻，不斷遞減
// 如果變量為0 說(shuō)明到了時(shí)間，我們需要停止定時(shí)器锰提，并且復(fù)原按鈕初始狀態(tài)
var btn = document.querySelector('button');
var time = 3; // 定義剩下的秒數(shù)
btn.addEventListener('click', function() {
btn.disabled = true;
var timer = setInterval(function() {
if (time == 0) {
// 清除定時(shí)器和復(fù)原按鈕
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '發(fā)送';
} else {
btn.innerHTML = '還剩下' + time + '秒';
time--;
}
}, 1000);
})
</script>
</body>
this指向問(wèn)題
<body>
<button>點(diǎn)擊</button>
<script>
// this 指向問(wèn)題 一般情況下this的最終指向的是那個(gè)調(diào)用它的對(duì)象
// 1. 全局作用域或者普通函數(shù)中this指向全局對(duì)象window（ 注意定時(shí)器里面的this指向window）
console.log(this);
function fn() {
console.log(this);
}
window.fn();
window.setTimeout(function() {
console.log(this);
}, 1000);
// 2. 方法調(diào)用中誰(shuí)調(diào)用this指向誰(shuí)
var o = {
sayHi: function() {
console.log(this); // this指向的是 o 這個(gè)對(duì)象
}
}
o.sayHi();
var btn = document.querySelector('button');
// btn.onclick = function() {
// console.log(this); // this指向的是btn這個(gè)按鈕對(duì)象
// }
btn.addEventListener('click', function() {
console.log(this); // this指向的是btn這個(gè)按鈕對(duì)象
})
// 3. 構(gòu)造函數(shù)中this指向構(gòu)造函數(shù)的實(shí)例
function Fun() {
console.log(this); // this 指向的是fun 實(shí)例對(duì)象
}
var fun = new Fun();
</script>
</body>
js 執(zhí)行隊(duì)列
<body>
<script>
// 第一個(gè)問(wèn)題
// console.log(1);
// setTimeout(function() {
// console.log(3);
// }, 1000);
// console.log(2);
// 2. 第二個(gè)問(wèn)題
// console.log(1);
// setTimeout(function() {
// console.log(3);
// }, 0);
// console.log(2);
// 3. 第三個(gè)問(wèn)題
console.log(1);
document.onclick = function() {
console.log('click');
}
console.log(2);
setTimeout(function() {
console.log(3)
}, 3000)
</script>
</body>
5秒鐘之后跳轉(zhuǎn)頁(yè)面
<body>
<button>點(diǎn)擊</button>
<div></div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.addEventListener('click', function() {
// console.log(location.href);
location.;
})
var timer = 5;
setInterval(function() {
if (timer == 0) {
location.;
} else {
div.innerHTML = '您將在' + timer + '秒鐘之后跳轉(zhuǎn)到首頁(yè)';
timer--;
}
}, 1000);
</script>
</body>
獲取URL參數(shù)
login.html
<body>
<form action="index.html">
用戶名： <input type="text" name="uname">
<input type="submit" value="登錄">
</form>
</body>
index.html
<body>
<div></div>
<script>
console.log(location.search); // ?uname=andy
// 1.先去掉曙痘？ substr('起始的位置'芳悲，截取幾個(gè)字符);
var params = location.search.substr(1); // uname=andy
console.log(params);
// 2. 利用=把字符串分割為數(shù)組 split('=');
var arr = params.split('=');
console.log(arr); // ["uname", "ANDY"]
var div = document.querySelector('div');
// 3.把數(shù)據(jù)寫入div中
div.innerHTML = arr[1] + '歡迎您';
</script>
</body>
location常見(jiàn)的方法
<body>
<button>點(diǎn)擊</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
// 記錄瀏覽歷史，所以可以實(shí)現(xiàn)后退功能
// location.assign('http://www.itcast.cn');
// 不記錄瀏覽歷史边坤，所以不可以實(shí)現(xiàn)后退功能
// location.replace('http://www.itcast.cn');
location.reload(true);
})
</script>
</body>
navigator 對(duì)象
<script>
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
window.location.href = "../H5/index.html"; //手機(jī)
}
</script>
history對(duì)象
index.html
<body>
<a href="list.html">點(diǎn)擊我去往列表頁(yè)</a>
<button>前進(jìn)</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
// history.forward();
history.go(1);
})
</script>
</body>
list.html
<body>
<a href="index.html">點(diǎn)擊我去往首頁(yè)</a>
<button>后退</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
// history.back();
history.go(-1);
})
</script>
</body>
希望對(duì)您有所幫助名扛，下篇再見(jiàn)
上一篇：DOM&BOM基礎(chǔ)第3篇 - 簡(jiǎn)書 (jianshu.com)
下一篇：DOM&BOM基礎(chǔ)第5篇 - 簡(jiǎn)書 (jianshu.com)
點(diǎn)贊加關(guān)注，永遠(yuǎn)不迷路
