-
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>
