JavaScript之函数的使用
目录
- 一、参数的基本使用
- 二、不定参（Arguments）的使用
- 三、递归调用
- 四、return的使用与理解
- 五、选项卡的封装
一、参数的基本使用
参数可以有多个，也可以没有，也可以是任何数据类型。
参数的作用：
参数可以使函数解决更多的问题。
传参相当于在函数中进行了一次定义。
//传递一个参数
function fs(text){
console.log(text);
}
fs(123);
fs('abc')
fs();
//传递多个参数
function(node,text,color,width.height){
var oNode = document.creteElement(node);
oNode.innerHTML = text;
oNode.style.background = color;
oNode.style.width = width;
oNode.style.height = height;
}
//通过数组传参
function fs(arr[]){
var oNode = docunment.createElement(arr[0]);
oNode.innerHTML = arr[1];
oNode.style.background = arr[2];
oNode.style.width = arr[3];
oNode.style.height = arr[4];
docunment.body.appendChild(oNode);
}
fs(['div','浮生','yellow','300px','500px'])
二、不定参（Arguments）的使用
arguments对象不是一个array。它类似于Array，但除了length属性和索引元素之外，没有任何Array属性。
//arguments像数组，但是不是数组
function fs(){
var oNode = document.createElement(arguments[0]);
oNode.innerHTML = arguments[1];
oNode.style.background = arguments[2];
oNode.style.width = arguments[3];
oNode.style.height = arguments[4];
docunment.body.appendChild(oNode);
}
fs('div','我现在用的是arguments','red','500px','300px');
三、递归调用
递归是函数一种自己间接调用给自己的使用方式。
var i =0;
function fs(){
i++;
console.log(i);
setTimeout(fs,10)
};
fs();
//加一个停止
var arr =[1,2,3];
var i =0;
function fs(){
if(i ==arr.length){
return; //return代表函数的返回
}
console.log(arr[i]);
i++;
fs();
};
fs();
四、return的使用与理解
return语句会终止函数的执行并返回函数的值。
任何函数都有默认return值，为undefined。
函数的return值可以被打印查看。（console.log()）
function fs(){
if( i >=3){
return;
}
}
当代码运行到return部分的时候会立即返回，不会继续执行。
小问题：请问这个代码运行之后会怎么显示（无奖竞猜）
alert(alert(10));
五、选项卡的封装
封装一个选项卡且传递参数
<style>
div {
width: 200px;
height: 200px;
background: #ccc;
display: none;
text-align: center;
}
div.show {
display: block;
}
.active {
background: red;
}
style>
head>
<body>
<input type="button" name="" value="aa" class="active">
<input type="button" name="" value="bb">
<input type="button" name="" value="cc">
<div class="show">我是第一个divdiv>
<div>我是第二个divdiv>
<div>我是第三个divdiv>
body>
<script>
var allInput = document.getElementsByTagName('input');
var allDiv = document.getElementsByTagName('div');
for (var i = 0; i < allInput.length; i++) {
// allInput[i].setAttribute('index', i);
allInput[i].index = i;
allInput[i].onclick = function () {
for (var i = 0; i < allInput.length; i++) {
allDiv[i].className = '';
allInput[i].className = '';
}
this.className = 'active';
/* allDiv[this.getAtteribute('index')]
.className = 'show';*/
allDiv[this.index].className = 'show';
}
}
</script>
封装之后：
<style>
.outNode div {
width: 200px;
height: 200px;
background: #ccc;
display: none;
}
span {
cursor: pointer;
margin-left: 10px;
}
.toActive {
background: red;
}
.outNode .show {
display: block;
}
.active {
background: red;
}
style>
<body>
<script>
//获取所有的input和div
var allInput = document.getElementsByTagName('input');
var allDiv = document.getElementsByTagName('div');
//创建封装函数
function CreateTab(obj) {
//定义div
var outNode = document.createElement('div');
//创建className
outNode.className = 'outNode';
//插入
document.body.appendChild(outNode);
//循环遍历，创建所有的obj.topNode
for (var i = 0; i < obj.topValue.length; i++) {
var topNode = document.createElement(obj.topNode);
//给第一个元素加CSS样式
if (i == 0) {
topNode.className = obj.topClass;
};
//判断obj.topNode是不是input（button）
if (obj.topNode == 'input') {
topNode.type = 'button';
topNode.value = obj.topValue[i];
}
else {
topNode.innerHTML = obj.topValue[i];
};
//插入
outNode.appendChild(topNode);
};
//循环遍历，创建obj.bottonNode
for (var i = 0; i < obj.bottomValue.length; i++) {
var bottomNode = document.createElement(obj.bottomNode);
//给第一个元素定义CSS样式
if (i == 0) {
bottomNode.className = obj.bottomClass;
}
bottomNode.innerHTML = obj.bottomValue[i];
outNode.appendChild(bottomNode);
};
//获取所有的obj.Node和obj.bottomNode
var allTop = outNode.getElementsByTagName(obj.topNode);
var bottomNode = outNode.getElementsByTagName(obj.bottomNode);
//循环遍历
for (var i = 0; i < allTop.length; i++) {
//给所有的allTop定义一个index
allTop[i].index = i;
//创建点击事件
allTop[i].onclick = function () {
//循环遍历，清空所有allTop和bottomNode的className
for (var i = 0; i < allTop.length; i++) {
allTop[i].className = '';
bottomNode[i].className = '';
};
//给当前的元素定义className
this.className = obj.topClass;
bottomNode[this.index].className = obj.bottomClass;
};
};
};
/*
//函数名称CreateTab(){
topNode:'input'//标签名字 String
bottomNode:'div' //标签名字 String
topValue:['aa','bb','cc'], Array
bottomValue:['第一个div','第二个div','第三个div'], Array
topClass:'active', String
bottomClass:'show' String
}
*/
//封装使用
CreateTab({
topNode: 'span',
bottomNode: 'div',
topValue: ['昨天', '今天', '明天', '后天'],
bottomValue: ['昨天心情不好',
'今天还凑合',
'希望明天心情不错',
'后天又该出差了'],
topClass: 'toActive',
bottomClass: 'show'
});
CreateTab({
topNode: 'input',
bottomNode: 'div',
topValue: ['昨天123', '今天21', '明天22'],
bottomValue: ['213123', '2222', '123123123'],
topClass: 'toActive',
bottomClass: 'show'
});
script>
body>
还有一件事！
你如果觉得我的笔记对你有用，可以来个点赞、收藏、加关注吗
有问题可以评论区或者私信问我
我是一个宁愿写bug也不愿什么都不做的小菜鸡。
