检测用户名和密码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.bg {
background-color: yellow;
}
</style>
</head>
<body>
<input type="text" id="txtUserName"> <br>
<input type="password" id="txtUserPassword"> <br>
<input type="button" value=" 登 录 " id="btnLogin">
<script>
// 检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框
var btnLogin = document.getElementById('btnLogin');
btnLogin.onclick = function () {
// 检测用户名是否是3-6位，密码是否是6-8位
var txtUserName = document.getElementById('txtUserName');
var txtUserPassword = document.getElementById('txtUserPassword');
//检测用户名是否是3-6位
if (txtUserName.value.length < 3 || txtUserName.value.length > 6) {
txtUserName.className = 'bg';
return;
} else {
txtUserName.className = '';
}
// 密码是否是6-8位
if (txtUserPassword.value.length < 6 || txtUserPassword.value.length > 8) {
txtUserPassword.className = 'bg';
return;
} else {
txtUserPassword.className = '';
}
console.log('执行登录');
}
</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');
// 获取焦点的事件 focus
txtSearch.onfocus = function () {
if (this.value === '请输入搜索关键字') {
this.value = '';
this.className = 'black';
}
}
// 当文本框失去焦点，如果文本框里的内容为空 还原文本框里的文字，并且让字体变为灰色
// 失去焦点的事件 blur
txtSearch.onblur = function () {
// 判断文本框中的内容为空
// if (this.value === '')
if (this.value.length === 0 || 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="j_cbAll" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_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>
// 1 全选
// 1.1 获取父checkbox，注册点击事件
var j_cbAll = document.getElementById('j_cbAll');
j_cbAll.onclick = function () {
// 1.2 找到所有子的checkbox，让这些checkbox的状态跟父checkbox保持一致
var j_tb = document.getElementById('j_tb');
var inputs = j_tb.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type === 'checkbox') {
// 让子的checkbox的选中状态，和父checkbox的选中状态一致
input.checked = this.checked;
}
}
}
// 2 当点击子的checkbox，如果所有的子的checkbox都被选中了，让父的checkbox也选中
// 如果有一个子的checkbox没有被选中，父的checkbox也不被选中
// 3 反选
</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="j_cbAll" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_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 j_tb = document.getElementById('j_tb');
var inputs = j_tb.getElementsByTagName('input');
// 1 全选
// 1.1 获取父checkbox，注册点击事件
var j_cbAll = document.getElementById('j_cbAll');
j_cbAll.onclick = function () {
// 1.2 找到所有子的checkbox，让这些checkbox的状态跟父checkbox保持一致
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type === 'checkbox') {
// 让子的checkbox的选中状态，和父checkbox的选中状态一致
input.checked = this.checked;
}
}
}
// 2 当点击子的checkbox，如果所有的子的checkbox都被选中了，让父的checkbox也选中
// 如果有一个子的checkbox没有被选中，父的checkbox也不被选中
// 此处的循环，是遍历所有子的checkbox，注册点击事件
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
// 判断是否是checkbox
if (input.type !== 'checkbox') {
// 结束当前循环，继续下一次循环
continue;
}
// 给子的checkbox注册点击事件
input.onclick = function () {
// 假设所有的子的checkbox都被选中了
var isAllChecked = true;
// 判断是否所有的子的checkbox都被选中了
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type !== 'checkbox') {
continue;
}
// 判断当前的所有checkbox是否都被选中
if (!input.checked) {
isAllChecked = false;
}
}
// 设置父的checkbox的状态
j_cbAll.checked = isAllChecked;
}
}
// 判断父的checkbox的状态 封装成函数
// 3 反选
// 3.1 给反选按钮注册点击事件
var btn = document.getElementById('btn');
btn.onclick = function () {
// 3.2 找到所有的子的checkbox，让其反选
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
// 判断是否是checkbox
if (input.type !== 'checkbox') {
continue;
}
// 让子的checkbox反选
input.checked = !input.checked;
// 父的checkbox
}
}
</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="j_cbAll" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_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 j_tb = document.getElementById('j_tb');
var inputs = j_tb.getElementsByTagName('input');
// 1 全选
// 1.1 获取父checkbox，注册点击事件
var j_cbAll = document.getElementById('j_cbAll');
j_cbAll.onclick = function () {
// 1.2 找到所有子的checkbox，让这些checkbox的状态跟父checkbox保持一致
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type === 'checkbox') {
// 让子的checkbox的选中状态，和父checkbox的选中状态一致
input.checked = this.checked;
}
}
}
// 2 当点击子的checkbox，如果所有的子的checkbox都被选中了，让父的checkbox也选中
// 如果有一个子的checkbox没有被选中，父的checkbox也不被选中
// 此处的循环，是遍历所有子的checkbox，注册点击事件
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
// 判断是否是checkbox
if (input.type !== 'checkbox') {
// 结束当前循环，继续下一次循环
continue;
}
// 给子的checkbox注册点击事件
input.onclick = function () {
checkAllCheckBox();
}
}
// 判断父的checkbox的状态 封装成函数
function checkAllCheckBox() {
// 假设所有的子的checkbox都被选中了
var isAllChecked = true;
// 判断是否所有的子的checkbox都被选中了
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type !== 'checkbox') {
continue;
}
// 判断当前的所有checkbox是否都被选中
if (!input.checked) {
isAllChecked = false;
}
}
// 设置父的checkbox的状态
j_cbAll.checked = isAllChecked;
}
// 3 反选
// 3.1 给反选按钮注册点击事件
var btn = document.getElementById('btn');
btn.onclick = function () {
// 3.2 找到所有的子的checkbox，让其反选
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
// 判断是否是checkbox
if (input.type !== 'checkbox') {
continue;
}
// 让子的checkbox反选
input.checked = !input.checked;
// 设置父的checkbox的状态
checkAllCheckBox();
}
}
</script>
</body>
</html>
自定义属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box" age="18" personId="1">张三</div>
<script>
var box = document.getElementById('box');
// // 自有的属性
// console.log(box.id);
// // 自定义属性 -- 不能使用下面的方式获取到box元素对应的div标签的的自定义属性
// console.log(box.age);
// console.log(box.personId);
// 获取自定义属性的值 getAttribute()
// console.log(box.getAttribute('age'));
// console.log(box.getAttribute('personId'));
// 设置自定义属性
// box.setAttribute('sex', 'male');
// box.setAttribute('class', 'test');
// 移除属性
box.removeAttribute('age');
box.removeAttribute('id');
</script>
</body>
</html>
样式操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.cls {
background-color: red;
}
</style>
</head>
<body>
<input type="button" id="btn" value=" 点我 "> <br>
<input type="text" id="txt">
<script>
// 根据id获取元素 封装成函数
function my$(id) {
return document.getElementById(id);
}
// 样式操作
// 1 使用类样式
// my$('btn').onclick = function () {
// my$('txt').className = 'cls';
// }
// 2 使用style
my$('btn').onclick = function () {
// my$('txt').style
var txt = my$('txt');
// console.log(txt.style);
// 样式属性 background-color
// DOM中style的属性 backgroundColor
txt.style.backgroundColor = 'red';
}
var person = {
name: 'zs',
age: 18,
dog: {
name: 'puppy',
age: 2
}
}
console.log(person.dog.name);
</script>
</body>
</html>
模拟DOM结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">hello</div>
<p id="p">world</p>
<!-- 这是注释 -->
<script>
var box = document.getElementById('box');
console.dir(box);
// 创建一些列具有相同属性的对象，构造函数
// 获取对象没有的属性，属性的值是undefined
function Node(options) {
// 设置属性的默认值
this.className = options.className || '';
this.id = options.id || '';
// 跟节点相关的属性
// 节点的名称，如果是元素的节点的话，是标签的名称
this.nodeName = options.nodeName || '';
// 节点的类型 如果是元素节点 1 属性节点 2 文本节点 3 数值类型
this.nodeType = options.nodeType || 1;
// 记录节点的值，如果是元素节点，始终是null
this.nodeValue = options.nodeValue || null;
// 记录子节点
this.children = options.children || [];
}
// 创建html节点
var html = new Node({
nodeName: 'html'
});
// 创建head节点
var head = new Node({
nodeName: 'head'
});
// 设置html中的子节点 head
html.children.push(head);
// console.dir(html)
// body
var body = new Node({
nodeName: 'body'
})
// 设置html中的子节点 body
html.children.push(body);
// div
var div = new Node({
nodeName: 'div'
})
// p
var p = new Node({
nodeName: 'p'
})
// 设置body的子节点
body.children.push(div);
body.children.push(p);
console.dir(html);
// 在运行的时候，浏览器内部维护了一颗DOM树
// 1 深刻理解DOM
// 2 了解节点相关的属性 nodeName nodeType nodeValue
// 3 了解节点的层次结构
</script>
</body>
</html>样式操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.cls {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<input type="button" id="btn" value=" 点我 "> <br>
<div id="box"></div>
<script src="common.js"></script>
<script>
// 操作样式的时候，使用类样式 使用style？
// 当设置多个样式属性的时候使用类样式方便
// 当设置样式属性比较少的时候使用style比较方便
//
//
//
// 1 类样式
// my$('btn').onclick = function () {
// my$('box').className = 'cls';
// }
// 2 使用style
my$('btn').onclick = function () {
// 当设置宽度和高度的时候必须带单位，如果不带单位，有错误
var box = my$('box');
box.style.width = '200px';
box.style.height = '200px';
box.style.backgroundColor = 'red';
}
</script>
</body>
</html>开关灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="关灯" id="btn">
<script src="common.js"></script>
<script>
// 是否开灯 false 关灯状态 true 开灯状态
var isOpen = true;
my$('btn').onclick = function () {
if (isOpen) {
document.body.style.backgroundColor = 'black';
this.value = '开灯';
isOpen = false;
} else {
document.body.style.backgroundColor = 'white';
this.value = '关灯';
isOpen = true;
}
}
</script>
</body>
</html>显示隐藏二维码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.nodeSmall {
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;
}
.nodeSmall a {
display: block;
width: 50px;
height: 50px;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<div class="nodeSmall" id="node_small">
<div class="erweima hide" id="er">
<img src="images/456.png" alt=""/>
</div>
</div>
<script src="common.js"></script>
<script>
// 当鼠标移入 onmouseover
// 当鼠标移出 onmouseout
var nodeSmall = my$('node_small');
nodeSmall.onmouseover = function () {
// my$('er').className = 'erweima show';
my$('er').className = my$('er').className.replace('hide', 'show');
}
nodeSmall.onmouseout = function () {
// my$('er').className = 'erweima hide';
my$('er').className = my$('er').className.replace('show', 'hide');
}
</script>
</body>
</html>高亮显示输入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
<input type="text"><br>
<input type="button" value=" 提交 ">
<script>
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
// 判断input是否是文本框
if (input.type !== 'text') {
continue;
}
// 让当前正在输入的文本框 高亮显示
input.onfocus = function () {
// 让所有的文本框去掉高亮的效果
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type !== 'text') {
continue;
}
// 去除所有文本框高亮显示
input.style.backgroundColor = '';
}
// 当前文本框高亮显示
this.style.backgroundColor = 'lightgray';
}
}
</script>
</body>
</html>设置div的大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: pink;
}
.cls {
width: 200px;
height: 200px;
position: absolute;
top: 100px;
left: 100px;
background-color: pink;
}
</style>
</head>
<body>
<input type="button" value=" 点我 " id="btn">
<br>
<div id="box"></div>
<script src="common.js"></script>
<script>
my$('btn').onclick = function () {
var box = my$('box');
// 改变box的大小和位置
// 使用class
// box.className = 'cls';
//
// 使用style 设置大小和位置的时候 数字必须带单位
box.style.width = '200px';
box.style.height = '200px';
box.style.position = 'absolute';
box.style.left = '200px';
box.style.top = '200px';
console.log(box.style);
}
</script>
</body>
</html>隔行变色和高亮显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id="mv">
<li>西施</li>
<li>貂蝉</li>
<li>王昭君</li>
<li>杨玉环</li>
<li>芙蓉姐姐</li>
</ul>
<script>
// 1 隔行变色
// 获取到所有的li，判断奇数行和偶数行
var mv = document.getElementById('mv');
var lists = mv.getElementsByTagName('li');
for (var i = 0; i < lists.length; i++) {
var li = lists[i];
// 判断当前的li 是奇数行 还是偶数行
if (i % 2 === 0) {
// i是偶数 ， 但是当前是奇数行
// 设置奇数行的背景颜色
li.style.backgroundColor = 'red';
} else {
// 设置偶数行的背景颜色
li.style.backgroundColor = 'green';
}
}
// 2 鼠标放上高亮显示
//
// 2.0 给所有的li 注册事件 鼠标经过和鼠标离开的两个事件
for (var i = 0; i < lists.length; i++) {
var li = lists[i];
// 2.1 鼠标放到li上，高亮显示当前的li
var bg;
li.onmouseover = function () {
// 鼠标放到li上的时候，应该记录li当前的颜色
bg = this.style.backgroundColor;
this.style.backgroundColor = 'yellow';
}
// 2.2 鼠标离开li，还原原来的颜色
li.onmouseout = function () {
// 鼠标离开，还原原来的颜色
this.style.backgroundColor = bg;
}
}
</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: purple;
}
.bd div {
height: 255px;
background-color: purple;
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>
// 1 鼠标放到tab栏高亮显示，其它tab栏取消高亮
var hd = my$('hd');
var spans = hd.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
var span = spans[i];
// 注册事件
span.onmouseover = fn;
}
// 鼠标经过的事件处理函数
function fn() {
// 让所有的span取消高亮显示
for (var i = 0; i < spans.length; i++) {
var span = spans[i];
span.className = '';
}
// 当前的span高亮显示
this.className = 'current';
}
// var fn = function () {
// }
// 2 tab栏对应的div 显示，其它div隐藏
</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: purple;
}
.bd div {
height: 255px;
background-color: purple;
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>
// 1 鼠标放到tab栏高亮显示，其它tab栏取消高亮
var hd = my$('hd');
var spans = hd.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
var span = spans[i];
// 通过自定义属性，记录当前span的索引
span.setAttribute('index', i);
// 注册事件
span.onmouseover = fn
}
// 鼠标经过的事件处理函数
function fn() {
// 让所有的span取消高亮显示
for (var i = 0; i < spans.length; i++) {
var span = spans[i];
span.className = '';
}
// 当前的span高亮显示
this.className = 'current';
// 2 tab栏对应的div 显示，其它div隐藏
// 所有的div 隐藏
var bd = my$('bd');
var divs = bd.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
div.className = '';
}
// 当前span对应的div显示
// 获取自定义属性的值
var index = parseInt(this.getAttribute('index')) ;
divs[index].className = 'current';
}
// var fn = function () {
// }
</script>
</body>
</html>
模拟DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">hello</div>
<p id="p">world</p>
<!-- 这是注释 -->
<script>
// 文档树
// 节点
// 元素节点
// 属性节点
// 文本节点
// 注释节点
// var box = document.getElementById('box');
// console.dir(box);
// var p = document.getElementById('p');
// console.dir(p);
//
//
// 创建一些列具有相同属性的对象，构造函数
// 获取对象没有的属性，属性的值是undefined
function Node(options) {
// if (options.className) {
// this.className = options.className;
// } else {
// this.className = '';
// }
// this.className = options.className ? options.className : '';
// 设置属性的默认值
this.className = options.className || '';
}
// || 布尔类型的运算符，如果有一边是true就返回true，如果两边同时为false返回false
// || 两边也可以是其它类型，会先转换成布尔类型
// 如果第一个 运算数 转换成布尔类型，是true ，直接返回这个运算数
// 如果第一个 运算数 转换成布尔类型，是false，返回第二个运算数
var o = new Node({
// className: 'cls'
});
console.log(o);
</script>
</body>
</html>总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script>
// DOM 文档对象模拟
//
// 常见的DOM操作
// 获取元素 getElementById() getElementsByTagName()
// 给元素注册事件 onclick onmouseover onmouseout onfocus onblur
// 操作元素的属性
// 非表单元素 href title src alt等
// 表单元素 type value checked disabled selected
// 公共属性 id className style
// 样式操作 className style
// 自定义属性 setAttribute() getAttribute() removeAttribute()
</script>
</body>
</html>