6. BOM应用
- 打开和关闭标签页
<body>
<input onclick="window.close();" type="button" value="close"/>
<input onclick="window.open();" type="button" value="close"/>
</body>
- 询问框
<script>
var res=confirm('你是否要删除');
alert(res);
</script>
- 可视区尺寸:
document.documentElement.clientWidth;
document.documentElement.clientHeight;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
oBtn.onclick=function ()
{
alert('宽:'+document.documentElement.clientWidth+'高:'+document.documentElement.clientHeight);
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="可视区大小" />
</body>
</html>
-
滚动距离
IE、FF
alert(document.documentElement.scrollTop);chrome
alert(document.body.scrollTop);
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
console.log(scrollTop)
- 判断浏览器内核:
window.navigator.userAgent
- 右下角悬浮框
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:200px; height:150px; background:red; position:absolute; right:0; bottom:0;}
body {height:2000px;}
</style>
<script>
window.onscroll=window.onresize=function ()
{
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var oDiv=document.getElementById('div1');
oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
7. COOKIE基础与应用
- chrome浏览器为了安全不支持本地通过JavaScript来设置cookie
- 设置cookie
- 格式: 名字=值
- 不会覆盖
- 过期时间:expires=时间
- 如果没有指定过期时间,则浏览器关闭即cookie清除
- cookie的特性
- 同一个网站中所有页面共享一套cookie
- 数量、大小有限
- 过期时间
- 设置cookie过期时间
<script>
var oDate=new Date();
oDate.setDate(oDate.getDate()+14);
document.cookie='user=blue;expires='+oDate;
alert(document.cookie);
</script>
- 设置多少天之后是几日 :setDate(天数)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
var oDate=new Date();
oDate.setDate(32);
alert(oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate());
</script>
</head>
<body>
</body>
</html>
8. DOM操作应用
- 逆序插入元素
document.getElementById(“myList”).insertBefore(newItem,existingItem);
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
无标题文档
</title>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ul1');
var oTxt=document.getElementById('txt1');
oBtn.onclick=function ()
{
var oLi=document.createElement('li');
var aLi=oUl.getElementsByTagName('li');
oLi.innerHTML=oTxt.value;
//父级.appendChild(子节点);
//oUl.appendChild(oLi);
if(aLi.length>0)
{
oUl.insertBefore(oLi, aLi[0]);
}
else
{
oUl.appendChild(oLi);
}
};
};
</script>
</meta>
</head>
<body>
<input id="txt1" type="text"/>
<input id="btn1" type="button" value="创建li"/>
<ul id="ul1">
</ul>
</body>
</html>
- 删除元素:this绑定的是执行上下文
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var aA=document.getElementsByTagName('a');
var oUl=document.getElementById('ul1');
for(var i=0;i<aA.length;i++)
{
aA[i].onclick=function ()
{
console.log(this)
oUl.removeChild(this.parentNode);
};
}
};
</script>
</head>
<body>
<ul id="ul1">
<li>asfasd <a href="javascript:;" index='1'>删除</a></li>
<li>5645 <a href="javascript:;" index='2'>删除</a></li>
<li>ghdfjgj <a href="javascript:;" index='3'>删除</a></li>
<li>mvbnmvnb <a href="javascript:;" index='4'>删除</a></li>
</ul>
</body>
</html>
- 通过文档碎片的形式来减少DOM操作
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oUl=document.getElementById('ul1');
var oFrag=document.createDocumentFragment();
for(var i=0;i<10000;i++)
{
var oLi=document.createElement('li');
oFrag.appendChild(oLi);
}
oUl.appendChild(oFrag);
};
</script>
</head>
<body>
<ul id="ul1">
</ul>
</body>
</html>
9. DOM操作应用高级
- 父对象.children 和 父对象.childNodes 的区别:
children是指子节点
childNodes是指子内容,不仅仅包含节点
获取父元素:div1.parentElement
parentNode跟parentElement除了前者是w3c标准,后者只ie支持
测试如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#ul1 {background:green;}
#ul2 {background:yellow;}
</style>
<script>
window.onload=function ()
{
var oUl1=document.getElementById('ul1');
var oUl2=document.getElementById('ul2');
var oBtn=document.getElementById('btn1');
oBtn.onclick=function ()
{
var oLi=oUl1.children[0];
console.log(oLi)
var oLi2 = oUl1.childNodes[1]
console.log(oLi2)
oUl1.removeChild(oLi);
oUl2.appendChild(oLi);
};
};
</script>
</head>
<body>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<input id="btn1" type="button" value="移动" />
<ul id="ul2">
</ul>
</body>
</html>
- oUl2.appendChild(oLi);
- 先把元素从原有父级上删掉
- 再添加到新的父级
注:Element.append()与Node.appendChild()的区别:
- li里的数字排序
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#ul1 {background:green;}
#ul2 {background:yellow;}
</style>
<script>
window.onload=function ()
{
var oUl1=document.getElementById('ul1');
var oBtn=document.getElementById('btn1');
oBtn.onclick=function ()
{
var aLi=oUl1.getElementsByTagName('li');
//aLi.sort();
var arr=[];
for(var i=0;i<aLi.length;i++)
{
arr[i]=aLi[i];
}
arr.sort(function (li1, li2){
var n1=parseInt(li1.innerHTML);
var n2=parseInt(li2.innerHTML);
return n1-n2;
});
//alert(arr[0].innerHTML);
for(var i=0;i<arr.length;i++)
{
alert('该把'+arr[i].innerHTML+'插入到最后');
oUl1.appendChild(arr[i]);
}
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="排序" />
<ul id="ul1">
<li>34</li>
<li>25</li>
<li>9</li>
<li>88</li>
<li>54</li>
</ul>
</body>
</html>
- 表格排序:
console.log(oTab.tHead)
console.log(oTab.tBodies)
oTab.tBodies[0].rows[1].cells[1].innerHTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oTab=document.getElementById('tab1');
var oBtn=document.getElementById('btn1');
oBtn.onclick=function ()
{
var arr=[];
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
arr[i]=oTab.tBodies[0].rows[i];
}
arr.sort(function (tr1, tr2){
var n1=parseInt(tr1.cells[0].innerHTML);
var n2=parseInt(tr2.cells[0].innerHTML);
return n1-n2;
});
for(var i=0;i<arr.length;i++)
{
oTab.tBodies[0].appendChild(arr[i]);
}
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="排序" />
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>2</td>
<td>张三</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>王四</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>张伟</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>28</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
- 表格添加删除:
删除操作:removeChild(this.parentNode)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oTab=document.getElementById('tab1');
var oBtn=document.getElementById('btn1');
var oName=document.getElementById('name');
var oAge=document.getElementById('age');
var id=oTab.tBodies[0].rows.length+1;
oBtn.onclick=function ()
{
var oTr=document.createElement('tr');
var oTd=document.createElement('td');
oTd.innerHTML=id++; //?
oTr.appendChild(oTd);
var oTd=document.createElement('td');
oTd.innerHTML=oName.value;
oTr.appendChild(oTd);
var oTd=document.createElement('td');
oTd.innerHTML=oAge.value;
oTr.appendChild(oTd);
var oTd=document.createElement('td');
oTd.innerHTML='<a href="javascript:;">删除</a>';
oTr.appendChild(oTd);
oTd.getElementsByTagName('a')[0].onclick=function ()
{
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
};
oTab.tBodies[0].appendChild(oTr);
};
};
</script>
</head>
<body>
姓名:<input id="name" type="text" />
年龄:<input id="age" type="text" />
<input id="btn1" type="button" value="添加" />
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>28</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>张伟</td>
<td>24</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
- 隔行换色
先把原来的颜色保存下来,然后在鼠标离开的时候再设置成原来保存的颜色
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oTab=document.getElementById('tab1');
var oldColor='';
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
oTab.tBodies[0].rows[i].onmouseover=function ()
{
oldColor=this.style.background;
this.style.background='green';
};
oTab.tBodies[0].rows[i].onmouseout=function ()
{
this.style.background=oldColor;
};
if(i%2)
{
oTab.tBodies[0].rows[i].style.background='';
}
else
{
oTab.tBodies[0].rows[i].style.background='#CCC';
}
}
};
</script>
</head>
<body>
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>23</td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>28</td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
</tr>
<tr>
<td>5</td>
<td>张伟</td>
<td>24</td>
</tr>
</tbody>
</table>
</body>
</html>
10. DOM基础
- 父节点里的子节点可以通过父对象.children来获取。
- 父节点里的子节点也可以通过父对象.childNodes来获取,不过childNodes包含文件节点和元素节点,所以还得区分,代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oUl=document.getElementById('ul1');
//IE6-8
//alert(oUl.childNodes.length);
for(var i=0;i<oUl.childNodes.length;i++)
{
//nodeType==3 -> 文本节点
//nodeType==1 -> 元素节点
//alert(oUl.childNodes[i].nodeType);
if(oUl.childNodes[i].nodeType==1)
{
oUl.childNodes[i].style.background='red';
}
}
};
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
</ul>
aaaa
bbbb
fafafsdfasd 文本节点
<span>qwerqwre 元素节点</span>
</body>
</html>