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 = “跳转到的新网址”
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";
}
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
select {
width: 170px;
height: 200px;
font-size: 16px;
background-color: #a4ff43;
}
</style>
</head>
<body>
<select name="" id="sel1" size="10" multiple>
<option value="0">香蕉</option>
<option value="1">苹果</option>
<option value="2">鸭梨</option>
<option value="3">葡萄</option>
</select>
<input type="button" value=">>>"/>
<input type="button" value="<<<"/>
<input type="button" value=">"/>
<input type="button" value="<"/>
<select name="" id="sel2" size="10" multiple> </select> <script>
//需求1：点击>>>和<<<两个按钮，所有的子元素都跑到对方的标签中。
//步骤：
//1.获取相关元素，并绑定事件
//2.获取子元素，整体的添加到另外一边的标签中 //1.获取相关元素，并绑定事件
var sel1 = document.getElementById("sel1");
var sel2 = document.getElementById("sel2");
var inpArr = document.getElementsByTagName("input"); inpArr[0].onclick = function () {
//2.获取子元素，整体的添加到另外一边的标签中
var arr = sel1.children;
//循环遍历放入另一侧的select标签中
for(var i=arr.length-1;i>=0;i--){
//放入sel2中，不能用push，要用appendChild;
sel2.appendChild(arr[0]);
}
}
//同理
inpArr[1].onclick = function () {
//2.获取子元素，整体的添加到另外一边的标签中
var arr = sel2.children;
//循环遍历放入另一侧的select标签中
for(var i=arr.length-1;i>=0;i--){
//放入sel2中，不能用push，要用appendChild;
sel1.appendChild(arr[0]);
}
} //需求2：点击>和<两个按钮，所有被选定的子元素都跑到对方的标签中。
//思路：获取所有子节点，然后循环判断，只有selected属性值为true的选项才能被添加到右侧的select标签中
inpArr[2].onclick = function () {
//获取所有子节点
var arr = sel1.children;
//遍历判断数组中的元素selected属性为true的，添加到相反的select标签中
for(var i=arr.length-1;i>=0;i--){
if(arr[i].selected === true){
// arr[i].selected = false;
sel2.appendChild(arr[i]);
}
}
}
//同理
inpArr[3].onclick = function () {
//获取所有子节点
var arr = sel2.children;
//遍历判断数组中的元素selected属性为true的，添加到相反的select标签中
for(var i=arr.length-1;i>=0;i--){
if(arr[i].selected === true){
// arr[i].selected = false;
sel1.appendChild(arr[i]);
}
}
} </script> </body>
</html>
选中的value跑到另外一个表格中（简单版）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
select {
width: 170px;
height: 200px;
font-size: 16px;
background-color: #a4ff43;
}
</style>
</head>
<body>
<select name="" id="sel1" size="10" multiple>
<option value="0">香蕉</option>
<option value="1">苹果</option>
<option value="2">鸭梨</option>
<option value="3">葡萄</option>
</select>
<input type="button" value=">>>"/>
<input type="button" value="<<<"/>
<input type="button" value=">"/>
<input type="button" value="<"/>
<select name="" id="sel2" size="10" multiple> </select> <script>
//需求1：点击>>>和<<<两个按钮，所有的子元素都跑到对方的标签中。 var sel1 = document.getElementById("sel1");
var sel2 = document.getElementById("sel2");
var inpArr = document.getElementsByTagName("input"); //如果不带参数，我们可以直接绑定一个函数名。但是因为带有参数，所以我们需要匿名函数去调用这个函数。
inpArr[0].onclick = function () {
fn1(sel1,sel2);
}
inpArr[1].onclick = function () {
fn1(sel2,sel1);
}
inpArr[2].onclick = function () {
fn2(sel1,sel2);
}
inpArr[3].onclick = function () {
fn2(sel2,sel1);
}
//封装的时候要注意，第一个按钮先获取的是sel1，第二个按钮先获取的是sel2;
function fn1(ele1,ele2) {
var arr = ele1.children;
for(var i=arr.length-1;i>=0;i--){
ele2.appendChild(arr[0]);
}
}
//把sel1和sel2设置成两个形参，通过调用的时候先后传递达成不一样的需求
function fn2(ele1,ele2) {
var arr = ele1.children;
for(var i=arr.length-1;i>=0;i--){
if(arr[i].selected === true){
arr[i].selected = false;
ele2.appendChild(arr[i]);
}
}
} </script> </body>
</html>
选中的value跑到另外一个表格中（封装版）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
select {
width: 150px;
height: 200px;
background-color: #7bff68;
}
</style>
</head>
<body>
<select size="10" name="aaa" id="sel1" multiple="multiple">
<option value="0">1香蕉</option>
<option value="1">2苹果</option>
<option value="2">3大鸭梨</option>
<option value="3">4草莓</option>
</select> <input type="button" value=">>>"/>
<input type="button" value="<<<"/>
<input type="button" value=">"/>
<input type="button" value="<"/> <select size="10" name="bbb" id="sel2" multiple="multiple"> </select> <script>
//需求：点击按钮把对应的选中项移动到另一侧。
//技术点：如果移动单一的选项，那么看看哪个选项是有selected的。
//如果移动所有的选项，那么直接把sel1中的所有选项放入sel2中。 //步骤：
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动程序 //步骤：
//1.获取事件源和相关元素
var sel1 = document.getElementById("sel1");
var sel2 = document.getElementById("sel2");
var inpArr = document.getElementsByTagName("input"); //2.绑定事件(push和appendChild用法相似：但是一个是控制数组，一个是控制元素节点)
inpArr[0].onclick = function () {
var optArr = sel1.children;
for(var i=0;i<optArr.length;){
sel2.appendChild(optArr[i]);
}
} //为第二个按钮绑定事件
inpArr[1].onclick = function () {
var optArr = sel2.children;
for(var i=0;i<optArr.length;){
sel1.appendChild(optArr[i]);
}
}
inpArr[2].onclick = function () {
var optArr = sel1.children;
for(var i=optArr.length-1;i>=0;i--){
if(optArr[i].selected==true){
optArr[i].selected=false;
sel2.appendChild(optArr[i]);
}
}
//获取sel2中的子元素变成真数组，然后排序
var aaa = Array.from(sel2.children).sort(function (a,b) {
return a.value-b.value;
});
//删除素有子元素
for(var i=0;i<sel2.children.length;i++){
sel2.removeChild(sel2.children[i]);
}
//把排好序的数组添加到sel2中
for(var i=0;i<aaa.length;i++){
sel2.appendChild(aaa[i]);
}
}
inpArr[3].onclick = function () {
var optArr = sel2.children;
for(var i=optArr.length-1;i>=0;i--){
if(optArr[i].selected==true){
optArr[i].selected=false;
sel1.appendChild(optArr[i]);
}
}
var aaa = Array.from(sel1.children).sort(function (a,b) {
return a.value-b.value;
});
for(var i=0;i<sel1.children.length;i++){
sel1.removeChild(sel1.children[i]);
}
for(var i=0;i<aaa.length;i++){
sel1.appendChild(aaa[i]);
}
}
</script> </body>
</html>
选中的value跑到另外一个表格中（终极版）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
word-wrap: break-word;
}
.wp {
width: 730px;
margin: 0px auto;
}
.mtn {
margin-top: 5px!important;
}
#ct .frame {
margin: 0;
border: none;
} .xfs_2 .frame-title, .xfs_2 .frametitle, .xfs_2 .tab-title {
background-color: #A90000;
background-position: 0 -99px;
}
.xfs .frame-title, .xfs .frametitle, .xfs .tab-title, .xfs .frame-title a, .xfs .frametitle a, .xfs .tab-title a {
color: #FFF!important;
} .xfs .frame-title, .xfs .frametitle, .xfs .tab-title {
border: none;
background: transparent url(images/mu.png) repeat-x 0 95;
} .title {
padding: 0 10px;
height: 32px;
font-size: 14px;
font-weight: 700;
line-height: 32px;
overflow: hidden;
}
.block {
margin: 10px 10px 0;
}
ul, menu, dir {
display: block;
list-style: none;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 25px;
}
.mls li {
padding: 0 0 5px;
width: 66px;
height: 85px;
}
.ml li {
float: left;
text-align: center;
overflow: hidden;
}
a {
color: #333;
text-decoration: none;
font: 12px/1.5 Tahoma,'Microsoft Yahei','Simsun';
}
.mls p {
margin-top: 5px;
}
.ml p, .ml span {
display: block;
width: 100%;
height: 20px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.mls img {
width: 48px;
height: 48px;
}
.ml img {
display: block;
margin: 0 auto;
}
a img {
border: none;
}
</style>
</head>
<body> <div class="wp mtn">
<div id="diy3" class="area"><div id="frameipq7f2" class="xfs xfs_2 frame move-span cl frame-1"><div
class="title frame-title"><span class="titletext">当前在线用户</span></div><div id="frameipq7f2_left"
class="column frame-1-c"><div
id="frameipq7f2_left_temp" class="move-span temp"></div><div id="portal_block_695"
class="block move-span"><div
id="portal_block_695_content" class="dxb_bc">
<div class="module cl ml mls" id="users">
<ul>
<!--<li>-->
<!--<a href="#" target="_blank"><img src="data:images/noavatar_small.gif" width="48" height="48" alt="沉眠楚人"></a>-->
<!--<p><a href="#" title="沉眠楚人" target="_blank">沉眠楚人</a></p>-->
<!--</li>--> </ul>
</div>
</div></div></div></div></div>
</div> <script>
//模拟从服务器获取数据
var users = [
{"name": "tdxy01","icon":"images/noavatar_small.gif"},
{"name": "沉眠楚人","icon":"images/noavatar_small.gif"},
{"name": "爱上karina","icon":"images/75_avatar_small.jpg"},
{"name": "tdxy01","icon":"images/89_avatar_small.jpg"},
{"name": "today","icon":"images/noavatar_small.gif"},
{"name": "hlg","icon":"images/noavatar_small.gif"},
{"name": "itcast","icon":"images/noavatar_small.gif"},
{"name": "heima","icon":"images/noavatar_small.gif"},
{"name": "nima","icon":"images/noavatar_small.gif"},
{"name": "gege","icon":"images/noavatar_small.gif"},
{"name": "nimei","icon":"images/noavatar_small.gif"},
{"name": "goodman","icon":"images/noavatar_small.gif"},
{"name": "haoren","icon":"images/noavatar_small.gif"},
{"name": "yuanxiaojie","icon":"images/noavatar_small.gif"},
{"name": "zhengyue","icon":"images/noavatar_small.gif"},
{"name": "qishi","icon":"images/noavatar_small.gif"},
{"name": "qqtang","icon":"images/noavatar_small.gif"},
{"name": "wawawa","icon":"images/noavatar_small.gif"},
{"name": "haha","icon":"images/noavatar_small.gif"},
{"name": "robot","icon":"images/noavatar_small.gif"},
{"name": "XFlute","icon":"images/noavatar_small.gif"},
{"name": "lovmilan","icon":"images/noavatar_small.gif"},
{"name": "johnny670","icon":"images/noavatar_small.gif"},
{"name": "xiaobinbin02","icon":"images/noavatar_small.gif"},
{"name": "axxxxx","icon":"images/noavatar_small.gif"}
]; //需求：页面显示所有的在线用户。
//思路：模拟服务器获取数据（数组中装着json）.获取ul，把ul的innerHTML属性获取到，然后不间断的往innerHTML属性中赋值。
//赋值要求：li标签的内容。
//步骤：(获取元素)
var div = document.getElementById("users");
var ul = div.firstElementChild || div.firstChild;
// var ul = div.children[0]; //1.模拟服务器获取数据（定义数组），通过循环添加元素（定义for）
//数组中有多少元素，我们就创建多少个li标签
for(var i=0;i<users.length;i++){
//2.模拟实验的操作方式。
ul.innerHTML += '<li>'+
'<a href="#" target="blank"><img src="'+users[i].icon+'" width="48" height="48" alt="'+users[i].name+'"></a>'+
'<p><a href="#" title="'+users[i].name+'" target="_blank">'+users[i].name+'</a></p>'+
'</li>';
} // var str = "b";
// var str2 = "a"+str+"c";
//实验；
//获取ul
// var div = document.getElementById("users");
// var ul = div.firstElementChild || div.firstChild;
// var ul = div.children[0]; //往ul中添加li元素以及li元素中的内容
// ul.innerHTML += '<li>'+
// '<a href="#" target="_blank"><img src="data:images/noavatar_small.gif" width="48" height="48" alt="沉眠楚人"></a>'+
// '<p><a href="#" title="沉眠楚人" target="_blank">沉眠楚人</a></p>'+
// '</li>';
// ul.innerHTML += '<li>'+
// '<a href="#" target="_blank"><img src="data:images/noavatar_small.gif" width="48" height="48" alt="沉眠楚人"></a>'+
// '<p><a href="#" title="沉眠楚人" target="_blank">沉眠楚人</a></p>'+
// '</li>';
// ul.innerHTML += '<li>'+
// '<a href="#" target="_blank"><img src="data:images/noavatar_small.gif" width="48" height="48" alt="沉眠楚人"></a>'+
// '<p><a href="#" title="沉眠楚人" target="_blank">沉眠楚人</a></p>'+
// '</li>';
// str = 'a'+
// 'b'+
// 'c'+
// 'd'; </script>
</body>
</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="data:images/bpic_1.gif" alt="" 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="data:images/bpic_1.gif" alt="" 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>
祝愿墙
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 500px;
margin: 200px auto;
}
ul {
width: 392px;
padding: 5px;
list-style: none;
border: 1px solid red;
}
li:hover {
background-color: red;
}
input {
width: 400px;
}
button {
width: 70px;
}
</style>
</head>
<body>
<div class="box">
<input type="text"/>
<button>索搜</button>
<!--<ul>-->
<!--<li>aaaa</li>-->
<!--<li>bbb</li>-->
<!--<li>ccc</li>-->
<!--</ul>-->
</div> <script>
//需求：输入内容(输入事件，键盘弹起事件)，模拟服务器获取内容，创建ul，并在其中显示。
//步骤：
//1.获取事件源
//2.绑定事件
//3.书写事件驱动程序 //1.获取事件源
//模拟服务器获取内容
var arr = ["a","ab","abc","abcd","aa","aaa"];
var box = document.getElementsByTagName("div")[0];
var inp = box.children[0];
// var inp = document.getElementsByTagName("input")[0]; //2.绑定事件(输入内容(输入事件，键盘弹起事件))
inp.onkeyup = function () {
//创建一个字符串，里面添加满了li和对应的内容。
var newArr = [];
//我要从数组中查询以input中输入内容为开头的信息，然后添加到li中，转换成字符串。
//遍历老数组，然后判断每一项，哪项是以input内容为开头的穿件一个li，塞进去。
for(var i=0;i<arr.length;i++){
//判断当前项，是否已input内容为开头
//获取输入内容input标签的value属性值。
var val = this.value;
if(arr[i].indexOf(val)===0){
newArr.push("<li>"+arr[i]+"</li>");
}
}
var str = newArr.join(""); //Bug1.每次创建新的ul之前，先删除旧的ul
//只有ul存在我们才能删除ul
// var aaa = box.getElementsByTagName("ul")[0];
if(box.children[2]){
//只要存在，那么就是object，object类型的数据，只要不是null,对应的boolean值都是true；
box.removeChild(box.children[2]);
} //Bug2.如果input中内容为空，那么久不能在生成ul了。
//如果input为空，那么切断函数 //Bug3.如果arr数组中没有以input为开头的元素。那么切断函数
//newArr的长度为0，就能证明以input内容为开头的元素，在arr中不存在
if(this.value.length === 0 || newArr.length === 0){
//切断函数(不在产生新的ul)
return;
} //3.书写事件驱动程序
var ul = document.createElement("ul");
//把创建好的内容添加到ul中。
ul.innerHTML = str;
box.appendChild(ul);
} </script> </body>
</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的内置方法内置对象的更多相关文章
- 第一百一十一节，JavaScript，BOM浏览器对象模型
JavaScript,BOM浏览器对象模型 学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM ...
- BOM—浏览器对象模型（Browser Object Model）
1,javascript 组成部分: 1.ECMAscript(核心标准): 定义了基本的语法,比如:if for 数组 字符串 ... 2.BOM : 浏览器对象模型(Browser ...
- JavaScript——BOM(浏览器对象模型)，时间间隔和暂停
BOM(浏览器对象模型):能够对浏览器的窗体进行訪问和操作 1.主要的BOM体系: window------------document-------------------------------- ...
- JS第三部分--BOM浏览器对象模型
一.client系列:宽高边框 二.offset系列:偏移 三.scroll系列 四.BOM的介绍 4.1.打开新窗口 4.2.location对象(本地信息对象) 4.3.history对象 4.4 ...
- JavaScirpt(JS)——BOM浏览器对象模型
一.BOM概念 BOM(Browser Object Model)即浏览器对象模型.可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执行其他与页面内容不直接相关 ...
- js BOM浏览器对象模型
BOM即Browser Object Model,浏览器对象模型,表示浏览器窗口,所有js全局对象.函数以及变量均是window 对象的成员. 对于不同的浏览器,表示宽度和高度的方法不同: 对于IE9 ...
- BOM浏览器对象模型
访问和操作浏览器窗口的模型称为浏览器对象模型BOM(Browser Object Model). BOM整体对象图. 核心是window对象: 以下有特殊双重身份: window对象既是ECMAScr ...
- JavaScript（二、BOM 浏览器对象模型）
一.BOM是什么 BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心 ...
- BOM——浏览器对象模型(Browser Object Model)
什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对 ...
随机推荐
- awk文本处理
一.前言 (一).awk简介 awk是一种编程语言,用于在linux/unix下对文本和数据进行处理,数据可以来自标准输入.一个或多个文件,或其它命令的输出,它支持用户自定义函数和动态正则表达式等先进 ...
- .NETCoreCSharp 中级篇2-3 Linq简介
.NETCoreCSharp 中级篇2-3 本节内容为Linq及其拓展方法.Linq中表达式树的使用 简介 语言集成查询(LINQ)是一系列直接将查询功能集成到C#语言的技术统称.数据查询历来都表示为 ...
- tensorflow学习笔记——使用TensorFlow操作MNIST数据（2）
tensorflow学习笔记——使用TensorFlow操作MNIST数据(1) 一:神经网络知识点整理 1.1,多层:使用多层权重,例如多层全连接方式 以下定义了三个隐藏层的全连接方式的神经网络样例 ...
- MySQL InnoDB Cluster介绍
目录 一.MySQL InnoDB Cluster介绍 二.环境准备 三.将MGR节点加入MySQL Cluster 四.问题汇总 五.性能测试 六.个人总结 一.MySQL InnoDB Clust ...
- Spring Boot Security Oauth2之客户端模式及密码模式实现
Spring Boot Security Oauth2之客户端模式及密码模式实现 示例主要内容 1.多认证模式(密码模式.客户端模式) 2.token存到redis支持 3.资源保护 4.密码模式用户 ...
- ABAP-根据采购订单行项目统计供应商未清额和已清额
1.传入和传出表结构都是一样的: FUNCTION zmm_fm_po_invence. *"------------------------------------------------ ...
- opencv3 编程入门学习笔记（一）： 基本函数介绍
滤波 blur (均值滤波) 均值滤波是典型的线性滤波算法, 主要方法为领域平均法(即用一片图像区域的各个像素的平均值来代替原图像中的各个像素值) 缺点: 不能很好的保护图像细节, 在图像去噪的同时也 ...
- Go输入输出格式化Printf
package main import ( "fmt" "os" ) type point struct { x, y int } func main() { ...
- Nacos（一）：Nacos介绍
前言 6月份阿里开源的Nacos出了1.0.1版本,从去年7月份第一个release版本到现在一直在默默关注 官方的版本规划为:Nacos从0.8.0开始支持生产可用,1.0版本可大规模生产可用,2. ...
- JMM内存模型详解(一)
本文开始死磕JMM(Java内存模型)由于知识点较多,分来写 该文为JMM第一篇 技术往往是枯燥的,本文文字较多 1. JMM是什么? 其实JMM很好理解,我简单的解释一下,在Java多线程中我们经常 ...