- multiple. select列表多选
- 触发事件后调用有参数的函数要先创建一个函数，然后在函数内调用执行函数
- Array.from（伪数组）：伪数组变为真数组
- indexOf（）：查询字符的索引
a) indexOf（‘abcde’）
i. indexOf（‘a’）的索引是0
ii. indexOf（‘abc’）的索引是0，按照第一个字符的索引
iii. indexOf（‘ac’）的索引是-1，查找不到ac连续的字符
iv. indexOf（‘f’）的索引是-1，查询不到返回-1
BOM：浏览器对象模型
- window是javascript的顶级对象
- window内置很多方法
- window.open（url，target，paranm）
a) url：地址
b) target：打开新窗口的方式，_blank/
5. window.close()关闭窗口
6. ocation.href = “跳转到的新网址”
7. setTimeout（function （）{},5000(单位：毫秒)）
a) 炸弹定时器 ，只执行一次执行完报废
8. history 历史记录管理
a) back：回退
b) go（-1）；0 是刷新
定时器
- 刷新页面，
- 固定时间执行一段代码
- 定义方法
a) setInterval（匿名函数，间隔时间（单位毫秒））；
b) senInterval（函数，间隔时间）；
c) setInterval（“函数”，间隔时间）
3. clearInterval（定时器的一个ID值，由setInterval返回）
4. script中只能获取行内式样式，内联和内的无法获取
//返回值，清除定时器。
var num = 1;
//setInterval他的返回值就是定时器的名字
var timer = setInterval(function () {
console.log(num);
num++
if(num===10){
//如何停止定时器呢？？？
clearInterval(timer);
}
},500);
window.onload = function () {
//获取相关元素
var imgArr = document.getElementsByTagName("img");
//设置定时器
setTimeout(fn,5000);
function fn(){
imgArr[0].style.display = "none";
imgArr[1].style.display = "none";
}
}
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 select {
8 width: 170px;
9 height: 200px;
10 font-size: 16px;
11 background-color: #a4ff43;
12 }
13 </style>
14 </head>
15 <body>
16 <select name="" id="sel1" size="10" multiple>
17 <option value="0">香蕉</option>
18 <option value="1">苹果</option>
19 <option value="2">鸭梨</option>
20 <option value="3">葡萄</option>
21 </select>
22 <input type="button" value=">>>"/>
23 <input type="button" value="<<<"/>
24 <input type="button" value=">"/>
25 <input type="button" value="<"/>
26 <select name="" id="sel2" size="10" multiple>
27
28 </select>
29
30 <script>
31 //需求1：点击>>>和<<<两个按钮，所有的子元素都跑到对方的标签中。
32 //步骤：
33 //1.获取相关元素，并绑定事件
34 //2.获取子元素，整体的添加到另外一边的标签中
35
36 //1.获取相关元素，并绑定事件
37 var sel1 = document.getElementById("sel1");
38 var sel2 = document.getElementById("sel2");
39 var inpArr = document.getElementsByTagName("input");
40
41 inpArr[0].onclick = function () {
42 //2.获取子元素，整体的添加到另外一边的标签中
43 var arr = sel1.children;
44 //循环遍历放入另一侧的select标签中
45 for(var i=arr.length-1;i>=0;i--){
46 //放入sel2中，不能用push，要用appendChild;
47 sel2.appendChild(arr[0]);
48 }
49 }
50 //同理
51 inpArr[1].onclick = function () {
52 //2.获取子元素，整体的添加到另外一边的标签中
53 var arr = sel2.children;
54 //循环遍历放入另一侧的select标签中
55 for(var i=arr.length-1;i>=0;i--){
56 //放入sel2中，不能用push，要用appendChild;
57 sel1.appendChild(arr[0]);
58 }
59 }
60
61 //需求2：点击>和<两个按钮，所有被选定的子元素都跑到对方的标签中。
62 //思路：获取所有子节点，然后循环判断，只有selected属性值为true的选项才能被添加到右侧的select标签中
63 inpArr[2].onclick = function () {
64 //获取所有子节点
65 var arr = sel1.children;
66 //遍历判断数组中的元素selected属性为true的，添加到相反的select标签中
67 for(var i=arr.length-1;i>=0;i--){
68 if(arr[i].selected === true){
69 // arr[i].selected = false;
70 sel2.appendChild(arr[i]);
71 }
72 }
73 }
74 //同理
75 inpArr[3].onclick = function () {
76 //获取所有子节点
77 var arr = sel2.children;
78 //遍历判断数组中的元素selected属性为true的，添加到相反的select标签中
79 for(var i=arr.length-1;i>=0;i--){
80 if(arr[i].selected === true){
81 // arr[i].selected = false;
82 sel1.appendChild(arr[i]);
83 }
84 }
85 }
86
87
88 </script>
89
90
91 </body>
92 </html>
选中的value跑到另外一个表格中（简单版）
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 select {
8 width: 170px;
9 height: 200px;
10 font-size: 16px;
11 background-color: #a4ff43;
12 }
13 </style>
14 </head>
15 <body>
16 <select name="" id="sel1" size="10" multiple>
17 <option value="0">香蕉</option>
18 <option value="1">苹果</option>
19 <option value="2">鸭梨</option>
20 <option value="3">葡萄</option>
21 </select>
22 <input type="button" value=">>>"/>
23 <input type="button" value="<<<"/>
24 <input type="button" value=">"/>
25 <input type="button" value="<"/>
26 <select name="" id="sel2" size="10" multiple>
27
28 </select>
29
30 <script>
31 //需求1：点击>>>和<<<两个按钮，所有的子元素都跑到对方的标签中。
32
33 var sel1 = document.getElementById("sel1");
34 var sel2 = document.getElementById("sel2");
35 var inpArr = document.getElementsByTagName("input");
36
37 //如果不带参数，我们可以直接绑定一个函数名。但是因为带有参数，所以我们需要匿名函数去调用这个函数。
38 inpArr[0].onclick = function () {
39 fn1(sel1,sel2);
40 }
41 inpArr[1].onclick = function () {
42 fn1(sel2,sel1);
43 }
44 inpArr[2].onclick = function () {
45 fn2(sel1,sel2);
46 }
47 inpArr[3].onclick = function () {
48 fn2(sel2,sel1);
49 }
50 //封装的时候要注意，第一个按钮先获取的是sel1，第二个按钮先获取的是sel2;
51 function fn1(ele1,ele2) {
52 var arr = ele1.children;
53 for(var i=arr.length-1;i>=0;i--){
54 ele2.appendChild(arr[0]);
55 }
56 }
57 //把sel1和sel2设置成两个形参，通过调用的时候先后传递达成不一样的需求
58 function fn2(ele1,ele2) {
59 var arr = ele1.children;
60 for(var i=arr.length-1;i>=0;i--){
61 if(arr[i].selected === true){
62 arr[i].selected = false;
63 ele2.appendChild(arr[i]);
64 }
65 }
66 }
67
68
69 </script>
70
71
72 </body>
73 </html>
选中的value跑到另外一个表格中（封装版）
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 select {
8 width: 150px;
9 height: 200px;
10 background-color: #7bff68;
11 }
12 </style>
13 </head>
14 <body>
15 <select size="10" name="aaa" id="sel1" multiple="multiple">
16 <option value="0">1香蕉</option>
17 <option value="1">2苹果</option>
18 <option value="2">3大鸭梨</option>
19 <option value="3">4草莓</option>
20 </select>
21
22 <input type="button" value=">>>"/>
23 <input type="button" value="<<<"/>
24 <input type="button" value=">"/>
25 <input type="button" value="<"/>
26
27 <select size="10" name="bbb" id="sel2" multiple="multiple">
28
29 </select>
30
31 <script>
32 //需求：点击按钮把对应的选中项移动到另一侧。
33 //技术点：如果移动单一的选项，那么看看哪个选项是有selected的。
34 //如果移动所有的选项，那么直接把sel1中的所有选项放入sel2中。
35
36 //步骤：
37 //1.获取事件源和相关元素
38 //2.绑定事件
39 //3.书写事件驱动程序
40
41 //步骤：
42 //1.获取事件源和相关元素
43 var sel1 = document.getElementById("sel1");
44 var sel2 = document.getElementById("sel2");
45 var inpArr = document.getElementsByTagName("input");
46
47 //2.绑定事件(push和appendChild用法相似：但是一个是控制数组，一个是控制元素节点)
48 inpArr[0].onclick = function () {
49 var optArr = sel1.children;
50 for(var i=0;i<optArr.length;){
51 sel2.appendChild(optArr[i]);
52 }
53 }
54
55 //为第二个按钮绑定事件
56 inpArr[1].onclick = function () {
57 var optArr = sel2.children;
58 for(var i=0;i<optArr.length;){
59 sel1.appendChild(optArr[i]);
60 }
61 }
62 inpArr[2].onclick = function () {
63 var optArr = sel1.children;
64 for(var i=optArr.length-1;i>=0;i--){
65 if(optArr[i].selected==true){
66 optArr[i].selected=false;
67 sel2.appendChild(optArr[i]);
68 }
69 }
70 //获取sel2中的子元素变成真数组，然后排序
71 var aaa = Array.from(sel2.children).sort(function (a,b) {
72 return a.value-b.value;
73 });
74 //删除素有子元素
75 for(var i=0;i<sel2.children.length;i++){
76 sel2.removeChild(sel2.children[i]);
77 }
78 //把排好序的数组添加到sel2中
79 for(var i=0;i<aaa.length;i++){
80 sel2.appendChild(aaa[i]);
81 }
82 }
83 inpArr[3].onclick = function () {
84 var optArr = sel2.children;
85 for(var i=optArr.length-1;i>=0;i--){
86 if(optArr[i].selected==true){
87 optArr[i].selected=false;
88 sel1.appendChild(optArr[i]);
89 }
90 }
91 var aaa = Array.from(sel1.children).sort(function (a,b) {
92 return a.value-b.value;
93 });
94 for(var i=0;i<sel1.children.length;i++){
95 sel1.removeChild(sel1.children[i]);
96 }
97 for(var i=0;i<aaa.length;i++){
98 sel1.appendChild(aaa[i]);
99 }
100 }
101 </script>
102
103 </body>
104 </html>
选中的value跑到另外一个表格中（终极版）
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 * {
8 word-wrap: break-word;
9 }
10 .wp {
11 width: 730px;
12 margin: 0px auto;
13 }
14 .mtn {
15 margin-top: 5px!important;
16 }
17 #ct .frame {
18 margin: 0;
19 border: none;
20 }
21
22 .xfs_2 .frame-title, .xfs_2 .frametitle, .xfs_2 .tab-title {
23 background-color: #A90000;
24 background-position: 0 -99px;
25 }
26 .xfs .frame-title, .xfs .frametitle, .xfs .tab-title, .xfs .frame-title a, .xfs .frametitle a, .xfs .tab-title a {
27 color: #FFF!important;
28 }
29
30 .xfs .frame-title, .xfs .frametitle, .xfs .tab-title {
31 border: none;
32 background: transparent url(images/mu.png) repeat-x 0 95;
33 }
34
35 .title {
36 padding: 0 10px;
37 height: 32px;
38 font-size: 14px;
39 font-weight: 700;
40 line-height: 32px;
41 overflow: hidden;
42 }
43 .block {
44 margin: 10px 10px 0;
45 }
46 ul, menu, dir {
47 display: block;
48 list-style: none;
49 -webkit-margin-before: 1em;
50 -webkit-margin-after: 1em;
51 -webkit-margin-start: 0px;
52 -webkit-margin-end: 0px;
53 -webkit-padding-start: 25px;
54 }
55 .mls li {
56 padding: 0 0 5px;
57 width: 66px;
58 height: 85px;
59 }
60 .ml li {
61 float: left;
62 text-align: center;
63 overflow: hidden;
64 }
65 a {
66 color: #333;
67 text-decoration: none;
68 font: 12px/1.5 Tahoma,‘Microsoft Yahei‘,‘Simsun‘;
69 }
70 .mls p {
71 margin-top: 5px;
72 }
73 .ml p, .ml span {
74 display: block;
75 width: 100%;
76 height: 20px;
77 white-space: nowrap;
78 text-overflow: ellipsis;
79 overflow: hidden;
80 }
81 .mls img {
82 width: 48px;
83 height: 48px;
84 }
85 .ml img {
86 display: block;
87 margin: 0 auto;
88 }
89 a img {
90 border: none;
91 }
92 </style>
93 </head>
94 <body>
95
96 <div class="wp mtn">
97 <div id="diy3" class="area"><div id="frameipq7f2" class="xfs xfs_2 frame move-span cl frame-1"><div
98 class="title frame-title"><span class="titletext">当前在线用户</span></div><div id="frameipq7f2_left"
99 class="column frame-1-c"><div
100 id="frameipq7f2_left_temp" class="move-span temp"></div><div id="portal_block_695"
101 class="block move-span"><div
102 id="portal_block_695_content" class="dxb_bc">
103 <div class="module cl ml mls" id="users">
104 <ul>
105 <!--<li>-->
106 <!--<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="沉眠楚人"></a>-->
107 <!--<p><a href="#" title="沉眠楚人" target="_blank">沉眠楚人</a></p>-->
108 <!--</li>-->
109
110 </ul>
111 </div>
112 </div></div></div></div></div>
113 </div>
114
115 <script>
116 //模拟从服务器获取数据
117 var users = [
118 {"name": "tdxy01","icon":"images/noavatar_small.gif"},
119 {"name": "沉眠楚人","icon":"images/noavatar_small.gif"},
120 {"name": "爱上karina","icon":"images/75_avatar_small.jpg"},
121 {"name": "tdxy01","icon":"images/89_avatar_small.jpg"},
122 {"name": "today","icon":"images/noavatar_small.gif"},
123 {"name": "hlg","icon":"images/noavatar_small.gif"},
124 {"name": "itcast","icon":"images/noavatar_small.gif"},
125 {"name": "heima","icon":"images/noavatar_small.gif"},
126 {"name": "nima","icon":"images/noavatar_small.gif"},
127 {"name": "gege","icon":"images/noavatar_small.gif"},
128 {"name": "nimei","icon":"images/noavatar_small.gif"},
129 {"name": "goodman","icon":"images/noavatar_small.gif"},
130 {"name": "haoren","icon":"images/noavatar_small.gif"},
131 {"name": "yuanxiaojie","icon":"images/noavatar_small.gif"},
132 {"name": "zhengyue","icon":"images/noavatar_small.gif"},
133 {"name": "qishi","icon":"images/noavatar_small.gif"},
134 {"name": "qqtang","icon":"images/noavatar_small.gif"},
135 {"name": "wawawa","icon":"images/noavatar_small.gif"},
136 {"name": "haha","icon":"images/noavatar_small.gif"},
137 {"name": "robot","icon":"images/noavatar_small.gif"},
138 {"name": "XFlute","icon":"images/noavatar_small.gif"},
139 {"name": "lovmilan","icon":"images/noavatar_small.gif"},
140 {"name": "johnny670","icon":"images/noavatar_small.gif"},
141 {"name": "xiaobinbin02","icon":"images/noavatar_small.gif"},
142 {"name": "axxxxx","icon":"images/noavatar_small.gif"}
143 ];
144
145
146 //需求：页面显示所有的在线用户。
147 //思路：模拟服务器获取数据（数组中装着json）.获取ul，把ul的innerHTML属性获取到，然后不间断的往innerHTML属性中赋值。
148 //赋值要求：li标签的内容。
149 //步骤：(获取元素)
150 var div = document.getElementById("users");
151 var ul = div.firstElementChild || div.firstChild;
152 // var ul = div.children[0];
153
154 //1.模拟服务器获取数据（定义数组），通过循环添加元素（定义for）
155 //数组中有多少元素，我们就创建多少个li标签
156 for(var i=0;i<users.length;i++){
157 //2.模拟实验的操作方式。
158 ul.innerHTML += ‘<li>‘+
159 ‘<a href="#" target="blank"><img src="‘+users[i].icon+‘" width="48" height="48" alt="‘+users[i].name+‘"></a>‘+
160 ‘<p><a href="#" title="‘+users[i].name+‘" target="_blank">‘+users[i].name+‘</a></p>‘+
161 ‘</li>‘;
162 }
163
164
165 // var str = "b";
166 // var str2 = "a"+str+"c";
167 //实验；
168 //获取ul
169 // var div = document.getElementById("users");
170 // var ul = div.firstElementChild || div.firstChild;
171 // var ul = div.children[0];
172
173 //往ul中添加li元素以及li元素中的内容
174 // ul.innerHTML += ‘<li>‘+
175 // ‘<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="沉眠楚人"></a>‘+
176 // ‘<p><a href="#" title="沉眠楚人" target="_blank">沉眠楚人</a></p>‘+
177 // ‘</li>‘;
178 // ul.innerHTML += ‘<li>‘+
179 // ‘<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="沉眠楚人"></a>‘+
180 // ‘<p><a href="#" title="沉眠楚人" target="_blank">沉眠楚人</a></p>‘+
181 // ‘</li>‘;
182 // ul.innerHTML += ‘<li>‘+
183 // ‘<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="沉眠楚人"></a>‘+
184 // ‘<p><a href="#" title="沉眠楚人" target="_blank">沉眠楚人</a></p>‘+
185 // ‘</li>‘;
186 // str = ‘a‘+
187 // ‘b‘+
188 // ‘c‘+
189 // ‘d‘;
190
191 </script>
192 </body>
193 </html>
在线用户
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
margin: 0 auto;
padding: 0px;
font-size: 12px;
background: url(images/bg.gif) repeat center 36px;
text-align: center;
background-color: #c30230;
}
#content {
margin: 0 auto;
width: 960px;
background: url(images/content_bg.jpg) no-repeat left top;
height: 627px;
position: relative;
}
#content .tip1, #content .tip2, #content .tip3, #content .tip4, #content .tip5, #content .tip6, #content .tip7, #content .tip8 {
position: absolute;
width: 227px;
left: 200px;
top: 100px;
}
#content .tip1 .tip_h {
background: url(images/tip1_h.gif) no-repeat left top;
}
#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 {
width: 227px;
padding-top: 45px;
height: 23px;
text-align: left;
cursor: move;
}
#content .tip1 .tip_c {
background: url(images/tip1_c.gif) repeat-y;
}
#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 {
width: 200px;
padding-left: 12px;
padding-right: 15px;
min-height: 40px;
text-align: left;
line-height: 20px;
max-height: 160px;
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
}
#content .tip1 .tip_f {
background: url(images/tip1_f.gif) no-repeat left top;
}
#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 {
width: 227px;
height: 53px;
padding-top: 20px;
}
#content .close, #content .close2 {
float: left;
font-size: 12px;
cursor: pointer;
color: #000000;
}
.clr {
clear: both;
overflow: auto;
display: block;
height: 0px;
}
#content .icon {
float: left;
width: 35px;
padding-left: 15px;
height: 35px;
text-align: center;
}
#content .name {
float: right;
padding-right: 15px;
text-align: right;
font-size: 14px;
line-height: 35px;
color: #C0F;
}
#content .num {
float: left;
padding-left: 7px;
width: 195px;
}
</style>
</head>
<body>
<!--纸条墙-->
<div id="content">
<!--纸条-->
<!--<div class="tip1" id="tip" >-->
<!--<div class="tip_h" title="双击关闭纸条">-->
<!--<div class="num">第[49568]条 2016-07-7 22:51:52</div>-->
<!--<div class="close" title="关闭纸条" >×</div>-->
<!--<div class="clr"></div>-->
<!--</div>-->
<!--<div class="tip_c">-->
<!--普天同庆，天下大同！-->
<!--</div>-->
<!--<div class="tip_f">-->
<!--<div class="icon">-->
<!--<img src="images/bpic_1.gif" title="">-->
<!--</div>-->
<!--<div class="name">不愿意透露姓名的吕先生</div>-->
<!--<div class="clr"></div>-->
<!--</div>-->
<!--</div>-->
</div>
<script>
//模拟数据库，获取信息
var messages = [
{"id":1,"name":"mahu","content":"今天你拿苹果支付了么","time":"2016-02-17 00:00:00"},
{"id":2,"name":"haha","content":"今天天气不错，风和日丽的","time":"2016-02-18 12:40:00"},
{"id":3,"name":"jjjj","content":"常要说的事儿是乐生于苦","time":"2016-03-18 12:40:00"},
{"id":4,"name":"9.8的妹纸","content":"把朋友家厕所拉堵了 不敢出去 掏了半小时了都","time":"2016-03-18 12:40:00"},
{"id":5,"name":"雷锋ii.","content":"元宵节快乐","time":"2016-02-22 12:40:00"},
{"id":6,"name":"哎呦哥哥.","content":"据说今晚央视的元宵晚会导演和春晚导演是同一个人，真是躲得过初一，躲不过十五。","time":"2016-02-22 01:30:00"},
{"id":7,"name":"没猴哥，不春晚","content":"班主任:“小明，你都十二岁了，还是三年级，不觉得羞愧吗”？。小明:“一点也不觉得，老师你都四十多岁了，不也是年年在三年级混日子吗？羞愧的应该是你”。老师:……","time":"2016-02-22 01:30:00"},
{"id":8,"name":"哎呦杰杰.","content":"真搞不懂你们地球人，月亮有什么好看的，全是坑，还是对面那哥们好看，","time":"2016-02-22 01:30:00"},
{"id":9,"name":"哎呦哎呦","content":"今天哪里的烟花最好看！！？答：朋友圈。。。","time":"2016-02-22 02:30:00"}
];
//需求1：模拟数据库获取信息，然后在页面上生成数组的长度个tip,然后分别问起内容进行修改。
//需求2：点击内容，提高层级；点击关闭按钮，删除tip标签；双击顶部，删除标签.....
//需求1：模拟数据库获取信息，然后在页面上生成数组的长度个tip,然后分别问起内容进行修改。
//步骤：
//获取相关元素
var content = document.getElementById("content");
//循环生成div标签，然后为innerHTML属性添加内容
for(var i=0;i<messages.length;i++){
//生成新标签
var newDiv = document.createElement("div");
//绑定类名和ID
newDiv.className = "tip1";
newDiv.id = "tip"+messages[i].id;
//改变位置
var topValue = parseInt(Math.random()*400);
var leftValue = parseInt(Math.random()*700);
newDiv.style.top = topValue+"px";
newDiv.style.left = leftValue+"px";
//赋值内容
newDiv.innerHTML = ‘<div class="tip_h" title="双击关闭纸条">‘+
‘<div class="num">第[49568]条 ‘+messages[i].time+‘</div>‘+
‘<div class="close" title="关闭纸条" >×</div>‘+
‘<div class="clr"></div>‘+
‘</div>‘+
‘<div class="tip_c">‘+
messages[i].content+
‘</div>‘+
‘<div class="tip_f">‘+
‘<div class="icon">‘+
‘<img src="images/bpic_1.gif" title="">‘+
‘</div>‘+
‘<div class="name">‘+messages[i].name+‘</div>‘+
‘<div class="clr"></div>‘+
‘</div>‘;
//把新创建的元素放入content里面
content.appendChild(newDiv);
//绑定事件，提高层级
newDiv.onclick = fn;
//点击关闭按钮的时候关闭父盒子。
var closeDiv = newDiv.getElementsByClassName("close")[0];
closeDiv.onclick = function () {
//不能用newDiv，因为在页面加载的时候newDiv，已经变成最后一个了，当你点击的时候，用远关闭的是最后的那个div。
// content.removeChild(newDiv);
content.removeChild(this.parentNode.parentNode);
}
//双击关闭按钮类名叫做tip_h
var dbDiv = newDiv.getElementsByClassName("tip_h")[0];
dbDiv.ondblclick = function () {
//不能用newDiv，因为在页面加载的时候newDiv，已经变成最后一个了，当你点击的时候，用远关闭的是最后的那个div。
// content.removeChild(newDiv);
content.removeChild(this.parentNode);
}
}
var index = 1;
function fn(){
this.style.zIndex = index;
index++;
}
</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 .box {
12 width: 500px;
13 margin: 200px auto;
14 }
15 ul {
16 width: 392px;
17 padding: 5px;
18 list-style: none;
19 border: 1px solid red;
20 }
21 li:hover {
22 background-color: red;
23 }
24 input {
25 width: 400px;
26 }
27 button {
28 width: 70px;
29 }
30 </style>
31 </head>
32 <body>
33 <div class="box">
34 <input type="text"/>
35 <button>索搜</button>
36 <!--<ul>-->
37 <!--<li>aaaa</li>-->
38 <!--<li>bbb</li>-->
39 <!--<li>ccc</li>-->
40 <!--</ul>-->
41 </div>
42
43 <script>
44 //需求：输入内容(输入事件，键盘弹起事件)，模拟服务器获取内容，创建ul，并在其中显示。
45 //步骤：
46 //1.获取事件源
47 //2.绑定事件
48 //3.书写事件驱动程序
49
50
51
52 //1.获取事件源
53 //模拟服务器获取内容
54 var arr = ["a","ab","abc","abcd","aa","aaa"];
55 var box = document.getElementsByTagName("div")[0];
56 var inp = box.children[0];
57 // var inp = document.getElementsByTagName("input")[0];
58
59 //2.绑定事件(输入内容(输入事件，键盘弹起事件))
60 inp.onkeyup = function () {
61 //创建一个字符串，里面添加满了li和对应的内容。
62 var newArr = [];
63 //我要从数组中查询以input中输入内容为开头的信息，然后添加到li中，转换成字符串。
64 //遍历老数组，然后判断每一项，哪项是以input内容为开头的穿件一个li，塞进去。
65 for(var i=0;i<arr.length;i++){
66 //判断当前项，是否已input内容为开头
67 //获取输入内容input标签的value属性值。
68 var val = this.value;
69 if(arr[i].indexOf(val)===0){
70 newArr.push("<li>"+arr[i]+"</li>");
71 }
72 }
73 var str = newArr.join("");
74
75 //Bug1.每次创建新的ul之前，先删除旧的ul
76 //只有ul存在我们才能删除ul
77 // var aaa = box.getElementsByTagName("ul")[0];
78 if(box.children[2]){
79 //只要存在，那么就是object，object类型的数据，只要不是null,对应的boolean值都是true；
80 box.removeChild(box.children[2]);
81 }
82
83 //Bug2.如果input中内容为空，那么久不能在生成ul了。
84 //如果input为空，那么切断函数
85
86 //Bug3.如果arr数组中没有以input为开头的元素。那么切断函数
87 //newArr的长度为0，就能证明以input内容为开头的元素，在arr中不存在
88 if(this.value.length === 0 || newArr.length === 0){
89 //切断函数(不在产生新的ul)
90 return;
91 }
92
93 //3.书写事件驱动程序
94 var ul = document.createElement("ul");
95 //把创建好的内容添加到ul中。
96 ul.innerHTML = str;
97 box.appendChild(ul);
98 }
99
100
101
102
103
104 </script>
105
106
107 </body>
108 </html>
模拟搜索功能
表格操作
// rows:返回值是数组 (只读，table和textarea能用)
var tab = document.getElementsByTagName("table")[0];
// insertRow() (只有table能调用)
// var tr = document.createElement("tr");
var aaa = tab.insertRow(2);//指定索引值之前插入
// deleteRow() (只有table能调用)
tab.deleteRow(2);
// console.log(aaa == tr);
console.log(aaa);
console.log(tab.rows);
// cells (只读，tr和textarea能用)
var ce = tab.children[0];
console.log(ce.children[0].cells);
// insertCell() (只有tr能调用)
ce.children[0].insertCell(0);
// deleteCell() (只有tr能调用)
ce.children[0].deleteCell(0);
BOM的内置方法内置对象
name：新窗口的名称，可以为空
featurse：属性控制字符串，在此控制窗口的各种属性，属性之间以逗号隔开。
fullscreen= { yes/no/1/0 } 是否全屏，默认no
channelmode= { yes/no/1/0 } 是否显示频道栏，默认no
toolbar= { yes/no/1/0 } 是否显示工具条，默认no
location= { yes/no/1/0 } 是否显示地址栏，默认no
directories = { yes/no/1/0 } 是否显示转向按钮，默认no
status= { yes/no/1/0 } 是否显示窗口状态条，默认no
menubar= { yes/no/1/0 } 是否显示菜单，默认no
scrollbars= { yes/no/1/0 } 是否显示滚动条，默认yes
resizable= { yes/no/1/0 } 是否窗口可调整大小，默认no
width=number 窗口宽度（像素单位）
height=number 窗口高度（像素单位）
top=number 窗口离屏幕顶部距离（像素单位）
left=number 窗口离屏幕左边距离（像素单位）
时间： 2024-08-02 11:03:35