行间提取事件第一种方法：
function 名字（）
{
...
}
oBtn.onclick=名字；
第二种方法：
oBtn.onclick=function ()
{
...
}
其实在JS当中，大部分的函数都是没有名字的，直接使用第二种方法。
window.onload 当页面加载完成后发生，它也是一个函数。
为元素添加事件
事件和其他属性一样，可以用JS添加。
window.onload的意义。
行为、样式、结构三者分离。
数组document.getElementByTagName('');
循环语句
while(条件){
语句
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var i=0;//1.初始化
while(i<5){//2.条件
alert(i);//3.语句
//i=i+1;//4.自增
i++;
}
</script>
</head>
<body>
</body>
</html>
for循环
for(初始化;条件;自增)
{
语句；
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{
width:200px;
height:200px;
float:left;
border:1px solid black;
margin:10px;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementsByTagName('div');
//alert(oDiv.length);
for(var i=0;i<4;i++)
{
oDiv[i].style.background='red';
}
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
全选、不选、反选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function(){
var oBtn1=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
var oBtn3=document.getElementById('btn3');
var oDiv=document.getElementById('div1');
var aCh=oDiv.getElementsByTagName('input');
oBtn1.onclick=function(){
for(var i=0;i<aCh.length;i++)
{
aCh[i].checked=true;
}
}
oBtn2.onclick=function(){
for(var i=0;i<aCh.length;i++)
{
aCh[i].checked=false;
}
}
oBtn3.onclick=function(){
for(var i=0;i<aCh.length;i++)
{
if(aCh[i].checked==true){
aCh[i].checked=false;
}else{
aCh[i].checked=true;
}
}
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="全选" />
<input id="btn2" type="button" value="不选" />
<input id="btn3" type="button" value="反选" />
<div id="div1">
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
</div>
</body>
</html>