首页 > 代码库 > js-DOM ～ 04. BOM：浏览器对象模型window. 、定时器、在线用户、祝愿墙、BOM的内置方法内置对象
js-DOM ～ 04. BOM：浏览器对象模型window. 、定时器、在线用户、祝愿墙、BOM的内置方法内置对象
- 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 = http://www.mamicode.com/“跳转到的新网址”
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="http://www.mamicode.com/0">香蕉</option> 18 <option value="http://www.mamicode.com/1">苹果</option> 19 <option value="http://www.mamicode.com/2">鸭梨</option> 20 <option value="http://www.mamicode.com/3">葡萄</option> 21 </select> 22 <input type="button" value="http://www.mamicode.com/>>>"/> 23 <input type="button" value="http://www.mamicode.com/<<<"/> 24 <input type="button" value="http://www.mamicode.com/>"/> 25 <input type="button" value="http://www.mamicode.com/<"/> 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>
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="http://www.mamicode.com/0">香蕉</option> 18 <option value="http://www.mamicode.com/1">苹果</option> 19 <option value="http://www.mamicode.com/2">鸭梨</option> 20 <option value="http://www.mamicode.com/3">葡萄</option> 21 </select> 22 <input type="button" value="http://www.mamicode.com/>>>"/> 23 <input type="button" value="http://www.mamicode.com/<<<"/> 24 <input type="button" value="http://www.mamicode.com/>"/> 25 <input type="button" value="http://www.mamicode.com/<"/> 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>
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="http://www.mamicode.com/0">1香蕉</option> 17 <option value="http://www.mamicode.com/1">2苹果</option> 18 <option value="http://www.mamicode.com/2">3大鸭梨</option> 19 <option value="http://www.mamicode.com/3">4草莓</option> 20 </select> 21 22 <input type="button" value="http://www.mamicode.com/>>>"/> 23 <input type="button" value="http://www.mamicode.com/<<<"/> 24 <input type="button" value="http://www.mamicode.com/>"/> 25 <input type="button" value="http://www.mamicode.com/<"/> 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>
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="http://www.mamicode.com/#" target="_blank"><img src="http://www.mamicode.com/images/noavatar_small.gif" width="48" height="48" alt="沉眠楚人"></a>--> 107 <!--<p><a href="http://www.mamicode.com/#" 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="http://www.mamicode.com/#" target="blank"><img src="http://www.mamicode.com/‘+users[i].icon+‘" width="48" height="48" alt="‘+users[i].name+‘"></a>‘+ 160 ‘<p><a href="http://www.mamicode.com/#" 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="http://www.mamicode.com/#" target="_blank"><img src="http://www.mamicode.com/images/noavatar_small.gif" width="48" height="48" alt="沉眠楚人"></a>‘+ 176 // ‘<p><a href="http://www.mamicode.com/#" title="沉眠楚人" target="_blank">沉眠楚人</a></p>‘+ 177 // ‘</li>‘; 178 // ul.innerHTML += ‘<li>‘+ 179 // ‘<a href="http://www.mamicode.com/#" target="_blank"><img src="http://www.mamicode.com/images/noavatar_small.gif" width="48" height="48" alt="沉眠楚人"></a>‘+ 180 // ‘<p><a href="http://www.mamicode.com/#" title="沉眠楚人" target="_blank">沉眠楚人</a></p>‘+ 181 // ‘</li>‘; 182 // ul.innerHTML += ‘<li>‘+ 183 // ‘<a href="http://www.mamicode.com/#" target="_blank"><img src="http://www.mamicode.com/images/noavatar_small.gif" width="48" height="48" alt="沉眠楚人"></a>‘+ 184 // ‘<p><a href="http://www.mamicode.com/#" 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="http://www.mamicode.com/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 = http://www.mamicode.com/parseInt(Math.random()*400);
var leftValue = http://www.mamicode.com/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="http://www.mamicode.com/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 窗口离屏幕左边距离（像素单位）
js-DOM ～ 04. BOM：浏览器对象模型window. 、定时器、在线用户、祝愿墙、BOM的内置方法内置对象
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。