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主要用于管理窗口与窗口之间的通讯,因此其核心对 ...
随机推荐
- hive分桶表bucketed table分桶字段选择与个数确定
为什么分桶 (1)获得更高的查询处理效率.桶为表加上了额外的结构,Hive 在处理有些查询时能利用这个结构.具体而言,连接两个在(包含连接列的)相同列上划分了桶的表,可以使用 Map 端连接 (Map ...
- Tomcat源码分析 （一）----- 手写一个web服务器
作为后端开发人员,在实际的工作中我们会非常高频地使用到web服务器.而tomcat作为web服务器领域中举足轻重的一个web框架,又是不能不学习和了解的. tomcat其实是一个web框架,那么其内部 ...
- 【Java例题】4.4使用牛顿迭代法求方程的解
4. 使用牛顿迭代法求方程的解:x^3-2x-5=0区间为[2,3]这里的"^"表示乘方. package chapter4; public class demo4 { publi ...
- quick-cocos2dx在eclipse下的lua调试
文中大部分内容来自http://cn.quick-x.com/?p=253,绿色标记部分为修改部分. 配置编译环境的基本步骤: 安装 Visual Studio 2012 安装 Java SDK 安装 ...
- 转载 | embed用法（网站中视频、音频的添加）
网站中添加视频: <embed src="http://player.video.qiyi.com/390cf6c74450e4c70b7bd2d883169914/0/0/w_19r ...
- JavaWeb——Servlet开发2
1.HttpServletRequest的使用 获取Request的参数的方法. 方法getParameter将返回参数的单个值 方法getParameterValues将返回参数的值的数组 方法ge ...
- mysql的引擎问题,主键和外键的创建问题,以及创建外键不成功,却创建了一个索引
mysql的引擎问题: 需要知道的三个引擎:InnoDB--是一个事务处理引擎,不支持全文检索,支持事务操作,即DML操作: Memory--是一个数据存储在内存,速度很快,功能上等同于MyIsam, ...
- Spring Boot之Profile--快速搞定多环境使用与切换
Spring Profile是Spring3引入的概念,主要用在项目多环境运行的情况下,通过激活方式实现多环境切换,省去多环境切换时配置参数和文件的修改,并且Spring profile提供了多种激活 ...
- 天天都用消息队列，却不知道为啥要用MQ，这就有点尴尬了
1.为什么要使用消息队列? 分析:一个用消息队列的人,不知道为啥用,有点尴尬.没有复习这点,很容易被问蒙,然后就开始胡扯了. 回答:这个问题,咱只答三个最主要的应用场景(不可否认还有其他的,但是只答三 ...
- mybatis 源码分析（三）Executor 详解
本文将主要介绍 Executor 的整体结构和各子类的功能,并对比效率: 一.Executor 主体结构 1. 类结构 executor 的类结构如图所示: 其各自的功能: BaseExecutor: ...