前言：
而今你们对“js案例1表格行背景色采用红灰隔行变色显示”可能比较关心，小伙伴们都需要了解一些“js案例1表格行背景色采用红灰隔行变色显示”的相关内容。那么小编也在网络上收集了一些对于“js案例1表格行背景色采用红灰隔行变色显示””的相关文章，希望同学们能喜欢，我们快快来学习一下吧！案例1：表格行悬停提示效果
【参考文献】
1.JavaScript前端开发模块化教材（人民邮电出版社）赵健保
2.
任务导入：
在Web标准中，HTML定义了页面结构和内容，CSS定义了页面布局和外观，如颜色、字体、边框、边距和版式布局等，而JavaScript定义了页面交互行为，比如元素交互、表单验证、网页游戏等。也就是说JavaScript是让HTML和CSS协同运作的粘合剂。
所以要想成为Web开发工程师，掌握JavaScript必不可少。正式开始学习JavaScript前端开发之前，需要先配置JavaScript编辑器和Web浏览器，其中JavaScript编辑器用于编写HTML、CSS和JavaScript前端代码，Web浏览器用于Web应用的开发测试。
任务一：学会如何配置JavaScript前端编码和测试环境
任务二：体验鼠标mouseover、mouseout事件时表格行背景变色效果开发。
任务实施：
1.安装和配置Visual Studio Code
下载地址：
本人电脑安装的Windows操作系统，右键单击“我的电脑”->属性，显示系统类型为“64位”。user版会安装在当前计算机帐户目录，这意味着如果使用另一个帐号登陆计算机将无法使用别人安装的vscode。而system版本可以安装在非用户目录，例如C盘根目录，任何帐户都可以使用。故选择安装“User Installer 64bit”。
初学者可以将软件的language改为中文，方法如下：
（1）打开“vscode” ，按快捷键“Ctrl+Shift+P”。
（2）在顶部搜索框中输入“configure language”，按回车键。
（3）然后选择安装其他language
（4）安装中文简体，安装完后如下图所示
2.安装Chrome浏览器及Chrome开发者工具初探
下载地址：
打开Chrome 开发者工具
•在Chrome菜单中选择 更多工具 > 开发者工具
•在页面元素上右键点击，选择 “检查”
•使用 快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)
开发者工具简介：
3.在VScode编写代码
源代码：
运行效果：
4.源代码讲解
（1）<html:5> </html:5>
扩展生成HTML5文档代码
（2）行数：2
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
（3）行数：3
向搜索引擎表示该页面是html语言，并且语言为英文网站，其"lang"的意思就是“language”，语言的意思，而“en”即表示english。你的页面如果是中文页面，可将其改为<html lang="zh">
（4）行数：5，6，7
<meta> 元素可提供有关页面的元信息（meta-information）
（5）行数：9-24
了解CSS id 选择器：
<table>标签定义HTML表格。thead表头、tr行、td单元格。
（6）行数：57-69
使用 var 关键词来声明变量，JavaScript变量学习图
HTML DOM Document 对象，getElementById() 方法，getElementsByTagName()方法。
getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
详细资料参考网址：
HTML DOM addEventListener() 方法
document.addEventListener() 方法用于向文档添加事件句柄。
鼠标事件：
再来看一段代码：
<body>
<p>实例使用 addEventListener() 方法在同一个按钮中添加多个事件。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {
document.getElementById("demo").innerHTML += "Moused over!<br>"
}
function mySecondFunction() {
document.getElementById("demo").innerHTML += "Clicked!<br>"
}
function myThirdFunction() {
document.getElementById("demo").innerHTML += "Moused out!<br>"
}
</script>
</body>
运行效果图：
强化训练：
结合本任务实施过程，重置本地环境，重新搭建JavaScript前端编码和测试环境，将Web站点根目录设置为”d:/wwwroot”，编写一个鼠标悬停图片透明度变化的页面，具体要求是从百度下载6张同类主题的图片，规范文件名称和调整大小后，使用ul和li标签插入到网页中，定义样式表让6张图片排成2行3列，设置当鼠标悬停图片在任意图片上时，图片透明度改为半透明（opacity为0.5），当鼠标移开后恢复到正常透明度，保存并测试你的页面。
标签： #js案例1表格行背景色采用红灰隔行变色显示 #html本地测试 #js按钮点击重置页面 #有关javascript的参考文献
