1 JS事件

JS可以响应页面元素的各种事件。

页面元素的事件

[1]单击事件 onclick

已经使用过的事件

Tips：几乎所有的元素都可以有onclick事件（body除外）。

在调用函数的位置可以直接编写JS代码。

[2]双击事件 ondblclick

[3]得到焦点 onfocus

[4]失去焦点 onblur

[5]修改响应事件 onchange 用户改变域（表单域）的内容

Tips:onchange事件往往使用来响应select的修改事件。

[6]鼠标悬浮事件 onmouseover

[7]鼠标离开事件 onmouseout

[8]鼠标移动事件 onmousemove

这个案例中使用到了一个参数event。

Event参数表示事件源对象。所有事件都有事件源对象，根据事件不同，event的表示也不同。所有的鼠标响应事件都可以通过事件源获取鼠标的位置。

事件源对象的传递方式：传递一个event即可。

[9] 鼠标按下的事件 onmousedown

可以通过evetn.button获取鼠标按键的索引。

[10] 鼠标松开的事件 onmouseup

[11]键盘事件 onkeydown/onkeyup/onkeypress

键盘按下的事件：

[12] 加载完成事件 onload

[13]表单提交事件 onsubmit

点击提交按钮之后调用指定的函数。

Onsubmit如果返回true表达可以正常提交，如果返回false阻止表单提交。

往往用于表单数据验证。

表单正常提交：

阻止表单提交

数据校验

[14]其他事件：

onreset 重置按钮被点击 1 3 4

onresize 窗口或框架被调整尺寸 1 4 4

onselect 文本被选定

onabort 图像加载被中断

2 DOM

2.1 DOM的基本概念

JavaScript HTML DOM 对象.

HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。

HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。

通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。

HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。

HTML页面中存在各种元素。通过标签编写在HTML页面的硬代码。比如:<div></div>。可以理解为看见的实在事物。javaScritp中为每一个HTML页面的元素都申明了一个对应的对象与之对应。而这些对象就称之为DOM对象。

例如：

页面中有一个<div></div> 在JS中就存储在一个 DIVElement对象与页面中的div对应。通过使用js修改DIVElement对象的属性和样式就可以修改页面元素DIV的样式和属性。

案例：

2.2HTMLDOM结构

2.3获取DOM对象的API

获取DOM对象的API都是document对象的方法。Document对象是window对象的属性，所以理论上应该是window.docuemnt.xxxx。但是window可以省略不写，所以一般都是直接使用document.xxxx获取对象。

[1] 根据ID获取一个元素对象

方法：document.getElementById(id);

通过ID获取页面的一个指定的元素对象，前面的案例已经使用过多次，在这里不再赘述。

例外情况：

元素不存在

在多个相同的ID

[2]根据name返回多个元素集合

方法： document.getElementsByName(name);

网页中元素的ID理论上不能重复，而name是可以重复的。比如表单中的单选按钮组（性别）。

[3]通过标签名返回一组元素

方法：document.getElementsByTagName(tagname)

案例：

[4]通过类名获取一组元素

方法：document.getElementsByClassName(className);

2.4DOM修改页面元素的属性

赋值语法： domElement.attName=value;

获取值的语法：var value = domElement.attName;

案例：

获取输入框的value属性的值和设置值

全选：

2.5DOM操作元素的CSS样式

设置样式属性:domElement.style.attrName=value;

获取样式属性:var value = domElement.style.attrName;

案例1：改变页面元素的大小

案例2：修改背景颜色

如果样式属性存在多个单词，在CSS中使用“-”连接，在DOM中除过第一个单词全部小写外，其余单词的首字母要大写。

2.6DOM操作页面元素的内容

S1:DOM操作页面元素的内容实际上就是通过属性

innerHTML和innerText 这个两个属性在页面的标签中是没有的。只有dom对象有。

innerHMLT指的是页面元素开始标签和结束标签之间的内容。

案例：

innerHTML和innerText区别

innerHTML设置的内容会解释运行html标签，而innerText只会当做文本放入

S2:动态生成一个元素并且加入到页面中

创建对象:document.createEelement(“a”);

添加元素：applendChild(e);

2.7DOM操作元素的事件

可以给元素动态添加事件。

domElement.evetnName=function(){xxxxx};

2.8练习

案例1：动态的向页面表格中添加数据。删除表中的数据。

实现：

<!DOCTYPE html>

<html>

<head>

<title>动态操作表格</title>

table{

margin-left: auto;

margin-right: auto;

width: 600px;

border:1px solid;

}

td{border: 1px solid #fff;}

</style>

var index = 1;

function addRow(){

//生产一个tr

var tr = document.createElement("tr");

//设置样式

tr.style.borderWidth="0px";

var color = "";

if(index % 2 == 1){

tr.style.backgroundColor="pink";

color = "pink";

}else{

tr.style.backgroundColor="#eee";

color = "#eee";

}

index ++ ;

//给tr添加事件

tr.onmouseover=function(){

tr.style.backgroundColor="#419B1C";

}

tr.onmouseout=function(){

tr.style.backgroundColor=color;

}

tr.id=index+"tr"

//生成5个td并且加入到tr中

var tds = "<td>1</td><td>张三</td><td>28</td><td>男</td><td><a href='javascript:deleteTr(\""+index+"tr\")'>删除</a></td>";

tr.innerHTML=tds;

//将tr加入表格

var table = document.getElementById("table");

table.appendChild(tr);

}

/*删除tr的函数*/

function deleteTr(tr){

/*通过ID删除元素*/

document.getElementById(tr).remove();

}

</script>

</head>

<body>

</tr>

</table>

</body>

</html>

案例：折叠菜单

<!DOCTYPE html>

<html>

<head>

p{width: 180px; background-color: #eee; border:1px solid;}

.menu{

cursor: pointer;

margin-top:5px;

}

.mainMenu{

width: 180px;

background: #ccc;

height: 20px;

}

.subMenu{

display: none;

}

</style>

//是否显示菜单

function isShowMenu(subId){

//获取子菜单元素

var subMenu = document.getElementById(subId);

//判断是否是子菜单的状态

//获取子菜单的display属性值

var v = subMenu.style.display;

if(v != "block"){

subMenu.style.display="block";

}else{

subMenu.style.display="none";

}

console.log(v);

}

</script>

</head>

<body>

<p>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</p>

</body>

</html>

JavaScript(二)

1 JS事件

2 DOM

2.1 DOM的基本概念

2.2HTMLDOM结构

2.3获取DOM对象的API

2.4DOM修改页面元素的属性

2.5DOM操作元素的CSS样式

2.6DOM操作页面元素的内容

2.7DOM操作元素的事件

2.8练习

猜你喜欢