javascript学习5
- %运算符的使用
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 var aLi=document.getElementsByTagName('li'); 9 var arr=['red','yellow','blue']; 10 for(var i=0;i<aLi.length;i++){ 11 aLi[i].index=i; 12 aLi[i].style.background=arr[i%arr.length]; 13 14 aLi[i].onmouseover=function(){ 15 this.style.background='#000'; 16 } 17 aLi[i].onmouseout=function(){ 18 this.style.background=arr[this.index%arr.length]; 19 } 20 } 21 } 22 /* 23 说明： 24 0%3=0 25 1%3=1 26 2%3=2 27 3%3=0 28 4%3=1 29 5%3=2 30 6%3=0 31 7%3=1 32 8%3=2 33 9%3=0 34 * */ 35 </script> 36 </head> 37 <body> 38 <ul> 39 <li></li> 40 <li></li> 41 <li></li> 42 <li></li> 43 <li></li> 44 <li></li> 45 <li></li> 46 <li></li> 47 <li></li> 48 </ul> 49 </body> 50 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 var aLi=document.getElementsByTagName('li'); 9 var arr=['red','yellow','blue']; 10 var str=''; 11 for(var i=0;i<aLi.length;i++){ 12 aLi[i].index=i; 13 aLi[i].style.background=arr[i%arr.length]; 14 15 aLi[i].onmouseover=function(){ 16 str=this.style.background;//移入先存颜色 17 this.style.background='#000'; 18 } 19 aLi[i].onmouseout=function(){ 20 this.style.background=str;//移出赋值颜色 21 } 22 } 23 } 24 /* 25 说明： 26 0%3=0 27 1%3=1 28 2%3=2 29 3%3=0 30 4%3=1 31 5%3=2 32 6%3=0 33 7%3=1 34 8%3=2 35 9%3=0 36 * */ 37 </script> 38 </head> 39 <body> 40 <ul> 41 <li></li> 42 <li></li> 43 <li></li> 44 <li></li> 45 <li></li> 46 <li></li> 47 <li></li> 48 <li></li> 49 <li></li> 50 </ul> 51 </body> 52 </html>
1 <script type="text/javascript"> 2 var s=125;//秒 3 alert(Math.floor(s/60)+'分'+s%60+'秒'); 4 </script>
- ！运算符
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 var oInput=document.getElementsByTagName('input'); 9 10 oInput[0].onclick=function(){ 11 for(var i=1;i<oInput.length;i++){ 12 oInput[i].checked=!oInput[i].checked; 13 } 14 } 15 } 16 </script> 17 </head> 18 <body> 19 <input type="button" value="反选"/> 20 <ul> 21 <li><input type="checkbox"/></li> 22 <li><input type="checkbox" checked="checked"/></li> 23 <li><input type="checkbox"/></li> 24 <li><input type="checkbox" checked="checked"/></li> 25 <li><input type="checkbox"/></li> 26 </ul> 27 </body> 28 </html>
- 判断语句中的真假问题：数据类型-数字(NaN)、字符串、布尔、函数、对象（元素、[]、{}、null）、未定义
- 真 非0的数字、非空字符串、true、函数、能找到的元素、[]、{}
- 假 0、NaN、空字符串''、false、不能找到的元素、null、未定义
- 函数返回值----return
- return 返回值有：数字、字符串、布尔、函数、对象(元素，[]，{}，null)、未定义
- 函数名+括号：fn1()===>return 后面的值；
- 所有函数默认返回值:未定义(undefined)；
- return后面任何代码都不执行了；
-
<script type="text/javascript"> //fn1()---->100 alert(fn1());//100 function fn1(){ return 100; } </script>
<script type="text/javascript"> //fn1()---->hello alert(fn1().length);//5 function fn1(){ return 'hello'; } </script>
<script type="text/javascript"> //fn2()----->function(){alert('hello');} function fn2(){ return function(){ alert('hello'); } } fn2()();//hello </script>
<script type="text/javascript"> //fn2(20)----->function(b){alert(a+b);} function fn2(a){ return function(b){ alert(a+b);//30 } } fn2(20)(10); </script>
<script type="text/javascript"> //fn3()----->window function fn3(){ return window; } fn3().onload=function(){ document.body.innerHTML='hello'; } </script>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width:100px; height:100px; background: red; } </style> <script type="text/javascript"> /*封装了一个id选择器*/ function $(id){ return document.getElementById(id); } window.onload=function(){ $('btn').onclick=function(){ $('div1').style.backgroundColor='blue'; } } </script> </head> <body> <input type="button" value="按钮" id="btn"/><br /> <div id="div1"></div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width:100px; height:100px; background: red; } </style> <script type="text/javascript"> function $(v){ if(typeof v==='function'){ window.onload=v; }else if(typeof v==='string'){ return document.getElementById(v); }else if(typeof v==='object'){ return v; } } $(function(){ $('btn').onclick=function(){ $(this).style.backgroundColor='red'; } }); </script> </head> <body> <input type="button" value="按钮" id="btn"/> </body> </html>
<script type="text/javascript"> //alert(fn1(7)); //[1,2,3,4,5,6,7] function fn1(n){ var arr=[]; for(var i=1;i<=n;i++){ arr.push(i); } alert(arr); } fn1(7); </script>
<script type="text/javascript"> //fn(2,6);//[2,3,4,5] //fn(6,2);//[2,3,4,5] function fn1(a,b){ var arr=[]; if(a>b){ t=a; a=b; b=t; } for(var i=1;i<b;i++){ arr.push(i); } alert(arr.slice(a-1,b)); } fn1(2,6);//[2,3,4,5] fn1(6,2);//[2,3,4,5] </script>
arguments实参集合与局部变量、参数关系
-
当函数的参数个数无法确定的时候，用arguments. - 与局部变量和局部参数的关系
-
-
<script type="text/javascript"> fn1(1,2,3); //实参-----实际传递的参数 function fn1(a,b,c){ //形参-----形式上，abc这些名代表123 //arguments===>[1,2,3]----实参的集合 alert(arguments.length);//3 alert(arguments[1]);//2 alert(arguments[arguments.length-1]);//3 } </script>
<script type="text/javascript"> sum(1,2,3); function sum(){ var n=0; for(var i=0;i<arguments.length;i++){ n+=arguments[i]; } alert(n);//6 } </script>
<script type="text/javascript"> var a=1; function fn2(a){ //相当于 var=1; arguments[0]=3;//此时arguments[0]==a alert(a);//3 var a=2; alert(arguments[0]);//2 } fn2(a); alert(a);//1 </script>
- currentStyle和ComputedStyle的应用
-
要使用单一样式
- 不要有空格
- 不要获取未设置后的样式：不兼容
-
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width:100px; height:100px; background: red; } </style> <script type="text/javascript"> function $(v){ if(typeof v==='function'){ window.onload=v; }else if(typeof v==='string'){ return document.getElementById(v); }else if(typeof v==='object'){ return v; } } $(function(){ $('btn').onclick=function(){ //alert($('div1').style.width); 获取不到属性值 if($('div1').currentStyle){ alert($('div1').currentStyle.width) }else{ alert(getComputedStyle($('div1')).width); } /*getComputedStyle * 获取的是计算机(浏览器)计算后的样式。 * IE6、IE7、IE8不兼容 * */ /*currentStyle * 获取的是计算机(浏览器)计算后的样式。 * IE6、IE7、IE8兼容,在标准浏览器下不兼容 * */ } }); </script> </head> <body> <input type="button" value="按钮" id="btn"/><br /> <div id="div1"></div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width:100px; height:100px; background: red; } </style> <script type="text/javascript"> function $(v){ if(typeof v==='function'){ window.onload=v; }else if(typeof v==='string'){ return document.getElementById(v); }else if(typeof v==='object'){ return v; } } $(function(){ $('btn').onclick=function(){ alert(getStyle($('div1'),'width')); } }); function getStyle(obj,attr){ /*if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj)[attr]; }*/ return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr] } </script> </head> <body> <input type="button" value="按钮" id="btn"/><br /> <div id="div1"></div> </body> </html>
- return 返回值有：数字、字符串、布尔、函数、对象(元素，[]，{}，null)、未定义
