-
DOM操作
children 子節點 兒子節點 parentNode 父節點 谷歌和火狐的方式 firstElementChild 一胎 lastElementChild 最后一胎 previousElementSibling 上一個兄弟節點 nextElementSibling 下一個兄弟節點 這是ie的方式 firstChild lastChild previousSibling nextSibling // 通過document可以動態的創建和刪除節點 tagName 獲取對象標簽的名字 大寫 createElement 創建節點 removeChild 父節點.removeChild(子節點) appendChild 添加節點 添加存在的節點，本質是移動節點 insertBefore 添加節點 insertBefore(new, old) setAttribute : 既可以設置官方屬性，又可以設置自定義屬性 getAttribute : 既可以獲取官方屬性，也可以獲取自定義屬性 留言板 山海關（錦州）. 潼關. 劍門關（四川盆地）. 娘子關. 玉門關. 嘉峪關 -
事件綁定和事件冒泡
addEventListener 谷歌和火狐方式 removeEventListener attachEvent ie方式 detachEvent 獲取事件對象 事件ev 火狐. 谷歌 window.event ie. 谷歌 兼容性寫法： var oevent = ev || event 獲取事件的x和y坐標 oevent.clientX oevent.clientY 相對窗口左上角的坐標 取消事件冒泡 事件的屬性和方法 cancelBubble ie方式. 谷歌. 火狐都支持 stopPropagation() 谷歌. 火狐方式 事件源對象 srcElement ie. 谷歌 target 火狐. 谷歌 -
小知識
禁止鼠標右鍵 document.oncontextmenu = function () { return false } 超鏈接和事件同時觸發 事件的屬性和方法 returnValue ie. 谷歌 preventDefault() 火狐. 谷歌 return false ie. 谷歌. 火狐 鍵盤事件 document.onkeydown : 捕獲用戶點擊的按鈕 獲取按鈕的編號 oevent.keyCode -
正則對象
規則是一樣的。 單字符：. \w \d \W \s \S \D [aoe] 數量： {m} {m,} {m,n} {0,}==* {1,}==+ {0,1}==? match : 正則匹配 replace : 正則替換 -
表單對象
三種查找方法 （1）根據id獲取 （2）document.forms 得到文檔中所有的form （3）根據name獲取 document.formname 獲取該表單里面input框的值，假如該input框name=user document.formname.user.value submit()方法 document.formname.submit() 誰都能提交 js驗證表單內容 吸頂條
作業
case.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>case</title>
</head>
<body>
<div>
1.<br>
<select id="left_1">
<option>喬丹</option>
<option>姚明</option>
<option>奧尼爾</option>
<option>張伯倫</option>
<option>賈巴爾</option>
<option>詹姆斯</option>
</select>
<input id="btn1" type="button" value="移除">
<select id="right_1">
<option>歐文</option>
<option>杜蘭特</option>
<option>韋德</option>
<option>威少</option>
<option>湯普森</option>
<option>哈登</option>
</select>
<input id="btn2" type="button" value="移除">
</div>
<div>
2.<br>
<div id="ad" style="width:100px;height:100px;background:red" x=0 y=0></div>
</div>
<div>
3.<br> 距離國慶還有:
<button id="getT" style="display:none;"></button><span id="time"></span>
</div>
<div>
4.<br>
<button id="selectAll">全選</button>
<button id="selectNone">全不選</button>
<button id="selectOthers">反選</button><br>
<input type="checkbox" class="checks" value="身高180">身高180<br>
<input type="checkbox" class="checks" value="八塊腹肌">八塊腹肌<br>
<input type="checkbox" class="checks" value="胸肌">胸肌<br>
<input type="checkbox" class="checks" value="EQ280">EQ280<br>
<input type="checkbox" class="checks" value="很有錢">很有錢<br>
</div>
<div>
5.<br>
<div id="ad" style="width:100px;height:100px;background:red" x=0 y=0></div>
</div>
</body>
<script>
var obtn1 = document.getElementById('btn1');
var obtn2 = document.getElementById('btn2');
var oleft = document.getElementById('left_1');
var oright = document.getElementById('right_1');
var seloptl = null;
var seloptr = null;
obtn1.onclick = function () {
seloptl = oleft.options[oleft.selectedIndex];
oright.appendChild(seloptl)
seloptl = null
}
oleft.onchange = function () {
seloptl = oleft.options[oleft.seletedIndex]
}
obtn2.onclick = function () {
seloptr = oright.options[oright.selectedIndex];
if (!seloptr) {
seloptr = oright.options[0];
}
oleft.appendChild(seloptr);
seloptr = null;
}
oright.onchange = function () {
seloptr = oright.options[oright.seletedIndex];
}
var ogetT = document.getElementById('getT');
ogetT.onclick = setInterval(function () {
var nowDate = new Date();
var day = nowDate.getDate();
var hrs = nowDate.getHours();
var min = nowDate.getMinutes();
var sec = nowDate.getSeconds();
document.getElementById('time').innerHTML = '' + (31 - day + 30) + '天' + (23 - hrs) + '小時' + (60 - min) + '分鐘' + (60 - sec) + '秒';
}, 800);
var checks = document.getElementsByClassName('checks');
var selAll = document.getElementById('selectAll');
var selNon = document.getElementById('selectNone');
var selOth = document.getElementById('selectOthers');
selAll.onclick = function () {
for (var i = 0; i < checks.length; i++) {
checks[i].checked = true;
}
}
selNon.onclick = function () {
for (var i = 0; i < checks.length; i++) {
checks[i].checked = false;
}
}
selOth.onclick = function () {
for (var i = 0; i < checks.length; i++) {
if (checks[i].checked) {
checks[i].checked = false;
} else {
checks[i].checked = true;
}
}
}
</script>
</html>
