JavaScript 练习（二）事件
事件：控制台Console输入：console.dir(document)，以on开头为事件
常用事件
对鼠标进行操作
onload ：页面加载自动启动时间
onclick：单击
ondblclick ：双击
onmouseover ：鼠标移入
onmouseout ：鼠标移出
onmousemove ：移动鼠标
onblur ：失焦
onfocus ：获得焦点
onsubmit ：提交事件
onrest ： 重置事件
onchange ： 改变内容时
对表单进行操作
onkeydown ：按下鼠标的键
onkeyup ：松开鼠标的键
onkeypress ：输入某个字符
一）表格隔行变色，鼠标进入高亮显示，已开恢复原来的颜色
onmouseover ：鼠标移入
onmouseout ：鼠标移出
<head> <meta charset = "UTF-8"> <title>表格隔行变色</title> <style> *{ margin:0; padding:0; } table{ margin:50px auto 0; border-collapse:collapse; } th,tr{ text-align:center; } td{ height:40px; cursor:pointer; //鼠标手型 } th{ background-color:rgb(0,153,203); color:#fff; height:50px; } tbody tr:nth-child(even){ //偶数设置颜色 background-color:#666; } tbody tr:nth-child(odd){ //奇数设置颜色 background-color:#eee; } </style> </head> <body> <table border = "1" width = "600">
<thead> <th>序号</th> <th>姓名</th> <th>课程</th> <th>成绩</th> </thead>
<tbody> <tr> <td>001</td> <td>张三</td> <td>数学</td> <td>98</td> </tr> <tr> <td>002</td> <td>李四</td> <td>数学</td> <td>56</td> </tr> <tr> <td>003</td> <td>王五</td> <td>数学</td> <td>68</td> </tr> </tbody> </body> <script> var trs = document.getElementByTagName('tbody')[0].getElementsByTagName('tr'); for(var i in trs){ trs[i].onmouseover = function(){ //鼠标移入高亮显示 this.style.backgroundColor = 'red'; } trs[i].onmouseout = function(){ this.style.backgroundColor = ''; //鼠标移出移除高亮显示 } } </script>
二）相册功能：点击小图片，使下面的大图片位置修改路径为相应的大图片，图片说明修改为innerHTML（没写完）
<div class="wrapper">
<h2>相册</h2>
<ul>
<li><img class="photo-item" src="images/001.jpg" /></li>
<li><img class="photo-item" src="images/002.jpg" /></li>
<li><img class="photo-item" src="images/003.jpg" /></li>
<li><img class="photo-item" src="images/004.jpg" /></li>
</ul>
<img src="images/100.png" />
<p>请选择图片</p>
</div>
<script>
var imgs = ['001.jpg','002.jpg','003.jpg','004.jpg'];
var items = document.querySelectorAll('.photo-item')
for(var i=0;i<items.length;i++){
items[i].onmouseover = function(){
}
}
</script>
