js知识

行为=事件+由该事件触发的动作

常用事件：onXxx

onLoad           打开网页事件

onUnLoad       关闭事件

onClick        　单击事件

onChange       改变事件

onMouseOver   鼠标悬浮事件

onMouseOut    鼠标移开事件

<!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>
#div1{200px; height:200px; background:red;}
.box{background:#F39;}
</style>
<script><!--JavaScript-->
function toColor(color){//带参数方法
	var oDiv=document.getElementById('div1');
    oDiv.style.background=color;
}
function toValue(name,value){//可选择改变哪一个属性
	var oDiv=document.getElementById('div1');
    oDiv.style[name]=value;//特别注意[]的使用，[]可以写属性值，也可以写参数名称
	}
function toGreen(){//无参数方法，只能实现一种功能
	var oDiv=document.getElementById('div1');
	oDiv.style.background='green';
	}
function setText(){
	var oTxt=document.getElementById('txt1');
	oTxt.value='显示在文本框中';//当调用此方法时，在文本框中显示。
	oTxt.title='显示成提示信息';//当鼠标移到文本框中，在鼠标上显示信息
	}
function setClass(){
	var oDiv=document.getElementById('div1');
	oDiv.className="box";
	}
</script>
</head>

<body>
<input type="button" value="变绿" onclick="toColor('green')"/><!--单击事件调用函数-->
<input type="button" value="变黄" onclick="toColor('yellow')"/>
<input type="button" value="变蓝" onclick="toColor('blue')"/>
<input type="button" value="变高" onclick="toValue('height','400px')"/>
<input type="button" value="变矮" onclick="toValue('height','150px')"/>
<input type="button" value="变宽" onclick="toValue('width','400px')"/>
<input type="button" value="变窄" onclick="toValue('width','150px')"/>
<input type="button" value="变颜色" onclick="toGreen()"/>
<div id="div1" >div1区域</div>


<input type="text" id="txt1" />
<input type="button" value="显示文字"  onclick="setText()"/>
</body>
</html>

选择框

css html javascript 完全分离

window.onLoad 页面加载完成后发生

<!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>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
</div>
</body>
</html>