事件
- 事件：什么时候，做什么事
- 执行机制：触发——响应
- 绑定事件三要素
1.事件源：绑定给谁事件
2.事件类型：绑定什么类型的事件
比如：click单击
3.事件函数：事件发生后执行什么内容，写在函数内部
事件监听
- JavaScript解析器会给有绑定事件的元素添加一个监听，解析器会一直监测这个元素，只要触发了绑定事件，就会立即执行事件函数
常见事件监听方法
- 方法1：绑定HTML元素属性
- 方法2：绑定DOM对象属性
绑定HTML属性：
<input type="button" id="btn" value="点击有惊喜" onclick="alert('点我做什么？')">
绑定DOM对象属性
<input type="button" id="btn" value="点击有惊喜">
<script>
// 获取元素
var btn = document.getElementById("btn");
// 添加绑定事件
btn.onclick = function () {
// 定义的是事件被触发后要做的事情
alert("点我干嘛？");
};
</script>
常见鼠标事件类型
| 事件 | 说明 |
|---|---|
| onclick | 鼠标左键单击触发 |
| ondbclick | 鼠标左键双击触发 |
| onmousedown | 鼠标按键按下触发 |
| onmouseup | 鼠标按键放开时触发 |
| onmousemove | 鼠标在元素上移动触发 |
| onmouseover | 鼠标移动到元素上触发 |
| onmouseout | 鼠标移出元素边界触发 |
非表单元素属性操作
非表单元素的属性
- 例如：href，title，id，src等等
- 调用方式：元素对象打点调用属性名，例如obj.href
- 注意：部分的属性名跟关键字和保留字冲突，会更换写法。
- 属性赋值：给元素属性赋值,等号右侧的赋值都是字符串格式。
class → className
for → htmlFor
rowspan → rowSpan
<body>
<a href="http://www.baidu.com" title="跳转到百度页面" id="link">跳转</a>
<img src="images/a.jpg" alt="美女" class="pic" id="pic">
<script>
// 获取元素
var link = document.getElementById("link");
var pic = document.getElementById("pic");
// 调用元素对象的属性，从而操作 HTML 中标签的属性
console.log(link.href);
console.log(link.title);
console.log(link.id);
console.log(pic.src);
console.log(pic.alt);
console.log(pic.className);
// 等号赋值，值必须是字符串类型的
pic.src = "images/b.jpg";
</script>
</body>
案例：div的显示或者隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background-color: pink;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<input type="button" value="点击隐藏" id="btn">
<div id="box"></div>
<script>
// 获取元素
var btn = document.getElementById("btn");
var box = document.getElementById("box");
// 点击按钮，让 div 显示或隐藏
// box.style.display = "none";
btn.onclick = function () {
// 元素 div 当前是显示的，需要让他隐藏
// 根据 按钮 的 value 值进行条件判断
if (btn.value === "点击隐藏") {
box.className = "hide";
btn.value = "点击显示";
} else {
box.className = "show";
btn.value = "点击隐藏";
}
};
</script>
</body>
</html>
将hide类和show类放在css部分，需要调用的时候使用js代码控制显示
在事件函数内部 有一个 this ，指向事件源
区分一下不同函数内部 this 的指向
普通函数 -> window 对象
构造函数 -> 指向的是生成的实例对象
对象的方法 -> 指向的是对象本身
事件函数 -> 指向的是事件源
上述案例代码可以优化为
案例：切换图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="点击" id="btn"><br>
<img src="images/a.jpg" id="pic">
<script>
// 获取元素
var btn = document.getElementById("btn");
var pic = document.getElementById("pic");
// 通过一个变量作为判断条件，变量值为 1，认为加载的是 a 图片，如果为 2 ，认为加载的是 b 图片
var num = false;
// 给按钮添加点击事件
btn.onclick = function () {
// 给图片换 src 的属性值
// 通过 if 语句判断，如果是 a 图片，就换成 b 图片，反之换成 a 图片
if (num === false) {
pic.src = "images/b.jpg";
// 数字要对应发生变化
num = true;
} else {
pic.src = "images/a.jpg";
num = false;
}
};
</script>
</body>
</html>
使用一个中间变量进行控制，判断是什么图片，该换到什么图片
案例：画廊
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
font-family: "Helvetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
#imagegallery {}
#imagegallery a {
margin: 0px 20px 20px 0px;
padding: 0px;
display: inline;
}
#imagegallery a img {
border: 0;
}
</style>
</head>
<body>
<h2>
美女画廊
</h2>
<div id="imagegallery">
<a href="images/1.jpg" title="美女A">
<img src="images/1-small.jpg" width="100px" alt="美女1" />
</a>
<a href="images/2.jpg" title="美女B">
<img src="images/2-small.jpg" width="100px" alt="美女2" />
</a>
<a href="images/3.jpg" title="美女C">
<img src="images/3-small.jpg" width="100px" alt="美女3" />
</a>
<a href="images/4.jpg" title="美女D">
<img src="images/4-small.jpg" width="100px" alt="美女4" />
</a>
</div>
<div style="clear:both"></div>
<img id="image" src="images/placeholder.png" alt="" width="450px" />
<p id="des">选择一个图片</p>
<script>
// 1.获取元素
var imagegallery = document.getElementById("imagegallery");
var links = imagegallery.getElementsByTagName("a");
var image = document.getElementById("image");
var des = document.getElementById("des");
// 2.遍历数组，添加点击事件
for (var i = 0 ; i <= links.length - 1 ; i++) {
links[i].onclick = function () {
// alert("aaa");
// 3.更改 image 内部的 src 属性值
// this 关键字指代的是触发事件的真正事件源
image.src = this.href;
// 4.更改 des 内部的文字内容
des.innerText = this.title;
// 5.取消 a 标签的默认跳转效果
return false;
};
}
// for 循环内部添加的绑定事件，在触发时，所有的批量添加的事件已经成功，触发事件时都是在循环结束之后
// 批量绑定的事件的事件函数内部如果有 变量 i，要注意，函数执行时已经是在循环结束后
// 循环内部定义的变量是一个全局变量，在循环后执行的 i 变量的值是 i 跳出循环时的值
// image.src = links[i].href;
// console.log(i);
</script>
</body>
</html>
获取标签内部内容的属性
- 获取标签内部内容的都属性有两个：innerHTML和innerText
- innerHTML属性，在获取标签内部内容时，如果包含标签，获取的内容会包含标签，获取的内容包括空白换行等。
- innerText属性，在获取标签内部内容时，如果包含标签，获取的内容会过滤标签，获取的内容会去掉换行和缩进等空白。
更改标签内容
还可以通过两个属性给双标签内部去更改内容：
- innerHTML 设置属性值，有标签的字符串，会按照 HTML 语法中的标签加载。
- innerText 设置属性值，有标签的字符串，会按照普通的字符加载。
对比使用场景
- innerText：在设置纯字符串时使用。
- innerHTML：在设置有内部子标签结构时使用
<body>
<div id="box">
这是一个 div 标签
<span>这是一个 span 标签</span>
</div>
<script>
// 获取元素
var box = document.getElementById("box");
// 打印 box 对象
console.dir(box);
// 调用标签内部内容
console.log(box.innerHTML);
console.log(box.innerText);
// 设置标签内部的内容
box.innerHTML = "<h2>hello JS</h2>";
// box.innerText = "<h2>hello JS</h2>";
</script>
</body>
innerHTML
innerText
表单元素属性
- value用于大部分表单元素的内容获取（option除外）
- type可以获取input标签的类型（输入框，复选框等等）
- disabled禁用属性
- checked复选框选中属性
- selected下拉菜单选中属性
- 注意：在DOM中元素对象的属性值只有一个时，会被转成布尔值显示
txt.disabled = true;
意思就是：disabled = "disabled"这种属性，打印出来的值为false or true。
// 表单元素特有的一些属性，属性名和属性值是一致的，只有一种属性名
console.log(txt.disabled);
txt.disabled = false;
console.log(txt.disabled);
btn.disabled = true;
表单元素案例：用户名和密码检测
- 逻辑：两个输入框，一个提交按钮，id名分别是name，pw，btn
- 给按钮加一个点击事件，判断长度或者其他的条件是否满足，不满足就高亮显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.bg{
background: yellow;
}
</style>
</head>
<body>
<input type="text" id="name"><br>
<input type="text" id="pw"><br>
<input type="button" id="btn" value="提交">
<script>
// 检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框
// 1.获取元素
var btn = document.getElementById("btn");
// 2.给按钮添加点击事件，然后判断位数是否足够
btn.onclick = function () {
// 在事件触发后，去获取对象，内部的数据才是最新
var name = document.getElementById("name");
var pw = document.getElementById("pw");
// 用户名位数是否在 3-6 位，不满足需要高亮显示
if (name.value.length < 3 || name.value.length > 6) {
name.className = "bg";
return;
} else {
name.className = "";
}
// 密码的位数必须在 6-8 位之间，否则高亮显示
if (pw.value.length < 6 || pw.value.length > 8) {
pw.className = "bg";
return;
} else {
pw.className = "";
}
// 提交数据
console.log("提交数据");
};
</script>
</body>
</html>
案例二：随机设置下拉菜单选中项
- option里的选项，数组下标为随机数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="button" value="选择" id="btn">
<br>
<select id="food">
<option>烤肉</option>
<option>拉面</option>
<option>麻辣烫</option>
<option>小龙虾</option>
<option>火锅</option>
<option>外卖</option>
</select>
<script>
// 1.获取元素
var btn = document.getElementById("btn");
var food = document.getElementById("food");
var opts = document.getElementsByTagName("option");
// 2.给按钮添加点击事件
btn.onclick = function () {
// 3.随机选择一个 option
// 每次点击需要获取一个 opts 数组的随机下标
// Math.random() [0,1)
// Math.random()*6 [0,6)
var n = Math.floor(Math.random() * opts.length);
// console.log(n);
// 设置对应的随机项的属性
opts[n].selected = true;
};
</script>
</body>
</html>
案例三：搜索文本框
- 逻辑：没有进行输入的时候，是默认的字体，灰色字体，获得焦点的时候会进行输入，原来的内容清空，失去焦点的时候，同时没有内容的时候，就恢复到灰色字体默认的样子，有内容则保留内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.gray {
color: gray;
}
.black {
color: black;
}
</style>
</head>
<body>
<input type="text" class="gray" value="请输入搜索关键字" id="txtSearch">
<input type="button" value="搜索" id="btnSearch">
<script>
// 获取元素
var txtSearch = document.getElementById("txtSearch");
// 1.获得焦点时，可以使用一个 onfocus，如果文本框内容是默认 请输入搜索关键字，需要清空文字，让文字加载黑色
txtSearch.onfocus = function () {
// 判断是否是默认的提示文字
if (this.value === "请输入搜索关键字") {
this.value = "";
this.className = "black";
}
};
// 2.失去焦点时，可以使用一个 onblur，如果文本框内容为空，需要改为默认提示内容 请输入搜索关键字，让文字颜色变为灰色
txtSearch.onblur = function () {
// 如果用户输入的内容正好与默认提示文本相同，失去焦点时，也应该让文字颜色变为灰色
// 判断内容是否为空
if (this.value === "" || this.value === "请输入搜索关键字") {
this.value = "请输入搜索关键字";
this.className = "gray";
}
};
</script>
</body>
</html>
案例四：全选或者反选
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="all" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
<input type="button" value=" 反 选 " id="btn">
</div>
<script>
// 获取元素
var all = document.getElementById("all");
var tb = document.getElementById("tb");
var btn = document.getElementById("btn");
var tb_inputs = tb.getElementsByTagName("input");
// 1.全选：让子选项的选择效果始终与全选保持一致
all.onclick = function(){
for(var i = 0;i < tb_inputs.length; i++){
tb_inputs[i].checked = all.checked;
}
};
// 2.单独选择子选项过程，每点击一次任何一个子选项，都要进行判断
for(var i = 0;i<tb_inputs.length; i++){
tb_inputs[i].onclick = function(){
// 需要判断所有的子选项是否都是选中的状态，都选中了的话，让全选被选中，如果有的没有选中，让全选取消选中
isAllChecked();
}
}
// 3.反选
btn.onclick = function(){
// 让所有的子元素和之前的状态相反
for(var i = 0;i<tb_inputs.length;i++){
tb_inputs[i].checked = !tb_inputs[i].checked;
}
// 控制全选效果，进行取反
isAllChecked();
};
function isAllChecked() {
// 使用一个中间变量，初始认为所有的子选项都是被选中的
var isAllChecked = true;
// 遍历判断
for(var j = 0;j<tb_inputs.length;j++){
// 一旦有一个没有被选择，让变量变为false
if(tb_inputs[j].checked == false){
isAllChecked = false;
// 只要走到这儿，就肯定不是全选，可以打断循环
break;
}
}
// 如果循环条件不成立，说明子选项都被选中了，isAllChecked没有变化， 还是true
// 给all设置checked属性
all.checked = isAllChecked;
}
</script>
</body>
</html>
自定义属性
- getAttribute(name) 获取标签行内属性
- setAttribute(name，value) 设置标签行内属性
- removeAttribute(name) 移除标签行内属性
- 与element.属性的区别: 上述三个方法用于获取任意的行内属性，包括自定义的属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box" age="18" sex="male">小明</div>
<script>
// 获取元素
var box = document.getElementById("box");
// 元素自有属性
console.log(box.id);
// 元素自定义的新属性不能用点语法直接调用
// 可以调用元素对象的获取自定义属性的方法
console.log(box.getAttribute("age"));
console.log(box.getAttribute("sex"));
// 也可以调用自有的属性
console.log(box.getAttribute("id"));
// 设置属性,添加新的自定义属性或者自有属性
box.setAttribute("age","20");
box.setAttribute("city","Beijing");
// 传的参数不需要进行属性名的修改
box.setAttribute("class","demo");
// 移除属性
box.removeAttribute("age");
box.removeAttribute("class");
</script>
</body>
</html>
style样式属性操作
- 使用 style 属性方式设置的样式显示在标签行内。
- element.style 属性的值，是所有行内样式组成的一个样式对象。
- 样式对象可以继续点语法调用或更改 css 的行内样式属性，例如 width、height 等属性。
- 注意1：类似 background-color 这种复合属性的单一属性写法，是由多个单词组成的，要修改为驼峰命名方式书写 backgroundColor。
- 注意2：通过样式属性设置宽高、位置的属性类型是字符串，需要加上 px 等单位
<input type="button" value="按钮" id="btn">
<div id="box" style="width: 100px" class="bg">文字</div>
<script>
// 获取元素
var btn = document.getElementById("btn");
var box = document.getElementById("box");
// console.log(btn);
// 1.更改类名的方式去更改样式
// 2.根据对象的 style 属性去操作样式
console.log(btn.style);
// 元素对象的 style 属性的值是一个行内样式组成对象，对象内部封装了所有的行内的样式属性及属性值
// 元素的样式属性对象可以继续打点调用，获取或设置相关的行内样式属性
console.log(box.style);
console.log(box.style.width);
// 注意：如果使用的 css 属性名是复合属性的单一属性，需要更改为驼峰命名法
console.log(box.style.backgroundColor);
box.style.width = "200px";
</script>
通过style样式属性操作的样式更改都是行内样式，唯独比important权重低，以后的JS代码更改样式都可以使用这种方式
className类名属性操作
- 修改元素的 className 属性相当于直接修改标签的类名。
- 如果需要修改多条 css 样式，可以提前将修改后的样式设置到一个类选择器中，后续通过修改类名的方式，批量修改 css 样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.cls {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<script src="common.js"></script>
</head>
<body>
<input type="button" value="按钮" id="btn">
<div id="box">文字</div>
<script>
// 问题：实际工作中我们应该选择哪种方法？
// 获取元素
var btn = document.getElementById("btn");
var box = document.getElementById("box");
// 给按钮添加事件
btn.onclick = function () {
// 1.通过更改类名
box.className = "cls";
};
</script>
</body>
</html>
样式很多，类型很复杂的话，建议使用className类名属性操作
元素属性操作基本应用案例一：开关灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="关灯" id="btn">
<script src="common.js"></script>
<script>
// 获取元素，my$是定义在common.js内的方法
var btn = my$("btn");
// 添加点击事件
// 定义一个判断变量，true表示开灯状态，false表示关灯状态
var isOpen = true;
btn.onclick = function(){
// 关灯时，点击后让他关灯并转文字为开灯
// if(isOpen){
// document.body.style.backgroundColor = "black";
// this.value = "开灯";
// isOpen = false;
// }else{
// document.body.style.backgroundColor = "white";
// this.value = "关灯";
// isOpen = true;
// }
// 使用btn的value判断
if(this.value =="关灯"){
document.body.style.backgroundColor = "black";
this.value = "开灯"
}else{
document.body.style.backgroundColor = "white";
this.value = "关灯";
}
};
</script>
</body>
</html>
元素属性操作基本应用案例二：图片切换二维码案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 50px;
height: 50px;
background: url(images/bgs.png) no-repeat -159px -51px;
position: fixed;
right: 10px;
top: 40%;
}
.erweima {
position: absolute;
top: 0;
left: -150px;
}
.box a {
display: block;
width: 50px;
height: 50px;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="erweima hide" id="er">
<img src="images/456.png" alt=""/>
</div>
</div>
<script src="common.js"></script>
<script>
// 获取元素
var box = my$("box");
var er = my$("er");
// 给 box 添加鼠标移上事件 onmouseover ，添加鼠标离开事件 onmouseout
box.onmouseover = function () {
// 让子级元素进行显示，就是将 hide 改为 show
// er.className = "erweima show";
er.className = er.className.replace("hide","show");
};
box.onmouseout = function () {
// 让子级元素进行隐藏，就是将 show 改为 hide
// er.className = "erweima hide";
er.className = er.className.replace("show","hide");
};
</script>
</body>
</html>
元素属性操作基本应用案例三：排他思想——文本框高亮显示案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<button id="btn">按钮</button>
<script>
// 获取元素
var txts = document.getElementsByTagName("input");
// 添加批量的获取焦点事件
for (var i = 0 ; i < txts.length ; i++) {
// 排他思想：1.排除其他 2.保留自己
// 给每一个input标签添加获取焦点事件
txts[i].onfocus = function () {
// 排除其他的方法：将所有的项包含自己都设置为默认样式
// 遍历数组，让所有的样式恢复默认
for (var j = 0 ; j < txts.length ; j++) {
txts[j].style.backgroundColor = "";
}
// 设置元素自己高亮显示
// 保留自己的特殊样式
// this 指代事件源自己
this.style.backgroundColor = "yellow";
};
}
</script>
</body>
</html>
元素属性操作基本应用案例四：设置元素的大小和位置案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
}
.new {
position: absolute;
width: 200px;
height: 200px;
left: 200px;
top: 200px;
}
</style>
</head>
<body>
<input type="button" value="按钮" id="btn">
<div id="box"></div>
<script src="common.js"></script>
<script>
//获取元素
var btn = my$("btn");
var box = my$("box");
// 添加事件
btn.onclick = function () {
// 修改类名
// box.className = "new";
// 修改 style 样式对象中的属性
box.style.width = "200px";
box.style.height = "200px";
box.style.left = "200px";
box.style.top = "200px";
box.style.position = "absolute";
};
</script>
</body>
</html>
## 元素属性操作基本应用案例五：表格隔行变色和高亮显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
td{
width: 100px;
height: 40px;
}
</style>
</head>
<body>
<table border="1" style="border-collapse: collapse;">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script>
// 获取所有的行
var trs = document.getElementsByTagName("tr");
// 1.隔行变色
for (var i = 0; i < trs.length ; i++) {
// 下标为偶数的行显示粉色
// 下标为奇数的行显示灰色
if (i % 2 == 0) {
trs[i].style.backgroundColor = "pink";
} else {
trs[i].style.backgroundColor = "lightgray";
}
// 2.鼠标移上高亮显示，鼠标离开恢复默认
// 全局变量
var bgc;
// 鼠标移上高亮显示
trs[i].onmouseover = function () {
// 定义变量记录 tr 原来的颜色
bgc = this.style.backgroundColor;
this.style.backgroundColor = "skyblue";
};
// 鼠标离开恢复默认
trs[i].onmouseout = function () {
this.style.backgroundColor = bgc;
};
}
</script>
</body>
</html>
元素属性操作基本应用案例六：tab选项卡切换
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {margin:0; padding: 0;}
ul {
list-style-type: none;
}
.box {
width: 400px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
.hd {
height: 45px;
}
.hd span {
display:inline-block;
width: 90px;
background-color: pink;
line-height: 45px;
text-align: center;
cursor: pointer;
}
.hd span.current {
background-color: skyblue;
}
.bd div {
height: 255px;
background-color: skyblue;
display: none;
}
.bd div.current {
display: block;
}
</style>
</head>
<body>
<div class="box">
<div class="hd" id="hd">
<span class="current">体育</span>
<span>娱乐</span>
<span>新闻</span>
<span>综合</span>
</div>
<div class="bd" id="bd">
<div class="current">我是体育模块</div>
<div>我是娱乐模块</div>
<div>我是新闻模块</div>
<div>我是综合模块</div>
</div>
</div>
<script src="common.js"></script>
<script>
// 获取元素
var hd = my$("hd");
var spans = hd.getElementsByTagName("span");
var bd = my$("bd");
var divs = bd.getElementsByTagName("div");
// 鼠标移上某个 span 让它添加一个类名，其他的失去类名
for (var i = 0 ; i < spans.length ; i++) {
// 给每一个 span 元素添加一个新的属性，记录自己在数组中的下标
spans[i].index = i;
spans[i].onmouseover = function () {
// console.dir(this);
// 1.让 span 自己进行切换
// 排他思想：
// 排除其他
for (var j = 0; j < spans.length ; j++) {
spans[j].className = "";
// 由于 divs 中数据个数与 spans 一样，所以可以再同一个遍历循环中，进行排他操作
divs[j].className = "";
}
// 保留自己
this.className = "current";
// console.log(this.index);
// 2.让 bd 中的 div 也对应进行切换
// 对应控制思想：有两组数据中存储了相同个数的元素对象，一组对象的变化，会引起另外一组的变化
// 实现方法：找两个数据中的共同点，两个数组中元素对象的下标是一样的
// 对应控制中也会涉及到排他的操作
// 保留 div 自己的类名
divs[this.index].className = "current";
};
}
</script>
</body>
</html>
