- 带有Element和不带的区别
a) 带Element的获取的是元素节点
b) 不带可能获取文本节点和属性节点
- 获取所以子节点
a) . childNodes
b) . children
c) . parentNode . children [索引]
- . children：获取所有子节点
- opacity：0-1；透明度
- alpha（opacity：百分数）；IE6/7/8透明度
- 先绑定事件再进行循环
- previousNode（）上一个兄弟节点
- alert（变量名）可测试变量名是否可以使用
- 获取body，var body = document.body；
设置样式的两种方式
style
- 行内式可以获取打印出来
- 内嵌和外链的获取不了
- 样式少的时候使用
- 驼峰命名规则
- style属性是对象属性
- 值是字符串类型，没设置的时候是“空字符串”
- .style. cssText = “字符串形式的样式”
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 #list li {
8 list-style-type: none;
9 width: 80px;
10 height: 30px;
11 line-height: 30px;
12 background-color:beige;
13 text-align: center;
14 float: left;
15 margin-left: 5px;
16 }
17
18 #list li.current {
19 background-color: burlywood;
20 }
21
22 #list li a {#list li {
23 list-style-type: none;
24 width: 80px;
25 height: 30px;
26 line-height: 30px;
27 background-color:beige;
28 text-align: center;
29 float: left;
30 margin-left: 5px;
31 }
32
33 #list li.current {
34 background-color: burlywood;
35 }
36
37 #list li a {
38 text-decoration: none;
39 }#list li {
40 list-style-type: none;
41 width: 80px;
42 height: 30px;
43 line-height: 30px;
44 background-color:beige;
45 text-align: center;
46 float: left;
47 margin-left: 5px;
48 }
49
50 #list li.current {
51 background-color: burlywood;
52 }
53
54 #list li a {
55 text-decoration: none;
56 }#list li {
57 list-style-type: none;
58 width: 80px;
59 height: 30px;
60 line-height: 30px;
61 background-color:beige;
62 text-align: center;
63 float: left;
64 margin-left: 5px;
65 }
66
67 #list li.current {
68 background-color: burlywood;
69 }
70
71 #list li a {
72 text-decoration: none;
73 }#list li {
74 list-style-type: none;
75 width: 80px;
76 height: 30px;
77 line-height: 30px;
78 background-color:beige;
79 text-align: center;
80 float: left;
81 margin-left: 5px;
82 }
83
84 #list li.current {
85 background-color: burlywood;
86 }
87
88 #list li a {
89 text-decoration: none;
90 }
91 text-decoration: none;
92 }
93 </style>
94 <script src="tools.js"></script>
95 <script>
96 window.onload = function () {
97 //需求：点击a链接，让a链接对应的li标签添加类。
98 //思路：点击a链接，让他的父亲添加类，其他的li标签类名清空。
99 //步骤：
100 //1.获取事件源
101 //2.绑定事件
102 //3.书写事件驱动程序
103
104
105 //1.获取事件源
106 var ul = getEle("list");
107 var aArr = ul.getElementsByTagName("a");
108
109 for(var i=0;i<aArr.length;i++){
110 aArr[i].onclick = function () {
111 //点击哪个a链接，让他的父亲添加类
112 this.parentNode.className = "current";
113 //设置他的父元素的其他所有兄弟节点类名为空
114 var otherArr = getAllSiblings(this.parentNode);
115 for(var j=0;j<otherArr.length;j++){
116 otherArr[j].className = "";
117 }
118 }
119 }
120
121 // //1.获取事件源
122 // var ul = getEle("list");
123 // var liArr = ul.children;
124 // //2.绑定事件
125 // for(var i=0;i<liArr.length;i++){
126 // var a = getFirstNode(liArr[i]);
127 // a.onclick = function () {
128 // //3.书写事件驱动程序
129 // //排他思想
130 // for(var j=0;j<liArr.length;j++){
131 // liArr[j].className = "";
132 // }
133 // this.parentNode.className = "current";
134 // }
135 // }
136 }
137 </script>
138 </head>
139 <body>
140
141 <div id="menu">
142 <ul id="list">
143 <li class="current"><a href="#">首页</a></li>
144 <li><a href="javascript:void(0)">播客</a></li>
145 <li><a href="javascript:void(0)">博客</a></li>
146 <li><a href="javascript:void(0)">相册</a></li>
147 <li><a href="javascript:void(0)">关于</a></li>
148 <li><a href="javascript:void(0)">帮助</a></li>
149 </ul>
150 </div>
151
152 </body>
153 </html>
菜单的简单练习
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 #list li {
8 list-style-type: none;
9 width: 80px;
10 height: 30px;
11 line-height: 30px;
12 background-color:beige;
13 text-align: center;
14 float: left;
15 margin-left: 5px;
16 }
17
18 #list li.current {
19 background-color: burlywood;
20 }
21
22 #list li a {#list li {
23 list-style-type: none;
24 width: 80px;
25 height: 30px;
26 line-height: 30px;
27 background-color:beige;
28 text-align: center;
29 float: left;
30 margin-left: 5px;
31 }
32
33 #list li.current {
34 background-color: burlywood;
35 }
36
37 #list li a {
38 text-decoration: none;
39 }#list li {
40 list-style-type: none;
41 width: 80px;
42 height: 30px;
43 line-height: 30px;
44 background-color:beige;
45 text-align: center;
46 float: left;
47 margin-left: 5px;
48 }
49
50 #list li.current {
51 background-color: burlywood;
52 }
53
54 #list li a {
55 text-decoration: none;
56 }#list li {
57 list-style-type: none;
58 width: 80px;
59 height: 30px;
60 line-height: 30px;
61 background-color:beige;
62 text-align: center;
63 float: left;
64 margin-left: 5px;
65 }
66
67 #list li.current {
68 background-color: burlywood;
69 }
70
71 #list li a {
72 text-decoration: none;
73 }#list li {
74 list-style-type: none;
75 width: 80px;
76 height: 30px;
77 line-height: 30px;
78 background-color:beige;
79 text-align: center;
80 float: left;
81 margin-left: 5px;
82 }
83
84 #list li.current {
85 background-color: burlywood;
86 }
87
88 #list li a {
89 text-decoration: none;
90 }
91 text-decoration: none;
92 }
93 </style>
94 <script src="tools.js"></script>
95 <script>
96 window.onload = function () {
97 //需求：点击a链接，让a链接对应的li标签添加类。
98 //思路：点击a链接，让他的父亲添加类，其他的li标签类名清空。
99 //步骤：
100 //1.获取事件源
101 //2.绑定事件
102 //3.书写事件驱动程序
103
104
105 //1.获取事件源
106 var ul = getEle("list");
107 var aArr = ul.getElementsByTagName("a");
108
109 for(var i=0;i<aArr.length;i++){
110 aArr[i].onclick = function () {
111 //点击哪个a链接，让他的父亲添加类
112 this.parentNode.className = "current";
113 //设置他的父元素的其他所有兄弟节点类名为空
114 var otherArr = getAllSiblings(this.parentNode);
115 for(var j=0;j<otherArr.length;j++){
116 otherArr[j].className = "";
117 }
118 }
119 }
120
121 // //1.获取事件源
122 // var ul = getEle("list");
123 // var liArr = ul.children;
124 // //2.绑定事件
125 // for(var i=0;i<liArr.length;i++){
126 // var a = getFirstNode(liArr[i]);
127 // a.onclick = function () {
128 // //3.书写事件驱动程序
129 // //排他思想
130 // for(var j=0;j<liArr.length;j++){
131 // liArr[j].className = "";
132 // }
133 // this.parentNode.className = "current";
134 // }
135 // }
136 }
137 </script>
138 </head>
139 <body>
140
141 <div id="menu">
142 <ul id="list">
143 <li class="current"><a href="#">首页</a></li>
144 <li><a href="javascript:void(0)">播客</a></li>
145 <li><a href="javascript:void(0)">博客</a></li>
146 <li><a href="javascript:void(0)">相册</a></li>
147 <li><a href="javascript:void(0)">关于</a></li>
148 <li><a href="javascript:void(0)">帮助</a></li>
149 </ul>
150 </div>
151
152 </body>
153 </html>
style属性的练习
1 <body>
2 <div style="width: 100px;height: 100px;background-color: pink;"></div>
3 <script>
4
5 var div = document.getElementsByTagName("div")[0];
6 div.onmouseover = function () {
7 div.style.width = "200px";
8 div.style.height = "200px";
9 div.style.backgroundColor = "black";
10 div.style.opacity = "0.2";
11 div.style.filter = "alpha(opacity=20)";
12 }
13
14 </script>
15
16 </body>
改变盒子的大小和透明度
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 input {
8 display: block;
9 }
10 </style>
11 </head>
12 <body>
13 <ul>
14 <input type="text"/>
15 <input type="text"/>
16 <input type="text"/>
17 <input type="text"/>
18 <input type="text"/>
19 <button>设置</button>
20 </ul>
21 <script>
22 //需求：点击设置按钮，让所有的input标签获取焦点后高亮显示
23 //步骤：
24 //1.获取事件源
25 //2.绑定事件
26 //3.书写事件驱动程序
27
28 //1.获取事件源
29 var inpArr = document.getElementsByTagName("input");
30 var button = inpArr[inpArr.length-1].nextElementSibling || inpArr[inpArr.length-1].nextSibling ;
31 //2.绑定事件
32 button.onclick = function () {
33 //3.书写事件驱动程序
34 for(var i=0;i<inpArr.length;i++){
35 //当button按钮被点击以后，所有的input标签被绑定事件，onfocus事件
36 inpArr[i].onfocus = function () {
37 this.style.border = "2px solid red";
38 this.style.backgroundColor = "#ccc";
39 }
40 //绑定onblur事件，取消样式
41 inpArr[i].onblur = function () {
42 this.style.border = "";
43 this.style.backgroundColor = "";
44 }
45 }
46 }
47
48
49
50 </script>
51 </body>
52 </html>
文本框获取焦点高亮显示
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
text-align: center;
}
.wrap {
width: 500px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
}
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;
cursor: pointer;
}
.current {
background-color: red!important;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>课程</th>
<th>成绩</th>
</tr>
</thead>
<tbody id="target">
<tr>
<td>
1
</td>
<td>吕不韦</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>
2
</td>
<td>吕布</td>
<td>日语</td>
<td>100</td>
</tr>
<tr>
<td>
3
</td>
<td>吕蒙</td>
<td>营销学</td>
<td>100</td>
</tr>
<tr>
<td>
4
</td>
<td>吕尚</td>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td>
5
</td>
<td>吕雉</td>
<td>英语</td>
<td>100</td>
</tr>
<tr>
<td>
6
</td>
<td>吕超</td>
<td>体育</td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
<script>
//需求：让tr各行变色，鼠标放入tr中，高亮显示。
//1.隔行变色。
var tbody = document.getElementById("target");
var trArr = tbody.children;
//循环判断并各行赋值属性（背景色）
for(var i=0;i<trArr.length;i++){
if(i%2!==0){
trArr[i].style.backgroundColor = "#a3a3a3";
}else{
trArr[i].style.backgroundColor = "#ccc";?
}
//鼠标进入高亮显示
//难点：鼠标移开的时候要回复原始颜色。
//计数器（进入tr之后，立刻记录颜色，然后移开的时候使用记录好的颜色）
var color = "";
trArr[i].onmouseover = function () {
//赋值颜色之前，先记录颜色
color = this.style.backgroundColor;
this.style.backgroundColor = "#fff";
}
trArr[i].onmouseout = function () {
this.style.backgroundColor = color;
}
}
</script>
</body>
</html>
高级隔行变色
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background: url(image/1.jpg) no-repeat;
}
.box {
height: 165px;
padding-top: 35px;
text-align: center;
background: rgba(255,255,255,0.3);
}
img {
cursor: pointer;
margin: 0 10px;
}
</style>
</head>
<body>
<div class="box">
<img src="image/1.jpg" width="200px"/>
<img src="image/2.jpg" width="200px"/>
<img src="image/3.jpg" width="200px"/>
<img src="image/4.jpg" width="200px"/>
<img src="image/5.jpg" width="200px"/>
</div>
<script>
//需求：点击图片，body的背景图修改。
//步骤：
//1.获取事件源
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源
var box = document.getElementsByTagName("div")[0];
//body的获取js内部帮我们优化完毕
var body = document.body;
var imgArr = box.children;
//2.绑定事件
for(var i=0;i<imgArr.length;i++){
imgArr[i].index = i;
imgArr[i].onclick = function () {
//3.书写事件驱动程序
//改body的背景
// body.style.backgroundImage = "url(image/"+(this.index+1)+".jpg)";
body.style.backgroundImage = "url("+this.src+")";
}
}
</script>
</body>
</html>
百度皮肤
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 * {
8 padding: 0;
9 margin: 0;
10 }
11 body {
12 background: url(image/1.jpg) no-repeat;
13 }
14 .box {
15 height: 165px;
16 padding-top: 35px;
17 text-align: center;
18 background: rgba(255,255,255,0.3);
19 }
20 img {
21 cursor: pointer;
22 margin: 0 10px;
23 }
24 </style>
25 </head>
26 <body>
27 <div class="box">
28 <img src="image/1.jpg" width="200px"/>
29 <img src="image/2.jpg" width="200px"/>
30 <img src="image/3.jpg" width="200px"/>
31 <img src="image/4.jpg" width="200px"/>
32 <img src="image/5.jpg" width="200px"/>
33 </div>
34
35 <script>
36 //需求：点击图片，body的背景图修改。
37 //步骤：
38 //1.获取事件源
39 //2.绑定事件
40 //3.书写事件驱动程序
41
42 //1.获取事件源
43 var box = document.getElementsByTagName("div")[0];
44 //body的获取js内部帮我们优化完毕
45 var body = document.body;
46 var imgArr = box.children;
47 //2.绑定事件
48 for(var i=0;i<imgArr.length;i++){
49 imgArr[i].index = i;
50 imgArr[i].onclick = function () {
51 //3.书写事件驱动程序
52 //改body的背景
53 // body.style.backgroundImage = "url(image/"+(this.index+1)+".jpg)";
54 body.style.backgroundImage = "url("+this.src+")";
55 }
56 }
57 </script>
58
59 </body>
60 </html>
隐藏盒子的方式
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 div {
8 margin-top: 20px;
9 width: 200px;
10 height: 200px;
11 background-color: red;
12 position: absolute;
13 top: 100px;
14 left: 10px;
15 z-index: 1;
16 }
17 img {
18 position: absolute;
19 top: 100px;
20 left: 10px;
21 }
22 </style>
23 </head>
24 <body>
25 <button>进化吧，皮卡丘！！！</button>
26 <div></div>
27 <img src="image/mm.png" width="200px"/>
28
29 <script>
30 //需求：点击按钮，让盒子和图片同事移开，并且，图片压住盒子.
31 var btn = document.getElementsByTagName("button")[0];
32 var div = document.getElementsByTagName("div")[0];
33 var img = document.getElementsByTagName("img")[0];
34
35 //绑定事件
36 btn.onclick = function () {
37 div.style.top = "300px";
38 div.style.left = "300px";
39
40 img.style.top = "300px";
41 img.style.left = "300px";
42 img.style.zIndex = "2";
43 }
44 </script>
45
46 </body>
47 </html>
定位和层级
dom元素的创建方法
1.documrnt.write（“<li></li>”）
A) script写在那就创建在那
B) 会被覆盖
2.parentNode.innerHTML += “<li></li>”
3.已有节点.appendChild（创建的节点）；追加新节点到已有节点的最后面
var ul = document.getElementsByTagName(‘ul‘)[0]; //获取已有元素
var li = document.createElement(‘li‘); //创建一个li标签
var liText = document.createTextNode(‘我是一个LI标签‘); //创建一个文本节点
ul.appendChild(li); //把li标签追加到ul最后面
li.appendChild(liText); //把文本节点追加到li标签中
4.已有节点.insertBefore（创建的节点，已有节点的子节点节点）；在已有节点的子节点之前创建一个新的节点
var ul = document.getElementsByTagName(‘ul‘)[0]; //获取已有元素
var li = document.createElement(‘li‘); //创建一个li标签
var liText = document.createTextNode(‘我是一个LI标签‘); //创建一个文本节点
li.appendChild(liText); //把文本节点追加到li标签中
var list = document.getElementsByTagName(‘li‘)[2]; //获取ul的一个子节点
ul.insertBefore(li,list); //添加在list标签之前
5.删除 父节点.removeChild（要删除的子节点）；
A) var ul = document.getElementsByTagName(‘ul‘)[0]; //获取已有元素
var li = document.createElement(‘li‘); //创建一个li标签
var liText = document.createTextNode(‘我是一个LI标签‘); //创建一个文本节点
var list = document.getElementsByTagName(‘li‘)[2]; //获取ul的一个子节点
ul.removeChild(list); //删除ul里的list节点
list.parentNode.removeChild(list); //现照到list的父元素，在进行删除，可以不定义父元素
6.替换 父节点.replaceChild（新节点，老节点）；
A) var ul = document.getElementsByTagName(‘ul‘)[0]; //创建一个文本节点
var li = document.createElement(‘li‘); //创建一个li标签
var liText = document.createTextNode(‘我是一个LI标签‘); //创建一个文本节点
li.appendChild(liText); //把文本节点追加到li标签中
var list = document.getElementsByTagName(‘li‘)[2]; //replaceChild 替换节点
ul.replaceChild(liText,list); //liText替换叼list
7.克隆 var
变量 = 被克隆的节点.cloneNode（true）； （如果true改为false，那么将克隆一个空节点）
var newNode = li.cloneNode(true); //克隆一个li节点给变量newNode
ul.appendChild (newNode); //将克隆的节点添加到ul之后
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <button>创建</button>
9 <ul>
10 aaaaa
11 </ul>
12 <script>
13 //第一种创建方式：document.write();
14 document.write("<li>我是document.write创建的</li>");
15
16 var btn = document.getElementsByTagName("button")[0];
17 var ul = document.getElementsByTagName("ul")[0];
18 // btn.onclick = function () {
19 // document.write("<li>我是document.write创建的</li>");
20 // }
21
22 //第二种：直接利用元素的innerHTNL方法。（innerText方法不识别标签）
23 ul.innerHTML += "<li id=‘li1‘>我是innerHTML创建的</li>";
24
25
26 //第三种：利用dom的api创建元素
27 var newLi = document.createElement("li");
28 newLi.innerHTML = "我是createElement创建的";
29 // console.log(newLi);
30 //在父元素的最后面添加元素。
31 // ul.appendChild(newLi);
32 //指定位置添加
33 var li1 = document.getElementById("li1");
34 ul.insertBefore(newLi,li1);
35
36
37 </script>
38
39
40 </body>
41 </html>
dom元素的创建
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <ul>
9 <li id="li1">我是参照标签</li>
10 </ul>
11
12 <script>
13 //document.write();不常用，因为容易覆盖原来的页面。
14 //innerHTML;用的比较多。绑定属性和内容比较方便。(节点套节点)
15 //document.createElement;也是比较多的，指定数量的时候一般用它。
16
17 var ul = document.getElementsByTagName("ul")[0];
18 var li1 = document.getElementById("li1");
19
20 //创建，添加，删除，替换
21 var li2 = document.createElement("li");
22 li2.innerText = "我是createElement创建的标签，用的是appendChild的方法添加的";
23 ul.appendChild(li2);
24 //用insertBefore添加
25 var li3 = document.createElement("li");
26 li3.innerText = "我是createElement创建的标签，用的是insertBefore的方法添加的"
27 //父节点.insertBefore(新节点，参照节点);
28 ul.insertBefore(li3,li1);
29
30
31 //删除，替换
32 ul.removeChild(li3);
33 //父节点.replaceChild(newNode,oldNode);
34 ul.replaceChild(li3,li2);
35
36 //克隆node.cloneNode(true);深层复制。
37 for(var i=0;i<=3;i++){
38 var newLi = li3.cloneNode(true);
39 ul.appendChild(newLi);
40 }
41
42
43 </script>
44 </body>
45 </html>
元素的操作
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
li {
cursor: pointer;
}
</style>
</head>
<body>
<button>创建列表</button>
<ul></ul>
<script>
//需求：点击列表，添加四大名人，然后鼠标放到谁上面，谁高亮显示。
//思路：创建一个数组，添加内容。利用for循环穿件li标签在添加内容，高亮显示。
//步骤：（指定多少个元素的创建最好用for循环）
//老三步
var btn = document.getElementsByTagName("button")[0];
//获取相关元素并定义内容
var arr = ["黑崎一护","乌尔奇奥拉","冰轮丸","名侦探柯南"];
var ul = document.getElementsByTagName("ul")[0];
btn.onclick = function () {
// ul.innerHTML = "";
for(var i=0;i<arr.length;i++){
//创建li元素
var newLi = document.createElement("li");
newLi.innerHTML += "<li>"+arr[i]+"</li>";
//添加到ul中
ul.appendChild(newLi);
}
//获取所有的li标签然后，为他绑定事件，排他思想，高亮显示
var liArr = ul.children;
//为所有的li绑定事件
for(var i=0;i<liArr.length;i++){
liArr[i].onmouseover = function () {
//排他思想，高亮显示
for(var j=0;j<liArr.length;j++){
liArr[j].style.backgroundColor = "";
}
this.style.backgroundColor = "red";
}
}
}
</script>
</body>
</html>
创建列表，高亮显示
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 body {
8 margin: 0 auto;
9 padding: 0px;
10 font-size: 12px;
11 background: url(image/bg.gif) repeat center 36px;
12 text-align: center;
13 background-color: #c30230;
14 }
15 #content {
16 margin: 0 auto;
17 width: 960px;
18 background: url(image/content_bg.jpg) no-repeat left top;
19 height: 627px;
20 position: relative;
21 }
22
23 #content .tip1, #content .tip2, #content .tip3, #content .tip4, #content .tip5, #content .tip6, #content .tip7, #content .tip8 {
24 position: absolute;
25 width: 227px;
26 left: 200px;
27 top: 100px;
28 }
29
30 #content .tip1 .tip_h {
31 background: url(image/tip1_h.gif) no-repeat left top;
32 }
33
34 #content .tip1 .tip_h, #content .tip2 .tip_h, #content .tip3 .tip_h, #content .tip4 .tip_h, #content .tip5 .tip_h, #content .tip6 .tip_h, #content .tip7 .tip_h, #content .tip8 .tip_h {
35 width: 227px;
36 padding-top: 45px;
37 height: 23px;
38 text-align: left;
39 cursor: move;
40 }
41 #content .tip1 .tip_c {
42 background: url(image/tip1_c.gif) repeat-y;
43 }
44
45 #content .tip1 .tip_c, #content .tip2 .tip_c, #content .tip3 .tip_c, #content .tip4 .tip_c, #content .tip5 .tip_c, #content .tip6 .tip_c, #content .tip7 .tip_c, #content .tip8 .tip_c {
46 width: 200px;
47 padding-left: 12px;
48 padding-right: 15px;
49 min-height: 40px;
50 text-align: left;
51 line-height: 20px;
52 max-height: 160px;
53 word-wrap: break-word;
54 word-break: break-all;
55 overflow: hidden;
56 }
57
58 #content .tip1 .tip_f {
59 background: url(image/tip1_f.gif) no-repeat left top;
60 }
61
62 #content .tip1 .tip_f, #content .tip2 .tip_f, #content .tip3 .tip_f, #content .tip4 .tip_f, #content .tip5 .tip_f, #content .tip6 .tip_f, #content .tip7 .tip_f, #content .tip8 .tip_f {
63 width: 227px;
64 height: 53px;
65 padding-top: 20px;
66 }
67 #content .close, #content .close2 {
68 float: left;
69 font-size: 12px;
70 cursor: pointer;
71 color: #000000;
72 }
73 .clr {
74 clear: both;
75 overflow: auto;
76 display: block;
77 height: 0px;
78 }
79 #content .icon {
80 float: left;
81 width: 35px;
82 padding-left: 15px;
83 height: 35px;
84 text-align: center;
85 }
86 #content .name {
87 float: right;
88 padding-right: 15px;
89 text-align: right;
90 font-size: 14px;
91 line-height: 35px;
92 color: #C0F;
93 }
94 #content .num {
95 float: left;
96 padding-left: 7px;
97 width: 195px;
98 }
99 </style>
100 </head>
101 <body>
102 <!--纸条墙-->
103 <div id="content">
104 <!--纸条-->
105 <div class="tip1" id="tip" >
106 <div class="tip_h" title="双击关闭纸条">
107 <div class="num">第[49568]条 2016-07-7 22:51:52</div>
108 <div class="close" title="关闭纸条" >×</div>
109 <div class="clr"></div>
110 </div>
111 <div class="tip_c">
112 普天同庆，天下大同！
113 </div>
114 <div class="tip_f">
115 <div class="icon">
116 <img src="image/bpic_1.gif" title="">
117 </div>
118 <div class="name">不愿意透露姓名的吕先生</div>
119 <div class="clr"></div>
120 </div>
121 </div>
122 </div>
123
124 <script>
125 //需求：克隆盒子，然后随机位置，点击纸条的时候压住其他的纸条。
126 //思路：获取纸条，克隆，随机数值绑定到纸条上，添加到父盒子中，然后绑定事件层级最高。
127 //步骤：
128 //1.获取纸条，克隆
129 //2.随机数值绑定到纸条上
130 //3.添加到父盒子中
131 //4.然后绑定事件层级最高
132
133 //0.创建多张纸条
134 for(var i=1;i<=10;i++){
135 //1.获取纸条，克隆
136 var tip = document.getElementById("tip");
137 var content = document.getElementById("content");
138 var newTip = tip.cloneNode(true);
139 //问题：id问题。
140 newTip.id = newTip.id+i;
141 //2.随机数值绑定到纸条上(top不要超过400，left不要超过700)
142 var topValue = parseInt(Math.random()*400);//(取值是0-1，那么乘以400,取值就是0-400)
143 var leftValue = parseInt(Math.random()*700);//小数取整
144 newTip.style.top = topValue+"px";
145 newTip.style.left = leftValue+"px";
146 //3.添加到父盒子中
147 content.appendChild(newTip);
148
149 //4.然后绑定事件层级最高
150 newTip.onclick = fn;
151 }
152 //tip本身有问题，没有绑定事件。（1.删除。 2.在绑定一次）
153 tip.onclick = fn;
154 // tip.parentNode.removeChild(tip);
155 //获取所有类名叫做的tip1标签，然后绑定事件。
156 var index = 1;
157 function fn() {
158 //计数器
159 this.style.zIndex = index;
160 index++;
161 }
162
163
164 // 点击关闭 隐藏盒子
165
166 var close = document.getElementsByClassName("close");
167 for (i=0;i<close.length;i++) {
168 close[i].onclick = function () {
169 this.parentNode.parentNode.style.display = "none";
170 }
171 }
172
173 </script>
174
175
176
177 </body>
178 </html>
祝愿墙
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 select {
8 width: 180px;
9 height: 240px;
10 font-size: 16px;
11 background-color: #7dff51;
12 }
13 </style>
14 <script>
15 window.onload = function () {
16 //需求：点击>>>左边的所有选项全部进入右边，
17 //点击<<<右边的所有选项全部进入左边。
18 //思路：获取所有的子元素，然后直接添加到另一侧。
19
20 //获取相关元素
21 var sel1 = document.getElementById("sel1");
22 var sel2 = document.getElementById("sel2");
23 var btnArr = document.getElementsByTagName("button");
24
25 //绑定事件
26 btnArr[0].onclick = function () {
27 //获取左侧的select标签的所有子元素
28 var arr = sel1.children;
29 //遍历添加到右侧(随着左侧标签内元素的减少，数组的长度也会减少，那么)
30 for(var i=arr.length-1;i>=0;i--){
31 //push()是操作数组的。要往一个标签中添加元素，要用appendChild();
32 //而往另外一个标签中添加元素原来的数组长度容易变化，为了防止跳出循环，我们使用反向遍历数组
33 sel2.appendChild(arr[arr.length-1-i]);
34 }
35 }
36
37 btnArr[1].onclick = function () {
38 //获取左侧的select标签的所有子元素
39 var arr = sel2.children;
40 //遍历添加到右侧(随着左侧标签内元素的减少，数组的长度也会减少，那么)
41 for(var i=arr.length-1;i>=0;i--){
42 //push()是操作数组的。要往一个标签中添加元素，要用appendChild();
43 //而往另外一个标签中添加元素原来的数组长度容易变化，为了防止跳出循环，我们使用反向遍历数组
44 sel1.appendChild(arr[arr.length-1-i]);
45 }
46 }
47
48 btnArr[2].onclick = function () {
49 var arr = sel1.children;
50 sel2.appendChild(arr[arr.length-1]);
51 };
52 btnArr[3].onclick = function () {
53 var arr = sel2.children;
54 sel1.appendChild(arr[arr.length-1]);
55 }
56
57
58 }
59 </script>
60 </head>
61 <body>
62 <!-- multiple -->
63 <select name="" size="10" id="sel1" multiple>
64 <option value="">香蕉</option>
65 <option value="">苹果</option>
66 <option value="">鸭梨</option>
67 <option value="">葡萄</option>
68 </select>
69 <button>>>></button>
70 <button><<<</button>
71 <button>></button>
72 <button><</button>
73 <select name="" size="10" id="sel2" multiple>
74
75 </select>
76 </body>
77 </html>
选择水果
时间： 2024-10-12 15:30:11