DOM: In order to meet the needs Case
-
Function: Controls the html document content
-
Code: Get page tag (element) Object Element
* document . getElementById(" id值" ) ;通过元素的id获取元素对象 -
Operating Element object:
1.修改属性值: 1.明确获取的对象是哪一个? 2.查看API文档，找其中有哪些属性可以设置 2.修改标签体内容: *属性: innerHTML
event
-
Function: Some components is performed certain operations, trigger the execution of some code.
*造句: xxx被xxx,我就xxx * 我方水晶被摧毁后，我就责备自己。 * 敌方水晶被摧毁后，我就夸奖队友。 -
How to bind event
1.直接在html标签上，指定事件的属性(操作),属性值就是js代码 * 事件: onclick--- 单击事件 2.通过js获取元素对象，指定事件属性，设置一个函数
Case: Click the lightbulb image on / off
分析:
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>
event
-
Event listener mechanism:
* Concept: Some components are carried out certain operations, trigger the execution of some code.
* Event: Some operations. Such as: click, double click, press the keyboard, the mouse moved
* Event Source: components. Such as: the button text input box ...
* Listener: Code.
* Registered listeners: the combination of events, event source, the listener. When an event occurs on the event source, then trigger the execution of a listener code. -
Two ways to call the method of event:
1. 在HTML标签中给事件属性定义调用的方法。 如：<a onclick =“fun();” ></a>//fun()为方法 2.在js中先获取html标签对象，然后该对象调用方法 如： html中：<a id="username" ></a> js中：document.getElementById("username").onblur = fun; //fun为方法名，注意这里调用方法不带小括号。 -
Common events:
1. Click event:
1. onclick: Click Event
2. ondblclick: Double-click the event
2. focus events
1. onblur: lose focus
* General for form validation
3. onfocus: element receives the focus. .
3. Load event:
1. the onload: a page or an image has finished loading.
4. Mouse Event:
1. onMouseDown mouse button is pressed.
* Defining process to define a parameter, receiving event object.
* But ton object attribute event can get the mouse button is clicked the button.
* 2 0 Right Left pulley
3. onmouseup the mouse button is released.
4. onmousemove mouse is moved.
5. onmouseover mouse over a Yuan Qin.
6. onmouseout mouse is moved off an element.
5. Keyboard events:
1. onKeyDown a keyboard key is pressed.
2. onkeyup a keyboard key is released.
3. onkeypress a keyboard key is pressed and released.
6. The select and change
1. onchange field content is changed.
2. onselect text is selected.
7. The form events:
1. the onsubmit confirmation button is clicked.
* Returns true, submit
* returns false, organizations to submit
* Two wording:The first:
<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 重置 按钮被点击。
Case: Select all election, anti election, mouse over the element, the mouse leaves
<!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>
