函数返回值、函数传参、数组基础
- 函数返回值
function show(){
return 'asdf';
}
var a = show();
alert(a);
alert(a)与alert(show())的结果相同
将字符串asdf返回到show()函数中,同数字
function show(a,b){
return a+b;
};
alert(show(3,5));
若return后年没有值或函数中没有return,就相当于underfined没有定义
一个函数应该只有一个返回值(除json)
- 函数传参(arguments)
function sum(){
var result = 0;
for (var i = 0; i < arguments.length; i++) {
result += arguments[i];
}
return result;
}
alert(sum(11,45,1,2,6,8,6,2,6,6,2,5,9,6,9));
argument相当于一个数组,无论sum()函数中有多少元素,都能计算出结果
css(oDiv,’width’) 获取样式
css(oDiv,’width’,’200px’) 设置样式
传统方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function css (){
if (arguments.length == 2) {
return arguments[0].style[arguments[1]];//获取样式
} else {
arguments[0].style[arguments[1]] = arguments[2];
}
}
window.onload = function(){
var oDiv = document.getElementById('div1');
//alert(css(oDiv,'width'));
css(oDiv,'background','blue');
}
</script>
</head>
<body>
<div id="div1" style="width:200px;height:200px;background:red;"></div>
</body>
</html>
升级版:
function css (obj, name, value){
if (arguments.length == 2) {
return obj.style[name];//获取样式
} else {
obj.style[name] = value;
}
}
window.onload = function(){
var oDiv = document.getElementById('div1');
//alert(css(oDiv,'width'));
css(oDiv,'background','blue');
}
获取非行间样式
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
alert(oDiv.currentStyle.width);
}
</script>
alert(oDiv.currentStyle.width);
可以获得非行间行间的样式,但是不兼容,只能在高版IE下运行
在火狐、Chrome下可以使用alert(getComputedStyle(oDiv,null).width);
兼容方法:
if (oDiv.currentStyle) {
alert(oDiv.currentStyle.width);
}else{
alert(getComputedStyle(oDiv,null).width);
}
由此可以解决兼容性问题!
为了更快地编写代码,我们可以将其分装成函数:
function getStyle(obj, name){
if (obj.currentStyle) {
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,null)[name];
}
}
只能获取单一样式:width、height等
不能获取复合样式:background、border等(可使用backgroundColor等)
- 数组基础
数组定义方法:
1、var a = [1,2,3];
2、var a = new Array(1,2,3);
两种方法相同
length不仅可以获取,也可以设置
例如原数组有10个元素,alert(XXX.length)天出结果为10;若果设置XXX.length=7,则数组会清空之后的元素
一个数组里面只有一个类型
在数组中加入元素:
XXX.push(元素)
在数组最后加入元素
XXX.unshift(元素)
在数组头部加入元素
在数组中删除元素:
XXX.pop()
在数组最后删除元素
XXX.shift()
在数组头部删除元素
splice
删除元素:splice(起点,长度)——数组中的下标为起点
插入元素:splice(起点,长度,元素)——数组中的下标为起点
var arr = [1,2,3,4,5,6];
arr.splice(2,3);
alert(arr);
弹出结果为1,2,6
arr.splice(2,0)表示数组不发生变化;arr.splice(2,0,’a’,’b’);弹出结果为1,2,a,b,3,4,5,6,从下标位置为2的地方插入a,b两个元素;arr.splice(2,2,’a’,’b’);弹出结果为1,2,a,b,5,6
contact
字符串的连接
var a = [1,2,3];
var b = [4,5,6];
alert(a.concat(b));
弹出结果为1,2,3,4,5,6
若将alert(a.concat(b))改为alert(b.concat(a))
弹出结果为4,5,6,1,2,3
join
数组元素间的分隔符
var a = [1,2,3];
alert(a.join('-'));
弹出结果为1-2-3
sort
排序数组
字符串排列:
var a = ['float','width','height','top','zoom','left'];
a.sort();
alert(a);
输出结果按照字母排列顺序排列
数字排列:
var b = [8,45,12,16,21,79,112];
b.sort(function (n1,n2){
if (n1<n2) {
return -1;
}else if(n1>n2) {
return 1;
}else {
return 0;
}
});
alert(b);
能能出正确的数字排列
sort只能对字符串进行排列;对数字排列需要加入函数
也可以写成
b.sort(function (n1,n2){
if (n1<n2) {
return -1;
}else if(n1>n2) {
return 1;
}else {
return 0;
}
});
b.sort(function (n1,n2){return n1-n2;}