DOM: Con el fin de satisfacer las necesidades del caso
-
Función: Controla el contenido del documento html
-
Código: Obtener etiqueta de la página (elemento) Objeto Elemento
* document . getElementById(" id值" ) ;通过元素的id获取元素对象 -
Operando objeto Element:
1.修改属性值: 1.明确获取的对象是哪一个? 2.查看API文档，找其中有哪些属性可以设置 2.修改标签体内容: *属性: innerHTML
evento
-
Función: Algunos componentes se lleva a cabo ciertas operaciones, disparan la ejecución de código.
*造句: xxx被xxx,我就xxx * 我方水晶被摧毁后，我就责备自己。 * 敌方水晶被摧毁后，我就夸奖队友。 -
Cómo enlazar evento
1.直接在html标签上，指定事件的属性(操作),属性值就是js代码 * 事件: onclick--- 单击事件 2.通过js获取元素对象，指定事件属性，设置一个函数
Caso: Haga clic en la imagen Bombilla de encendido / apagado
分析:
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>
evento
-
mecanismo detector de eventos:
* Concepto: Algunos componentes se llevan a cabo ciertas operaciones, provocar la ejecución de código.
* Evento: Algunas operaciones. Tales como: clic, doble clic, pulse el teclado, el ratón se movía
* Origen del suceso: componentes. Tales como: el cuadro de entrada de texto botón ...
* Oyente: Código.
* Oyentes Registrados: la combinación de eventos, origen del evento, el oyente. Cuando se produce un evento en el origen de eventos, a continuación, activar la ejecución de un código oyente. -
Dos maneras de llamar al método de evento:
1. 在HTML标签中给事件属性定义调用的方法。 如：<a onclick =“fun();” ></a>//fun()为方法 2.在js中先获取html标签对象，然后该对象调用方法 如： html中：<a id="username" ></a> js中：document.getElementById("username").onblur = fun; //fun为方法名，注意这里调用方法不带小括号。 -
eventos comunes:
1. Haga clic en evento:
1. onclick: Haga clic Evento
2. ondblclick: Haga doble clic en el evento
eventos de foco 2.
1. onBlur: enfoque perder
* General para la validación de formularios
3. onfocus: elemento recibe el foco. .
3. evento de carga:
1. el proceso de carga: una página o una imagen tiene terminado de cargar.
4. Ratón Evento:
1. botón del ratón se presiona onMouseDown.
* Proceso de Definición de definir un parámetro, recibiendo objeto de evento.
* Pero evento atributo de objeto toneladas puede conseguir el botón del ratón se hace clic en el botón.
* 2 0 Izquierda Derecha polea
3. onmouseup el botón del ratón es liberado.
4. ratón onmousemove se mueve.
5. onmouseover ratón sobre un Yuan Qin.
6. onmouseout ratón se mueve fuera de un elemento.
5. Los eventos de teclado:
1. onKeyDown una tecla del teclado se presiona.
2. onkeyup una tecla del teclado se libera.
3. onkeypress una tecla del teclado se presiona y suelta.
6. El seleccionar y cambiar
el contenido 1. onchange campo se cambia.
se selecciona 2. texto onselect.
7. Los eventos de formulario:
se hace clic en el botón de confirmación 1. onsubmit.
* Devuelve true, se someten
* vuelve falsa, organizaciones que presenten
* Dos redacción:La primera:
<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 重置 按钮被点击。
Caso: Seleccionar todo elección, anti elecciones, puntero del ratón sobre el elemento, las hojas de ratones
<!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>
