经常我们可以看到很多网站会有多个相同功能的模块，比如淘宝首页的轮播，比如新浪首页的tab切换；
那么可以看出这些地方在HTML结构上是类似的，所以我们可以考虑用一块功能代码去实现，而不同是仅仅是传递参数的不同；
例如：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>J函数传参——商品价格计算</title> 6 </head> 7 8 <body> 9 <ul id="list"> 10 <li> 11 <input type="button" value="-" /> 12 <strong>0</strong> 13 <input type="button" value="+" /> 14 单价：<em>12.5元</em> 15 小计：<span>0元</span> 16 </li> 17 <li> 18 <input type="button" value="-" /> 19 <strong>0</strong> 20 <input type="button" value="+" /> 21 单价：<em>10.5元</em> 22 小计：<span>0元</span> 23 </li> 24 <li> 25 <input type="button" value="-" /> 26 <strong>0</strong> 27 <input type="button" value="+" /> 28 单价：<em>8.5元</em> 29 小计：<span>0元</span> 30 </li> 31 <li> 32 <input type="button" value="-" /> 33 <strong>0</strong> 34 <input type="button" value="+" /> 35 单价：<em>8元</em> 36 小计：<span>0元</span> 37 </li> 38 <li> 39 <input type="button" value="-" /> 40 <strong>0</strong> 41 <input type="button" value="+" /> 42 单价：<em>14.5元</em> 43 小计：<span>0元</span> 44 </li> 45 </ul> 46 47 <p> 48 商品合计共：<div id='cou'>0件</div>，共花费了：0元<br /> 49 其中最贵的商品单价是：0元 50 </p> 51 52 53 <script> 54 var oUl = document.getElementById('list'); 55 var aLi = oUl.getElementsByTagName('li'); 56 57 58 // fn1(aLi[0]); 59 // fn1(aLi[1]); 60 // fn1(aLi[2]); 61 // fn1(aLi[3]); 看到这种情形，应该想到使用for循环来实现 62 for(var i=0; i<aLi.length; i++){ 63 fn1(aLi[i]); 64 } 65 66 function fn1(oLi){ //这里面使用，或者用其他参数a,b,c都可以，这个参数是自己命名的 67 68 var aBtn = oLi.getElementsByTagName('input'); // 因为这里面有2个input，所以使用了aBtn,且后面没有加上相应的下标值； 69 var oStrong = oLi.getElementsByTagName('strong')[0]; 70 var oSpan = oLi.getElementsByTagName('span')[0]; 71 var oEm = oLi.getElementsByTagName('em')[0]; // 这里面加上[0]；是基于该父级元素下，只有这一个em标签 72 var n1 = Number(oStrong.innerHTML); // "这里需要注意的是从HTML中获取的值都是字符串类型，为了后面的运算，以及避免产生不必要的问题，这里进行显示类型转换" 73 var n2 = parseFloat(oEm.innerHTML); 74 75 aBtn[0].onclick = function(){ 76 n1--; 77 if(n1<=0){ 78 n1=0; 79 } 80 oStrong.innerHTML = n1; 81 oSpan.innerHTML = n1*n2+"元"; 82 }; 83 aBtn[1].onclick = function(){ 84 n1++; 85 oStrong.innerHTML = n1; 86 oSpan.innerHTML = n1*n2+"元"; 87 }; 88 } 89 90 // 下面是比较规范的命名： 91 // var oUl = document.getElementById('list'); 92 // var aLi = oUl.getElementsByTagName('li'); 93 94 // // fnCount ( aLi[0] ); 95 // for ( var i=0; i<aLi.length; i++ ) { 96 // fnCount ( aLi[i] ); 97 // } 98 99 // function fnCount ( li ) { // 注意看这里的函数名命名 100 // var aBtn = li.getElementsByTagName ('input'); 101 // var oStrong = li.getElementsByTagName ('strong')[0]; 102 // var oEm = li.getElementsByTagName ('em')[0]; 103 // var oSpan = li.getElementsByTagName ('span')[0]; 104 // var n = oStrong.innerHTML; // 产品的数量 105 // var price = parseFloat(oEm.innerHTML); // 产品的单价命名 106 107 // aBtn[0].onclick = function () { 108 // if ( n > 0 ) { 109 // n--; 110 // } 111 // oStrong.innerHTML = n; 112 // oSpan.innerHTML = n*price + '元'; 113 // }; 114 // aBtn[1].onclick = function () { 115 // n++; 116 // oStrong.innerHTML = n; 117 // oSpan.innerHTML = n*price + '元'; 118 // }; 119 // } 120 // }; 121 122 </script> 123 124 </body> 125 </html>
今天这段自己敲的代码有2个收获：
第一：弄清除，参数的命名是自定的，也就是说这里面的oLi,也可以是其他自己起的名字，比如a，b，c都可以；
第二：动态获取元素的ByTagName方法，其实后面是否使用到下标，就看该HTML机构中，是否有多个相同的元素，比如这里面的按钮，就有2个，所以aBtn，a代表数组，不止一个，后面没有使用下标；
var aBtn = a.getElementsByTagName('input');
而其他该结构中只有一个的HTML元素，这里我们要调用它则直接使用下标了，比如这里的
var oStrong = a.getElementsByTagName('strong')[0];
var oSpan = a.getElementsByTagName('span')[0];
var oEm = a.getElementsByTagName('em')[0];
都是这种情况