函数传递参数
参数=JS的数据类型=>数字、字符串、布尔、函数、对象、未定义
传递有名字的函数，直接传递函数名就可以了。
fn1(100, 'px'); function fn1(a, b){ // alert( a+b ); // 此时参数是数字和字符串 }
fn2('miaov');
fn2('妙味课堂');
function fn2(a){
// alert(a.charAt(2)); // 会返回i，课 这里的参数是字符串，拥有字符串的属性特征，比如这里调用了charAt
}
参数是匿名函数的情况： fn3(function(){alert(1);}) function fn3(fn){ fn(); // 此时返回1; } 参数为有名字的函数： function fn4(){ alert(4) ; } fn3(fn4); function fn3(fn){ fn(); } 参数是对象： fn5(window,document); function fn5(w,d){ w.onload = function(){ d.body.innerHTML = 123; // d 就代表document，w代表window }; }
利用参数的传递，来判断数据类型：
fn1(100); fn1('miaov'); fn1(function(){alert(1);}); function fn1(a){ if(typeof a==='number'&& a===a){ // 这里的条件判断是为了去掉NaN alert(a+20); }else if(typeof a === 'string'){ alert(a.charAt(2)); }else if(typeof a=== 'function'){ a(); } } // 每一次自己亲手写代码会发现产生不必要的错误，比如typeof 常常写成tpye
实际应用案例：
在项目当中或者页面当中，发现一些样式的实现原理是相同的，此时考虑使用函数来实现功能，而用不同的参数来传递进去，实现不同的效果即可：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 ul { padding:0; margin:0; } 8 li { list-style:none; } 9 body { background:#333; } 10 .box { width:400px; height:500px; position:relative; background:url(img/loader_ico.gif) no-repeat center #fff; float:left; margin-right:60px; } 11 .box img { width:400px; height:500px; } 12 .box ul { width:40px; position:absolute; top:0; right:-50px; } 13 .box li { width:40px; height:40px; margin-bottom:4px; background:#666; } 14 .box .active { background:#FC3; } 15 .box span { top:0; } 16 .box p { bottom:0; margin:0; } 17 .box p,.box span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; } 18 </style> 19 <script> 20 21 /* 22 重用代码： 23 1、尽量保证 HTML 代码结构一致，可以通过父级选取子元素 24 2、把核心主程序实现，用函数包起来 25 3、把每组里不同的值找出来，通过传参实现 26 */ 27 28 window.onload = function (){ 29 fnTab( 'pic1', [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ], [ '小宠物', '图片二', '图片三', '面具' ], 'onclick' ); 30 fnTab( 'pic2', [ 'img/2.png', 'img/3.png', 'img/4.png' ], [ '图片二', '图片三', '面具' ], 'onmouseover' ); 31 }; 32 33 function fnTab( id, arrUrl, arrText, evt ){ 34 var oDiv = document.getElementById(id); 35 var oImg = oDiv.getElementsByTagName('img')[0]; 36 var oSpan = oDiv.getElementsByTagName('span')[0]; 37 var oP = oDiv.getElementsByTagName('p')[0]; 38 var oUl = oDiv.getElementsByTagName('ul')[0]; 39 var aLi = oUl.getElementsByTagName('li'); 40 var num = 0; 41 42 for( var i=0; i<arrUrl.length; i++ ){ 43 oUl.innerHTML += '<li></li>'; 44 } 45 46 // 初始化 47 function fnTab(){ 48 oImg.src = arrUrl[num]; 49 oSpan.innerHTML = 1+num+' / '+arrUrl.length; 50 oP.innerHTML = arrText[num]; 51 for( var i=0; i<aLi.length; i++ ){ 52 aLi[i].className = ''; 53 } 54 aLi[num].className = 'active'; 55 } 56 fnTab(); 57 58 for( var i=0; i<aLi.length; i++ ){ 59 aLi[i].index = i; // 索引值 60 aLi[i][evt] = function (){ // evt 因为是参数，动态变化的，所以这里使用中括号括起来; 61 num = this.index; 62 fnTab(); 63 }; 64 } 65 } 66 </script> 67 </head> 68 69 <body> 70 71 <div id="pic1" class="box"> 72 <img src="" /> 73 <span>数量正在加载中……</span> 74 <p>文字说明正在加载中……</p> 75 <ul></ul> 76 </div> 77 78 <div id="pic2" class="box"> 79 <img src="" /> 80 <span>数量正在加载中……</span> 81 <p>文字说明正在加载中……</p> 82 <ul></ul> 83 </div> 84 85 </body> 86 </html>