1 BOM:通過(guò)js控制瀏覽器
代碼塊
彈出框:alert('hello,world')
打開(kāi)一個(gè)新的窗口:window.open()
2 window子對(duì)象
2-1 navigator導(dǎo)航對(duì)象
代碼塊
獲取瀏覽器全稱:navigator.appName;
獲取版本:navigator.appVersion;
獲取客戶端絕大多數(shù)信息:navigator.userAgent;
獲取瀏覽器操作系統(tǒng):navigator.platform;
2-2 location對(duì)象
代碼塊
獲取當(dāng)前頁(yè)面的網(wǎng)址:location.href
跳轉(zhuǎn)到指定的網(wǎng)址:location.
重新加載當(dāng)前頁(yè)面:location.reload()
2-3 彈出框
代碼塊
警告框:alert('are you sure ?')
確認(rèn)框:confirm('你確定嗎')
提示框:prompt('請(qǐng)輸入提示內(nèi)容','西紅柿')
2-4 計(jì)時(shí)
代碼塊:多長(zhǎng)時(shí)間后執(zhí)行
setTimeout(function(){alert('hello')},4000);
3秒后執(zhí)行l(wèi)aunch函數(shù)
function launch(){
alert('hello');
}
setTimeout(launch,3000)
代碼塊:每隔一段時(shí)間做
定義一個(gè)函數(shù)
function auto(){
console.log('hello,world')
}
每隔一段時(shí)間笛粘,3秒執(zhí)行打印
var res = setInterval(auto,3000)
清除打印,結(jié)束打有角啊:clearInterval(res);
3 通過(guò)JS操作DOM
3-1 查找標(biāo)簽
代碼塊
通過(guò)ID獲取標(biāo)簽:document.getElementById('d1')
根據(jù)類名class去找:document.getElementsByClassName('c1')
根據(jù)標(biāo)簽的名字去找:document.getElementsByTageName('p')
3-2間接查找
3-3 添加節(jié)點(diǎn)
代碼塊:創(chuàng)建一個(gè)標(biāo)簽润努,放到子節(jié)點(diǎn)最后
第一步:找到父節(jié)點(diǎn)
var father =document.getElementById('d2');
第二:生成子節(jié)點(diǎn)
var last_son =document.createElement('div');
第三:子節(jié)點(diǎn)文字
last_son.innerText='helloworld';
第四:插入正確位置
father.appendChild(last_son);
3-4 刪除節(jié)點(diǎn)
4 屬性attribute
4-1 屬性的操作
代碼塊
HTML代碼如下:
<div id='d2'>
<p>我是前面的P</p>
<div id='d3' ec14='siyu'>我是子div標(biāo)簽</div>
<p>我是后面的P</p>
</div>
js代碼如下:
var res =document.getElementById('d3');
拿到屬性值:res.getAttribute('ec14');
"siyu"
設(shè)置新的屬性值:res.setAttribute('ec14','wanjun');
查看屬性值是否為新的:res.getAttribute('ec14');
"wanjun"
移除屬性值:res.removeAttribute('ec14');
undefined
res.getAttribute('ec14');
null
4-2通過(guò)標(biāo)簽名操作屬性
代碼塊:
HTML代碼:
<div id='d2'>
<p>我是前面的P</p>
<div id='d3' ec14='siyu'>我是子div標(biāo)簽</div>
<p>我是后面的P</p>
<span class='c1' dept='it center'>我是王思雨</span>
</div>
js代碼:
拿到span標(biāo)簽:var res = document.getElementsByTagName('span');
是一個(gè)數(shù)組。
res[0].getAttribute('dept');
"it center"
res[0].setAttribute('dept','database');
undefined
res[0].getAttribute('dept');
"database"
res[0].remove('dept');
undefined
4-3 通過(guò)標(biāo)簽名操作圖片的屬性
代碼塊
HTML:
<img id='c1' src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2894487835,3534766040&fm=58&bpow=480&bpoh=640" alt="" />
JS:
res=document.getElementById('c1');
res.setAttribute('src','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569079312315&di=2851a676ef5ad078b2b9055b8249fa33&imgtype=0&src=http%3A%2F%2Fy.zdmimg.com%2F201702%2F07%2F5899a7e766f035068.jpg_e600.jpg');
4-4通過(guò)js操作表單的內(nèi)容
代碼塊
HTML代碼部分:
<body>
<input type="text" id='i1'>
<input type="password" id='i2'>
<select id='s1'>
<option value='杭州'>杭州</option>
<option value='上海'>上海</option>
</select>
<textarea id='t1' cols="60" rows="60">請(qǐng)輸入內(nèi)容:</textarea>
</body>
JS代碼部分:
res1=document.getElementById('i1');
<input type=?"text" id=?"i1">?
res1.value;
"王思雨"
"王思雨"
res2=document.getElementById('i2');
res2.value;
"qwehkkwjjkd"
res3=document.getElementById('s1');
<select id=?"s1">?…?</select>?
res3.value;
"杭州"
res4=document.getElementById('t1');
res4.value;
"請(qǐng)輸入內(nèi)容:真正的猛男"
5樣式操作
代碼塊
HTML代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style>
.c1{
height:100px;
width:100px;
background-color:#F00;
border-radius:50%;
}
.c2{
background-color:#9F0;}
</style>
</head>
<body>
<div id='d1' class="c1 c2"></div>
</body>
</html>
JS代碼如下:
d1ele=document.getElementById('d1');
d1ele.classList.remove('c2'); 移除c2的屬性
d1ele.classList.add('c2'); 添加C2的屬性
d1ele.classList.contains('c2'); 查詢是否包含某個(gè)屬性
來(lái)回切換屬性值:
d1ele.classList.toggle('c2');
false
d1ele.classList.toggle('c2');
true
6 指定css的操作
代碼塊
d1ele;
<div id=?"d1" class=?"c1 c2">?</div>?
d1ele.style.backgroundColor='blue';
"blue"
d1ele.style.borderRadius='20px';
"20px"
7 js捆綁元素之獲得焦點(diǎn)(直接在標(biāo)簽內(nèi)綁定事件)
代碼塊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style>
.c1{
height:100px;
width:100px;
background-color:#F00;
border-radius:50%;
}
.c2{
background-color:#9F0;}
</style>
</head>
<body>
<div id='d1' class="c1 c2"></div>
<button id='b1' onclick="change()">點(diǎn)擊我切換顏色</button>
<script>
function change(){
var d1ele=document.getElementById('d1');
d1ele.classList.toggle('c2');
}
</script>
</body>
</html>
8 通過(guò)在js代碼中綁定事件控制樣式
代碼塊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style>
.c1{
height:100px;
width:100px;
background-color:#F00;
border-radius:50%;
}
.c2{
background-color:#9F0;}
</style>
</head>
<body>
<div id='d1' class="c1 c2"></div>
<button id='b1' >點(diǎn)擊</button>
<script>
var b1ele=document.getElementById('d1');
b1.onclick=function(){
var d1ele=document.getElementById('d1');
d1ele.classList.toggle('c2');
}
</script>
</body>
</html>
9 js常用事件
10:練習(xí)獲得焦點(diǎn)和失去焦點(diǎn)輸入框默認(rèn)值的變化
代碼塊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
</head>
<body>
<input type='text' value="請(qǐng)輸入姓名:" id="i1">
<script>
resele=document.getElementById('i1');
//獲得焦點(diǎn):
resele.onfocus=function(){
this.value='';
}
resele.onblur=function(){
this.value='請(qǐng)輸入姓名:';
}
</script>
</body>
</html>
11 js級(jí)聯(lián)列表示括,選擇省份铺浇,后面城市自動(dòng)變化
代碼塊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>練習(xí)曲</title>
</head>
<body>
<label for="s1">省份:</label>
<select id='s1'>
<option>請(qǐng)選擇省份</option>
</select>
<label for="c1">城市:</label>
<select id="c1">
<option>請(qǐng)選擇城市</option>
</select>
<script>
var data = {
"北京": ["昌平區(qū)", "海淀區(qū)", "朝陽(yáng)區(qū)"],
"上海": ["浦東區(qū)", "徐匯區(qū)", "浦東新區(qū)"],
"山東": ["煙臺(tái)", "青島", "威海"]
};
// 1. 拿到所有的省,在s1中生成對(duì)應(yīng)的option選項(xiàng)
var s1ele=document.getElementById('s1');
var c1ele=document.getElementById('c1');
for (var i in data){
console.log(i);
// 2. 創(chuàng)建option標(biāo)簽,將i賦值給option,將option添加到父元素里面就OK
var tmp =document.createElement('option');
tmp.innerText=i;
s1ele.appendChild(tmp);
}
// 3.當(dāng)用戶選中某個(gè)省之后才做的事兒
s1ele.onchange=function(){
//清空之前選擇省份添加的城市項(xiàng)
c1ele.innerHTML='';
//獲取用戶選擇的省份
var p=this.value;
// 根據(jù)用戶選擇的省垛膝,去data中找省對(duì)應(yīng)的城市數(shù)據(jù)
var c=data[p];
//將對(duì)應(yīng)城市數(shù)據(jù)添加到option中
for (var m in c){
console.log(m);
var tmp1=document.createElement('option');
tmp1.innerText=c[m];
c1ele.appendChild(tmp1);
}
}
</script>
</body>
</html>