1、鼠标移动事件 ---------------------
- onmousemove(event) : 鼠标移动事件，event是事件对象。
- onmouseover : 鼠标悬停事件，当鼠标移动到某个控件上面的时候发生
- onmouseout : 鼠标移出事件,当鼠标从控件上移开的时候
2、鼠标点击事件 ---------------------
- onclick : 当鼠标单击某个控件时发生
3、加载与卸载事件
- 加载事件(onload) : 在整个页面的元素加载完毕之后发生
- 卸载事件(onunload) : 是在页面关闭时发生
注意： onload和onunload事件必须写在body或者图片标签里面
4、聚焦与离焦事件 ---------------------
- 聚焦事件onfocus：是在控件获得焦点的时候发生
- 离焦事件onblur：是在控件失去焦点的时候发生
5、键盘事件 ---------------------
- onkeypress: 按下键盘按键并松开
- onkeydown : 按下按键发生
- onkeyup: 松开按键
6、提交与重置事件 ---------------------
- 提交事件：onsubmit 是在点击提交按钮后发生。(必须写在form表单中)
- 重置事件： onreset是在点重置交按钮后发生。
案例一：使用JS完成表格的隔行换色
表格隔行换色
var tblEle = document.getElementById("tbl"); -------------获取表格
var len = tblEle.tBodies[0].rows.length;--------------获取表格中tbody里面的行数(长度)
<script>
window.onload = function(){
//1.获取表格
var tblEle = document.getElementById("tbl");
//2.获取表格中tbody里面的行数(长度)
var len = tblEle.tBodies[0].rows.length;
//alert(len);
//3.对tbody里面的行进行遍历
for(var i=0;i<len;i++){
if(i%2==0){
//4.对偶数行设置背景颜色
tblEle.tBodies[0].rows[i].style.backgroundColor="pink";
}else{
//5.对奇数行设置背景颜色
tblEle.tBodies[0].rows[i].style.backgroundColor="gold";
}
}
}
</script>
表格高亮显示
<script>
function changeColor(id,flag){
if(flag=="over"){
document.getElementById(id).style.backgroundColor="red";
}else if(flag=="out"){
document.getElementById(id).style.backgroundColor="white";
}
}
</script><tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
案例二：使用JS完成全选和全不选
全选和全不选
document.getElementById("checkAll")-----------获取编号前面的复选框
<script>
function checkAll(){
//1.获取编号前面的复选框
var checkAllEle = document.getElementById("checkAll");
//2.对编号前面复选框的状态进行判断
if(checkAllEle.checked==true){
//3.获取下面所有的复选框
var checkOnes = document.getElementsByName("checkOne");
//4.对获取的所有复选框进行遍历
for(var i=0;i<checkOnes.length;i++){
//5.拿到每一个复选框，并将其状态置为选中
checkOnes[i].checked=true;
}
}else{
//6.获取下面所有的复选框
var checkOnes = document.getElementsByName("checkOne");
//7.对获取的所有复选框进行遍历
for(var i=0;i<checkOnes.length;i++){
//8.拿到每一个复选框，并将其状态置为未选中
checkOnes[i].checked=false;
}
}
}
</script><input type="checkbox" onclick="checkAll()" id="checkAll"/> 定义全选框
<td><input type="checkbox" name="checkOne"/></td> 定义一列
<table border="1" width="500" height="50" align="center" >
<thead>
<tr>
<td colspan="4">
<input type="button" value="添加" />
<input type="button" value="删除" />
</td>
</tr>
<tr>
<th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr >
<td><input type="checkbox" name="checkOne"/></td>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
</tbody>
</table>
动态添加城市
var ulEle = document.getElementById("ul1");--------------------获取ul元素节点
var textNode = document.createTextNode("深圳");----------创建城市文本节点
iEle.appendChild(textNode); //<li>深圳</li>--------------将城市文本节点添加到li元素节点中去
<script>
window.onload = function(){
document.getElementById("btn").onclick = function(){
//1.获取ul元素节点
var ulEle = document.getElementById("ul1");
//2.创建城市文本节点
var textNode = document.createTextNode("深圳");//深圳
//3.创建li元素节点
var liEle = document.createElement("li");//<li></li>
//4.将城市文本节点添加到li元素节点中去
liEle.appendChild(textNode);//<li>深圳</li>
//5.将li添加到ul中去
ulEle.appendChild(liEle);
}
}
</script> <input type="button" value="添加新城市" id="btn"/>
<ul id="ul1">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
案例三：使用JS完成省市二级联动
元素操作：
var textNode = document.createTextNode(cities[i][j]);-------------创建城市的文本节点
opEle.appendChild(textNode);---------------将城市的文本节点添加到option元素节点
cityEle.options.length=0; -----------清空第二个下拉列表的option内容
<script>
//1.创建一个二维数组用于存储省份和城市
var cities = new Array(3);
cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
function changeCity(val){
//7.获取第二个下拉列表
var cityEle = document.getElementById("city");
//9.清空第二个下拉列表的option内容
cityEle.options.length=0;
//2.遍历二维数组中的省份
for(var i=0;i<cities.length;i++){
//注意，比较的是角标
if(val==i){
//3.遍历用户选择的省份下的城市
for(var j=0;j<cities[i].length;j++){
//alert(cities[i][j]);
//4.创建城市的文本节点
var textNode = document.createTextNode(cities[i][j]);
//5.创建option元素节点
var opEle = document.createElement("option");
//6.将城市的文本节点添加到option元素节点
opEle.appendChild(textNode);
//8.将option元素节点添加到第二个下拉列表中去
cityEle.appendChild(opEle);
}
}
}
}
</script>
<tr>
<td>籍贯</td>
<td>
<select onchange="changeCity(this.value)">
<option>--请选择--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<select id="city">
</select>
</td>
</tr>