JavaScript中函数的参数学习笔记
来源：自学PHP网
时间：2014-09-19 14:48 作者：
阅读:次
[导读] 函数可以带参数也可以不带参数，不带参数的函数多半用于固定操作，带参数才是一个函数最有意义的地方，当然匿名函数是没有参数的了。...
|
我们之前写的函数并没有给它传参，其实所谓的传参就是将参数传给函数，然后函数在内部做一些处理，那么如何给参数传参呢，其实函数后面的括号里面就是放参数的，下面举个例子：
| 代码如下 |
复制代码 |
|
function sum(a, b)
{
alert(a+b);
}
sum(12, 5);
|
上面的函数中，给sum设置了2个参数a和b，当调用sum时，传递了2个参数给函数，这时a就变为了12，b就变为了5，函数体内的也要变。a和b就起到一个占位符的作用，就好像你和同学去食堂打饭，突然想到早上吃饭看见饭卡里钱不多了，你就给你同学说先帮我排着队，冲完饭卡就过去，等你回来的时候，你就站到同学的位置，当然打饭也是你自己刷卡。上面代码中的数字就是你，字母就是你同学，alert(a+b)就是打饭付钱。当然你同学有名字，那这个a和b肯定也有名字，他们这种参数就叫做形参，就是个形式参数摆在那里，这个sum(12,5)中的参数就是实参，实际参数，也就是实际付钱的你。
有的函数并有形参，或者有的时候要传给函数的参数不确定，那该怎么办呢，其实JS已经帮我们解决了这个问题，那就是每个函数都有自己的arguments对象，这个对象里装的就是传进来的那些参数。看看下面的代码就明白了。
| 代码如下 |
复制代码 |
|
function sss()
{
var sum=0;
for(var i=0; i<arguments.length; i++){
sum+=arguments[i];
}
alert(sum);
}
sss(12, 5, 2);
|
sss函数我们并没有给设置形参，但在调用的时候依然可以给它传参，而这些参数都在arguments里面，arguments也有length属性，但它不是数组，用alert(typeof arguments)弹出来的是object，可见它的的确确是个对象类型的。
接下来就是操作属性的方法，其实操作属性有2种方法，除了用点来操作外，还有一个就是用方括号来操作，具体的还是来看代码：
| 代码如下 |
复制代码 |
|
function setText(name)
{
var oTxt=document.getElementById('txt1');
oTxt.value='asdfasdfasd';
oTxt['value']='asdfasdf';
}
|
上面的代码是设置一个文本输入框的内容，2种方法的最终效果都是一样的，但是又各有优点，用点来操作属性的有点很明显，代码写的短，方便，不用那么多的符号。而方括号设置属性的方法从上面的代码是怎么也看不出有什么有点是吧。那就接着看下面的代码：
| 代码如下 |
复制代码 |
|
function setText(name)
{
var oTxt=document.getElementById('txt1');
oTxt.value='asdfasdfasd';
oTxt[name]='er3523543';
//oTxt.name='sdfqwrf'; 这种方法就成了设置属性了的值了，而不是形参name
}
setText('value');
|
相信这回大家能看出门道了吧，那就是传参，用方括号设置属性的优点就是可以给函数传参来设置属性。最后就是循环语句，这个就不多说了，和别的语言一摸一样，下面还是依照惯例上练习，望大家看源码后下面留言交流。
第一个循环语句的练习，给所有的DIV加背景色。
| 代码如下 |
复制代码 |
|
<style type="text/css">
#demo_main div {float: left; width:100px; height:100px; margin:10px; border:1px solid #000;}
.red {background-color:red;}
</style>
<script type="text/javascript">
window.onload=function (){
var oDiv=document.getElementById('demo_main').getElementsByTagName('div');
for(var i=0;i<oDiv.length;i++){
oDiv[i].className='red';
}
};
</script>
</head>
<body>
<div id="demo_topBox">
<div class="demo_topNav">
<p class="demo_topText">这里是前端客小末的demo页，欢迎各种交流，各种留言。</p>
<a class="demo_home" href="http://f2eer.com/" title="返回首页">返回首页</a>
</div>
</div>
<div id="demo_main">
<!-- 这里放作品 -->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
|
第二个是判断和循环结合的，全选、反选、不选
| 代码如下 |
复制代码 |
|
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>全选 反选 不选 - 前端客f2eer.com</title>
<style type="text/css">
input {float:left;}
</style>
<script type="text/javascript">
window.onload=function (){
var oAll=document.getElementById('all');
var oNo=document.getElementById('no');
var oContrary=document.getElementById('contrary');
var oDiv=document.getElementById('div1');
var aIpt=oDiv.getElementsByTagName('input');
oAll.onclick=function (){
for(var i=0;i<aIpt.length;i++){
aIpt[i].checked=true;
}
};
oNo.onclick=function (){
for(var i=0;i<aIpt.length;i++){
aIpt[i].checked=false;
}
};
oContrary.onclick=function (){
for(var i=0;i<aIpt.length;i++){
if(aIpt[i].checked==false){
aIpt[i].checked=true;
}else{
aIpt[i].checked=false;
}
}
};
};
</script>
</head>
<body>
<div id="demo_topBox">
<div class="demo_topNav">
<p class="demo_topText">这里是前端客小末的demo页，欢迎各种交流，各种留言。</p>
<a class="demo_home" href="http://f2eer.com/" title="返回首页">返回首页</a>
</div>
</div>
<div id="demo_main">
<!-- 这里放作品 -->
<div id="div1">
<input type="button" value="全选" id="all" />
<input type="button" value="不选" id="no" />
<input type="button" value="反选" id="contrary" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
</div>
</body>
</html>
|
第三个是商品弹出商品介绍
| 代码如下 |
复制代码 |
|
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
* { padding: 0; margin: 0; }
li { list-style: none; }
.prompt { width: 710px; height: 301px; background: url(images/bg.gif); margin: 50px auto 0; position: relative; }
.prompt ul { position: absolute; top: 241px; }
.prompt .list1 { left: 30px; }
.prompt .list2 { right: 30px; }
.prompt li { float: left; width: 103px; height: 30px; line-height: 30px; text-align: center; margin-right: 1px; background: url(images/li_bg.gif) repeat-x; position: relative; cursor: pointer; }
.prompt h2 { color: #fff; font-size: 14px; }
.prompt p { width: 128px; height: 100px; padding: 10px; background: url(images/p_bg.gif) no-repeat; filter: alpha(opacity=80); opacity: 0.8; position: absolute; bottom: 28px; left: -24px; display: none; color: #fff; font-size: 12px; text-align: left; line-height: 16px; font-family: arial; }
.prompt .active { background: url(images/active.gif) no-repeat; font-weight: bold; }
</style>
<script type="text/javascript">
window.onload=function (){
var oDiv=document.getElementById('prompt');
var aH=oDiv.getElementsByTagName('h2');
var aP=oDiv.getElementsByTagName('p');
for(var i=0;i<aH.length;i++){
aH[i].index=i;
aH[i].onmouseover=function (){
this.className='active';
aP[this.index].style.display='block';
};
aH[i].onmouseout=function (){
this.className='';
aP[this.index].style.display='none';
};
aP[i].onmouseover=function (){
this.style.display='block';
};
aP[i].onmouseout=function (){
this.style.display='none';
};
}
}
</script>
</head>
<body>
<div id="demo_main">
<!-- 这里放作品 -->
<div id="prompt" class="prompt">
<ul class="list1">
<li>
<h2>产品</h2>
<p>NX5<br />三星NX平台相机14.6万像素的APS的- C的传感器工作结构紧凑，重量轻体</p>
</li>
<li>
<h2>经销商</h2>
<p>鼎好电子大厦A座9019室<br />联系电话：010-62607039 13501246332</p>
</li>
<li>
<h2>价格</h2>
<p>NX5<br />参考价：890元</p>
</li>
</ul>
<ul class="list2">
<li>
<h2>产品</h2>
<p>欧达D350<br />500万像素,最高可插值1200万像素 高清规格：1080p</p>
</li>
<li>
<h2>经销商</h2>
<p>鼎好电子大厦A座9019室<br />联系电话：010-62607039 13501246332</p>
</li>
<li>
<h2>价格</h2>
<p>NX5<br />参考价：1890元</p>
</li>
</ul>
</div>
</div>
</body>
</html>
|
今天的学习就到这里，文章中如有哪里理解错了，还请大家多多指教。:) |
