DOM：为了满足案例需要
-
功能：控制html文档的内容
-
代码:获取页面标签(元素)对象Element
* document . getElementById(" id值" ) ;通过元素的id获取元素对象 -
操作Element对象:
1.修改属性值: 1.明确获取的对象是哪一个? 2.查看API文档，找其中有哪些属性可以设置 2.修改标签体内容: *属性: innerHTML
事件
-
功能:某些组件被执行了某些操作后，触发某些代码的执行。
*造句: xxx被xxx,我就xxx * 我方水晶被摧毁后，我就责备自己。 * 敌方水晶被摧毁后，我就夸奖队友。 -
如何绑定事件
1.直接在html标签上，指定事件的属性(操作),属性值就是js代码 * 事件: onclick--- 单击事件 2.通过js获取元素对象，指定事件属性，设置一个函数
案例：点击灯泡图片开/关
分析:
1.获取图片对象
2.绑定单击事件
3.每次点击切换图片
*规则:
如果灯是开的on, 切换图片为off
如果灯是关的off,切换图片为on
使用标记flag（boolean类型）来完成
<body>
<img id="light" src="../images/light_off.png">
<script>
var light = document.getElementById("light");
var flag = false;//false代表灯灭
light.onclick = function(){
if(flag)//判断如果灯是开着的，则关掉
{
light.src = "../images/light_off.png";
flag = false;
}
else////判断如果灯是关着的，则打开
{
light.src = "../images/light_on.png";
flag = true;
}
}
</script>
</body>
事件
-
事件监听机制:
*概念:某些组件被执行了某些操作后，触发某些代码的执行。
*事件:某些操作。如:单击，双击，键盘按下了，鼠标移动了
*事件源:组件。如:按钮文本输入框…
*监听器:代码。
*注册监听:将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。 -
事件调用方法的两种方式：
1. 在HTML标签中给事件属性定义调用的方法。 如：<a onclick =“fun();” ></a>//fun()为方法 2.在js中先获取html标签对象，然后该对象调用方法 如： html中：<a id="username" ></a> js中：document.getElementById("username").onblur = fun; //fun为方法名，注意这里调用方法不带小括号。 -
常见的事件:
1.点击事件:
1. onclick :单击事件
2. ondblclick :双击事件
2.焦点事件
1. onblur :失去焦点
* 一般用于表单验证
3. onfocus :元素获得焦点。.
3.加载事件:
1. onload :一张页面或一幅图像完成加载。
4.鼠标事件:
1. onmousedown 鼠标按钮被按下。
* 定义方法时，定义一个形参，接受event对象。
* event对象的but ton属性可以获取鼠标按钮键被点击了。
* 0 左键 1 滑轮 2 右键
3. onmouseup 鼠标按键被松开。
4. onmousemove 鼠标被移动。
5. onmouseover 鼠标移到某元秦之上。
6. onmouseout 鼠标从某元素移开。
5.键盘 事件:
1. onkeydown 某个键盘按键被按下。
2. onkeyup 某个键 盘按键被松开。
3. onkeypress 某个键盘按键被按下并松开。
6.选择和改变
1. onchange 域的内容被改变。
2. onselect 文本被选中。
7.表单事件:
1. onsubmit 确认按钮被点击。
* 返回 true，提交
* 返回false，组织提交
* 两种写法：第一种：
<script>
document . getElementById(" form") . onsubmit = function(){
//校验用户名格式是否正确
var flag = false;
return
flag;
}
</script>
<body>
<form action="#" id= "form">
</form>
</body>
第二种写法
<script>
function checkForm( ){
return false ;
}
</script>
<body>
<form action= "#" id="form" onc1ick="return checkForm();">
</form>
</body>
3. onreset 重置 按钮被点击。
案例：全选，全部选，反选，鼠标移到元素之上，鼠标离开
<!DOCTYPE html>
<html>
<head>
<title>案例_添加和删除信息.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
table{
margin:auto;
width: 500px;
text-align: center;
border: 1px solid;
}
td,th{
border: 1px solid;
}
div {
margin: 50px;
text-align: center;
}
.over{
background-color: pink;
}
.out{
background-color: black;
}
</style>
</head>
<body>
<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入名称">
<input type="text" id="gender" placeholder="请输入性别">
<input id="btn_add" type="button" value="添加">
</div>
<table>
<caption>学生信息表</caption>
<tr>
<th><input id="firstCb" type="checkbox" name="cb" ></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="cb" ></td>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb" ></td>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb" ></td>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
</table>
<div>
<input type="submit" id="selectAll" value="全选"/>
<input type="submit" id="unSelectAll" value="全不选"/>
<input type="submit" id="selectRev" value="反选"/>
</div>
<script type="text/javascript">
/*
* 全选：
* 1.给单击事件绑定事件
* 1.获取所有的CheckBox
* 2.遍历cb，设置每一个cb为选中， checked
* */
//在页面加载完后绑定事件
window.onload = function (ev) {
//给全选按钮绑定单击全选事件，
document.getElementById("selectAll").onclick = function () {
//获取所有复选框
var cbs = document.getElementsByName("cb");
for (var i = 0; i <cbs.length ; i++) {
cbs[i].checked = true;
}
}
//给全部选按钮绑定单击全不选事件
document.getElementById("unSelectAll").onclick = function () {
//获取所有复选框
var cbs = document.getElementsByName("cb");
for (var i = 0; i <cbs.length ; i++) {
cbs[i].checked = false;
}
}
//给全选按钮绑定单击反选事件
document.getElementById("selectRev").onclick = function () {
//获取所有复选框
var cbs = document.getElementsByName("cb");
for (var i = 0; i <cbs.length ; i++) {
cbs[i].checked = !cbs[i].checked;
}
}
document.getElementById("firstCb").onclick = function () {
//获取所有复选框
var cbs = document.getElementsByName("cb");
for (var i = 0; i <cbs.length ; i++) {
cbs[i].checked = this.checked;
}
}
//给所有tr绑定鼠标移到元素之上和移出元素时间
var trs = document.getElementsByTagName("tr");
//遍历
for (var i = 0; i <trs.length ; i++) {
//移到元素之上
trs[i].onmouseover = function () {
this.className = "over";
}
//移出元素
trs[i].onmouseout = function () {
this.className = "out";
}
}
}
</script>
</body>
</html>
