JAVAWEB学习笔记04_JavaScript

Posted 2020-09-12 kent

晨读单词：

onmouseover:鼠标移入

onmouseout:鼠标移出

attribute：属性

node：节点

document:文档

element：元素

textNode：文本节点

append：追加

 

回顾之前已经使用过的事件：

onfocus/onblur:聚焦离焦事件，用于表单校验的时候比较合适。

onclick/ondblclick:鼠标单击和双击事件

onkeydown/onkeypress：搜索引擎使用较多

onload：页面加载事件，所有的其它操作(匿名方式)都可以放到这个绑定的函数里面去。如果是有名称，那么在html页面中只能写一个。

onmouseover/onmouseout/onmousemove：购物网站商品详情页。

onsubmit：表单提交事件 ，有返回值，控制表单是否提交。

onchange:当用户改变内容的时候使用这个事件(二级联动)

 

javascript的DOM操作:

 

Document:整个html文件都成为一个document文档

Element:所有的标签都是Element元素

Attribute：标签里面的属性

Text：标签中间夹着的内容为text文本

 

Node:document、element、attribute、text统称为节点node.

 

以下两个方法很重要，但是在手册中查不到！

创建文本节点：document.createTextNode()

 

创建元素节点：document.createElement()

 

 

使用JS完成表格的一个隔行换色

1.需求分析

我们希望在后台页面中实现一个隔行换色的效果显示所有的用户信息，显示效果如下：

 

2.技术分析

新标签的学习

    <thead>

       <tr>

           <th></th>

</tr>

</thead>

    <tbody>

       <tr>

           <td></td>

</tr>

</tbody>

 

确定事件(页面加载事件onload)

 

获取元素：获取表格(document.getElementById()),最终是为了获取表格中tbody里面的行数(长度)。

 

Tbody里面的行数(rows.length)

 

JS的遍历(for循环)

 

获取奇数行和偶数行(对遍历中角标对2取余)

 

设置背景颜色(.style.backgroundColor)