❶ 密码输入时的小眼睛
// 核心思路：密码框和文本框的转换：即input的type属性的转换——password和text
// 另一个就是flag的使用，不必多说
❷ 切换背景
// 核心思路： 修改body的backgroundImage属性
document.body.style.backgroundImage = 'url(' + this.src + ')'; // 注意如何选出body；等号右边是拼接的字符串
❸ 输入提示与判断
.wrong {
color: red;
background-image: url(wrong.png);
}
.right {
color: green;
background-image: url(right.png);
}
<div class="register">
<input type="password" class="myInput">
<p class="msg">请输入6~16位的密码</p>
</div>
<script>
var myInput = document.querySelector('.myInput');
var msg = document.querySelector('.msg');
myInput.onblur = function() {
if (this.value.length < 6 || this.value.length > 16) {
msg.className = 'msg wrong';
msg.innerHTML = '您输入的密码位数不满足6~16位';
} else {
msg.className = 'msg right';
msg.innerHTML = '密码满足要求';
}
}
</script>
❹ tab栏切换（点击）（★☆★）
<div class="nav-top">
<ul>
<li class="selected">按钮1</li> <!-- 默认选中项 -->
<li>按钮2</li>
<li>按钮3</li>
<li>按钮4</li>
<li>按钮5</li>
</ul>
</div>
<div class="nav-content">
<div class="part" style="display: block;">模块1</div> <!-- css中把所有part设置为display:none； 这里利用了行内样式权重高的知识点 -->
<div class="part">模块2</div>
<div class="part">模块3</div>
<div class="part">模块4</div>
<div class="part">模块5</div>
</div>
<script>
// 两个功能模块1：导航栏按钮；内容显示
var navLists = document.querySelector('.nav-top').querySelectorAll('li');
var partList = document.querySelector('.nav-content').querySelectorAll('.part');
// 给导航栏设置index属性，以便于内容的下标对应
for (var i = 0; i < navLists.length; i++) {
navLists[i].setAttribute('data-index', i);
}
for (var i = 0; i < navLists.length; i++) {
navLists[i].onclick = function() {
// 按钮排他性
for (var i = 0; i < navLists.length; i++) { // "干掉所有人"
navLists[i].className = '';
}
this.className = 'selected'; // "留下我自己"
// 显示内容排他性
for (var i = 0; i < partList.length; i++) { // "干掉所有人"
partList[i].style.display = 'none';
}
partList[this.getAttribute('data-index')].style.display = 'block'; // "留下我自己"
}
}
</script>
❹ 隐藏下拉菜单（★☆★）
<ul class="nav">
<li>
<a href="#">loli</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>
<!-- ... -->
</li>
</ul>
<script>
var list = document.querySelector('.nav').children; // list是导航栏的所有孩子li(此时显示出的只有a标签)
for (var i = 0; i < list.length; i++) {
list[i].onmouseover = function() {
this.children[1].style.display = 'block'; // 光标聚焦，li的第二个孩子，也就是ul显示
}
list[i].onmouseout = function() {
this.children[1].style.display = 'none'; // 光标脱离，li的第二个孩子，也就是ul隐藏
}
}
// 其实这里用到了一个小细节：li的第二个孩子(ul)，在display:none时，光标聚焦是忽视它的(相当于完全没有)
</script>
/*
关于css多说几句。这是我的css写法：
大的li只设置左浮动就可以； a中设置block,宽,高,背景颜色等，撑开每个li；
接下来什么都不用管，因为在html中隐藏的ul>li结构直接就是标准流，即a标签的下方，不用我们多操心
*/
❺ 发布留言板
<!-- 核心思路：点击按钮后，动态创建一个li，添加到ul里 -->
<!-- 创建li的同时，把文本域的内容(value)通过li.innerHTML赋给li -->
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<ul></ul>
<script>
// 获取元素
var text = document.querySelector('textarea');
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
// 注册事件
btn.onclick = function() {
if (text.value == '') { // 如果留言为空，弹出alert
alert('您没有输入内容');
return false;
} else {
// 创建元素节点
var li = document.createElement('li');
li.innerHTML = text.value; // innerHTML是可读可写的；注意这里的li是对象名而不是标签名了
// 添加元素
ul.insertBefore(li, ul.children[0]) // 留言每次都发到最前面
}
}
</script>
❻ 发布留言板2（可删除留言）
// 上面代码中else的内容扩展为：
// 创建元素节点
var li = document.createElement('li');
li.innerHTML = text.value + "<a href='javascript:;'>删除</a>"; // javascript:void(0)和javascript:;的效果一样，即禁用该链接
// 添加元素
ul.insertBefore(li, ul.children[0]) // 留言每次都发到最前面
// 删除留言
var dels = document.querySelectorAll('a');
for (var i = 0; i < dels.length; i++) {
dels[i].onclick = function() {
ul.removeChild(this.parentNode); // 关键：此时的this是某个a的对象，触发后直接删除整个父亲
}
}
// 这个获取元素和for循环注册事件的操作，必须和添加a的操作在同一作用域内 —— 保证dels能获取到全部的a
❼ 动态表格
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 模拟从数据库获取的数据
var datas = [{
name: 'loli1',
subject: 'Java',
score: 99
}, {
name: 'loli2',
subject: 'Java',
score: 93
}, {
name: 'loli1',
subject: 'Java',
score: 88
}];
// 往tbody里创建行
var tbody = document.querySelector('tbody');
for (var i = 0; i < datas.length; i++) {
// 创建行
var tr = document.createElement('tr');
tbody.appendChild(tr);
// 行里创建单元格
for (var k in datas[i]) {
var td = document.createElement('td');
td.innerHTML = datas[i][k];
tr.appendChild(td);
}
// 补上最后的"删除"键单元格
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;">删除</a>';
tr.appendChild(td);
}
// 控制删除
var delList = document.querySelectorAll('a');
for (var i = 0; i < delList.length; i++) {
delList[i].onclick = function() {
tbody.removeChild(this.parentNode.parentNode);
}
}
</script>
☀ Loli & JS
♫ Suki