函数参数是占位符
<script> function show(a,b) { alert(a*b); } show(5,12); </script> </head> <body>优化前代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1{width:200px; height:200px; background:red;} </style> <script> function toGreen() { var oDiv=document.getElementById('div1'); oDiv.style.background='green'; } function toYellow() { var oDiv=document.getElementById('div1'); oDiv.style.background='yellow'; } function toBlack() { var oDiv=document.getElementById('div1'); oDiv.style.background='black'; } </script> </head> <body> <input type="button" value="变绿" οnclick="toGreen()" /> <input type="button" value="变黄" οnclick="toYellow()" /> <input type="button" value="变黑" οnclick="toBlack()"/> <div id="div1"> </div> </body> </html>优化后代码
函数传参
<style> #div1{width:200px; height:200px; background:red;} </style> <script> function setColor(color) { var oDiv=document.getElementById('div1'); oDiv.style.background=color; } </script> </head> <body> <input type="button" value="变绿" οnclick="setColor('green')" /> <input type="button" value="变黄" οnclick="setColor('yellow')" /> <input type="button" value="变黑" οnclick="setColor('black')"/> <div id="div1"> </div>
不确定值作为参数
<script> function setStyle(name,value) { var oDiv=document.getElementById('div1'); oDiv.style.name=value; } /* function toWidth() { var oDiv=document.getElementById('div1'); oDiv.style.width='300px'; } function toHeight() { var oDiv=document.getElementById('div1'); oDiv.style.height='300px'; } function toGreen() { var oDiv=document.getElementById('div1'); oDiv.style.background='green'; } */ </script> </head> <body> <input type="button" value="变宽" οnclick="setStyle('width','400px')">
这样传参数不行因为计算机不知道 oDiv.style.name 就是setStyle()中的name
第二种操作属性的方法,第一种是. ODiv.value
第二种是oDiv[name],[]的优势是[]中的东西可以变
<script> function setStyle(name,value) { var oDiv=document.getElementById('div1'); oDiv.style[name]=value; } /* function toWidth() { var oDiv=document.getElementById('div1'); oDiv.style.width='300px'; } function toHeight() { var oDiv=document.getElementById('div1'); oDiv.style.height='300px'; } function toGreen() { var oDiv=document.getElementById('div1'); oDiv.style.background='green'; } */ </script> </head> <body> <input type="button" value="变宽" οnclick="setStyle('width','400px')"> <input type="button" value="变高" οnclick="setStyle('height','400px')"> <input type="button" value="变绿" οnclick="setStyle('background','green')">变量和字面量
变量和参数不加引号,字符串必须加引号 ,不加引号js会把它当成变量,然后去找变量的值,
style和className
style加样式是加在行间,读也是从行间读
样式优先级,要么只动class,要么只动style
行间事件
<body> <input id="btn1" type="button" value="按钮" /> <script> var oBtn=document.getElementById('btn1'); function abc() { alert('a') } oBtn.onclick= abc; </script> </body>onclick需要加一个函数
匿名函数
<body> <input id="btn1" type="button" value="按钮" /> <script> var oBtn=document.getElementById('btn1'); oBtn.onclick= function () //匿名函数 { alert('a') }; </script> </body>js标签<script></script>一般不放在body中,放在head中会报错,要加个window.onload(),页面加载完成时发生
<script> window.onload=function () { var oBtn = document.getElementById('btn1'); oBtn.onclick = function () //匿名函数 { alert('a') }; } </script> </head> <body> <input id="btn1" type="button" value="按钮" />
提取行间事件
行为、样式、结构三者分离,行为就是JavaScript 样式就是css 结构就是html 别加行间样式,别加行间样式,别加行间事件
getElementById一次只能获取一个元素,getElementsByTagName一次可以获取一组
<style> div {width:200px; height:200px; float:left; border:1px solid black; margin:10px;} </style> <script> window.οnlοad=function() { var aDiv=document.getElementsByTagName('div'); alert(aDiv.length); }; </script> <body> </body> <div></div> <div></div> <div></div> <div></div>aDiv.length length 长度,数组的长度就是其中元素的个数
操作数组
<style> div {width:200px; height:200px; float:left; border:1px solid black; margin:10px;} </style> <script> window.οnlοad=function() { var aDiv=document.getElementsByTagName('div'); //alert(aDiv.length); //aDiv.style.background='red'; aDiv[1].style.background='red'; }; </script>循环
<script> var i=0; //初始化 while(i<5) // 条件 { alert(i); //语句 i=i+1; //自增 或写成 i++ } </script>
<script> window.οnlοad=function() { var aDiv=document.getElementsByTagName('div'); for(var i=0;i<4;i++) { aDiv[i].style.background='red'; } }; </script>代码的健壮性
for(var i=0;i<aDiv.lengthD;i++) { aDiv[i].style.background='red'; }
全选、反选、不选
<script> window.οnlοad=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.οnclick=function() { for(var i=0;i<aCh.length;i++) { aCh[i].checked=true; } }; oBtn2.οnclick=function() { for(var i=0;i<aCh.length;i++) { aCh[i].checked=false; } }; oBtn3.οnclick=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> </div>
选项卡
<style> #div1 .active{background:yellow;} #div1 div {width:200px; height:200px; background:#CCC; border:1px solid #999; display:none;} </style> <script> window.οnlοad=function() { var oDiv=document.getElementById('div1'); var aBtn=oDiv.getElementsByTagName('input'); var aDiv=oDiv.getElementsByTagName('div'); for(var i=0;i<aBtn.length;i++) { aBtn[i].index=i; aBtn[i].οnclick=function() { for(var i=0;i<aBtn.length;i++) //alert(this.value); { aBtn[i].className=''; aDiv[i].style.display='none'; } this.className='active'; //alert(this.index); aDiv[this.index].style.display='block'; }; } } </script> </head> <body> <div id="div1"> <input class="active" type="button" value="教育" /> <input type="button" value="培训"/> <input type="button" value="招生" /> <input type="button" value="出国" /> <div style="display:block;">1111</div> <div>222</div> <div>333</div> <div>4444</div> </div>
this 代表当前的按钮
innerHTML