JavaScript基础

来源：互联网发布：淘宝大表情编辑：程序博客网时间：2024/06/05 12:00

函数返回值、函数传参、数组基础

函数返回值

    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;}

0 0