初探js特效魅力04
我们在进入到公司里面工作的时候,做一个同一个项目,经常是大家分工合作,当我们写css时,一般不写在行间,因为这样会被误操作,也就是被乱删了都不知道,这样的后果是很难检查的 ,因为一个项目做下来,到最后,代码一大把,看着都头疼,
接下来就是教大家如何提取行间样式并作为函数调用,如下
<!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>js特效</title>
<!-- <link id="link1" rel="stylesheet" type="text/css" href="css1.css" />-->
<script>
window.onload=function(){
var oDiv=document.getElementById("btn1");
oDiv.onclick=function(){
alert('a');
}
}
</script>
</head>
</style>
<body>
<input type="button" value="按钮" id="btn1"/>
</body>
</html>
向上面一样,样式和js我们一般不写在标签里面,通常写在head里面,但是大家要记住,js是一行行执行的,像我们这个方法,一定要在前面加上window.onload,意思就是页面加载完执行这个方法,如果没有window.onload,页面就会报错,因为它找不到按钮的id。
利用for循环、getElementsByTagName的方法让复选框全选、反选、不选功能
<!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>js特效</title>
<!-- <link id="link1" rel="stylesheet" type="text/css" href="css1.css" />-->
<script>
window.onload=function(){
var btn1=document.getElementById("btn1");
var btn2=document.getElementById("btn2");
var btn3=document.getElementById("btn3");
var oDiv=document.getElementById("div1");
var ach=oDiv.getElementsByTagName("input");
btn1.onclick=function(){
for(var i=0;i<ach.length;i++){
ach[i].checked=true;
}
}
btn2.onclick=function(){
for(var i=0;i<ach.length;i++){
ach[i].checked=false;
}
}
btn3.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>
</style>
<body>
<input type="button" value="全选" id="btn1"/><br />
<input type="button" value="不选" id="btn2"/><br />
<input type="button" value="反选" id="btn3"/><br />
<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>
未完待续,请继续查看初探js特效魅力05