目录
1.元素隐藏的不同方式
2.表格隔行变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隔行变色</title>
<style>
body {
padding: 0;
margin: 0;
}
.wrap {
width: 400px;
margin: 100px auto;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid gainsboro;
width: 500px;
cursor: pointer;
}
th,
td {
border: 1px solid gainsboro;
color: black;
padding: 10px;
}
tbody tr{
background-color: pink;
}
th {
background-color: #10b5fb;
font: bold 16px "微软雅黑";
color: white;
}
td {
font: 14px "微软雅黑";
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>SEX</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>1</td>
<td>Tom</td>
<td>male</td>
</tr>
<tr>
<td>2</td>
<td>Cindy</td>
<td>female</td>
</tr>
<tr>
<td>3</td>
<td>Judy</td>
<td>female</td>
</tr>
<tr>
<td>4</td>
<td>Maria</td>
<td>female</td>
</tr>
</tbody>
</table>
</div>
<script>
function my$(id) {
return document.getElementById(id);
}
var trs = my$("j_tb").getElementsByTagName("tr");
for (var i= 0; i< trs.length; i++) {
//奇数行红,偶数行黄
trs[i].style.backgroundColor = i % 2 === 0 ? "red" : "yellow";
//鼠标进入--换颜色
trs[i].onmouseover=mouseoverHandle;
//鼠标离开--恢复原色
trs[i].onmouseout=mouseoutHandle;
}
//当鼠标进入的时候,先把设置后的颜色保存起来,等到鼠标离开再恢复即可
var lastColor;
function mouseoverHandle(){
lastColor = this.style.backgroundColor;
this.style.backgroundColor="pink";
}
function mouseoutHandle(){
this.style.backgroundColor=lastColor;
}
</script>
</body>
</html>
鼠标进入,红色变成粉色,鼠标离开变回红色:
3.tab切换效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切换效果</title>
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
width: 50px;
height: 30px;
line-height: 30px;
background-color: beige;
text-align: center;
float: left;
margin-left: 5px;
}
li.current {
background-color: burlywood;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<div id="menu">
<ul id="list">
<li class="current"><a href="http://www.baidu.com">首页</a></li>
<li><a href="javascript:void(0);">播客</a></li>
<li><a href="javascript:void(0);">博客</a></li>
<li><a href="javascript:void(0);">相册</a></li>
<li><a href="javascript:void(0);">关于</a></li>
<li><a href="javascript:void(0);">帮助</a></li>
</ul>
</div>
<script>
function getFirstElement(element) {
if (element.firstElementChild) {
return element.firstElementChild;
} else {
var node = element.firstChild;
while (node && node.nodeType != 1) {
node = node.nextSibling;
}
return node;
}
}
var liObjs = document.getElementById("list").children;
for (var i = 0; i < liObjs.length; i++) {
var aObj = getFirstElement(liObjs[i]);
aObj.onclick=function () {
//第一件事:把这个a所在的li的所有的兄弟元素的类样式全部移除
for(var j=0;j<liObjs.length;j++){
liObjs[j].removeAttribute("class");
}
//第二件事:
//当前点击的a的父级元素li(点击的这个a所在的父级元素li),设置背景颜色
this.parentNode.className="current";
};
}
</script>
</body>
</html>
4.大量字符串拼接效果实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>大量字符串拼接效果实现</title>
</head>
<body>
<input type="button" value="拼接" id="btn"/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<script>
//在新浏览器内,这两种方法的效率差不多
/*document.getElementById("btn").onclick=function () {
var str="";
var input=document.getElementsByTagName("input");
for(var i=0;i<input.length-1;i++){
if(input[i].type!=="button"){
str+=input[i].value+"|";
}
}
str+=input[input.length-1].value;
console.log(str);
};*/
//推荐使用数组的方式拼接大量的字符串
document.getElementById("btn").onclick=function () {
var str=[];
var input=document.getElementsByTagName("input");
for(var i=0;i<input.length;i++){
if(input[i].type!=="button"){
str.push(input[i].value);
}
}
console.log(str.join("|"));
};
</script>
</body>
</html>
5.无刷新评论
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无刷新评论</title>
</head>
<body>
<table id="tb" border="1">
<thead>
<tr>
<th>昵称</th>
<th>评论</th>
</tr>
</thead>
<tbody id="tbd">
<tr>
<td>Amber</td>
<td>我喜欢蓝色</td>
</tr>
</tbody>
</table>
<div>
昵称:<input type="text" value="" id="userName"/><br/>
<textarea name="" id="view" cols="30" rows="10"></textarea><br/>
<input type="button" value="评论" id="btn"/><br/>
</div>
<script>
function my$(id){
return document.getElementById(id);
}
//获取按钮,注册点击事件
document.getElementById("btn").onclick = function () {
//获取昵称的元素
var userName = my$("userName");
//获取评论的元素
var view = my$("view");
//创建行
var tr = document.createElement("tr");
//行加到tbody中
my$("tbd").appendChild(tr);
//创建列
var td1 = document.createElement("td");
tr.appendChild(td1);
td1.innerHTML = userName.value;
//创建列
var td2 = document.createElement("td");
tr.appendChild(td2);
td2.innerHTML = view.value;
//清空
userName.value = "";
view.value = "";
};
</script>
</body>
</html>