DOM: A fim de atender as necessidades Caixa
-
Função: Controla o conteúdo do documento html
-
Código: Obter página tag (elemento) de elemento de objeto
* document . getElementById(" id值" ) ;通过元素的id获取元素对象 -
Operando objeto Element:
1.修改属性值: 1.明确获取的对象是哪一个? 2.查看API文档，找其中有哪些属性可以设置 2.修改标签体内容: *属性: innerHTML
evento
-
Função: Alguns componentes é realizada certas operações, desencadear a execução de algum código.
*造句: xxx被xxx,我就xxx * 我方水晶被摧毁后，我就责备自己。 * 敌方水晶被摧毁后，我就夸奖队友。 -
Como ligar evento
1.直接在html标签上，指定事件的属性(操作),属性值就是js代码 * 事件: onclick--- 单击事件 2.通过js获取元素对象，指定事件属性，设置一个函数
Caso: Clique na imagem da lâmpada 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>
evento
-
mecanismo de ouvinte de evento:
* Conceito: Alguns componentes são realizadas algumas operações, desencadear a execução de algum código.
* Evento: Algumas operações. Tais como: clique, clique duas vezes, pressione o teclado, o mouse movido
* Origem do evento: componentes. Tais como: caixa de entrada de texto do botão ...
* Listener: Código.
* Ouvintes registrados: a combinação de eventos, origem do evento, o ouvinte. Quando ocorre um evento na origem do evento, em seguida, acionar a execução de um código de ouvinte. -
Duas maneiras de chamar o 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 comuns:
1. Clique evento:
1. onclick: Clique Evento
2. ondblclick: Clique duas vezes o evento
2. foco eventos
1. onblur: perder o foco
* Geral de validação de formulário
3. onfocus: elemento recebe o foco. .
3. evento Load:
1. o onload: uma página ou uma imagem tem carga acabado.
4. Rato evento:
1. Botão onMouseDown do mouse é pressionado.
* Processo de definição para definir um parâmetro, recebendo objeto de evento.
* Mas evento atributo tonelada objeto pode obter o botão do mouse é clicado no botão.
* 2 0 polia Direita Esquerda
3. onmouseup o botão do mouse é liberado.
4. rato onmousemove é movido.
5. onmouseover mouse sobre um Qin Yuan.
6. onMouseout rato é movido para fora de um elemento.
5. Eventos de teclado:
1. onKeyDown uma tecla do teclado é pressionada.
2. onkeyup uma tecla do teclado é liberado.
3. onkeypress uma tecla do teclado é pressionado e liberado.
6. A selecionar e alterar
o conteúdo 1. onchange campo é alterado.
2. texto onselect é selecionado.
7. Os eventos de formulário:
1. o botão de confirmação onsubmit é clicado.
* Retorna TRUE, enviar
* retorna falso, organizações de submeter
* redação Dois:A primeira:
<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: Selecionar tudo eleição, anti eleição, do mouse sobre o elemento, as folhas de rato
<!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>
