JS一起学06：数组操作、JSON、getElementsByClassName、select元素、onchange、Math对象、批量设置样式

一、数组的相关操作

1. 定义

          (1)var arr=[1,'abc',function(){alert(3333);},[333,444]];

          (2)var arr=new Array(12,5,8,9);   如果只放一个数字，要设定length

          (3)[]的性能略高，因为代码短

2. 属性----length（既可以获取，又可以设置）---例子：快速清空数组

     var a=[1,2,3,4,5,6,];

     a.length=0;

     alert(a);

（1）如果设置的length多于数组的内容，按照实际内容多少赋给length

（2）只有数组能操作length。

（3）数组可以存任意类型的值（可以嵌套、添加，覆盖，清空），但应尽量只存一种数据

3. 添加删除元素

  (1)从尾部

       push(元素)，从尾部添加-----------pop(元素)，从尾部删除

  (2)从头部

        unshift()，从头部添加------------shift()，从头部删除

   arr.push(4);     arr.pop();     arr.shift();     arr.unshift(0);

数组的添加方法二：

var arr=[];    arr[0]=33;    arr[1]=44;

arr[arr.length]=55;

arr[arr.length]=66;

arr[arr.length]=77; //从后面添加

例：

var aLi=oUl1.children;

var arr=[];

for(var i=0;i<aLi.length;i++){

    if(aLi[i].className=='lishow'){

        arr[arr.length]=aLi[i];

    }

}

alert(arr.length);

arr[0].style.background='blue';

     (3)插入删除

            删除元素：splice(起点，长度)---------------arr.splice(2,3)

            插入元素：splice(起点，长度，插入的元素1，插入元素2，……)----也可用作替换元素

                              如果只插入元素，可将长度设置为0

                              插入值是在第一个参数前面

var arr=[1,2,3,4,5,6];

arr.splice(2,3);

arr.splice(2,6,'a','b','c','d');

alert(arr);

4. 排序----sort([比较函数])，字符串排序

    var a=['left','right','top'];    a.sort();    alert(a);

    数组排序可以用这个办法：

        var a=[3,101,99,417];

        a.sort(function(n1,n2){

               return n1-n2;

        });

        alert(a);

例三：

window.onload=function(){

    var arr=[-23,-452,0,4,6,123,734,1275,98,754];

    for(var i=0;i<arr.length;i++){

        var Min=arr[i];

        var ind=i;

        for(var j=i+1; j<arr.length;j++){

            if(arr[j]<Min){

                Min=arr[j];

                ind=j;

            }

        };

        var c=arr[i];

        arr[i]=arr[ind];

        arr[ind]=c;

    }

}

5. 转换

(1) concat(数组2)连接两个数组------------a.concat(b)

    var a=[1,2,3];

    var b=[4,5,6];

    alert(a.concat(b));

(2) join(分隔符)

    用分隔符组合数组元素，生成字符串

    字符串splice

var a=[1,2,3,4];    alert(a.join('-'));

(3)reverse()：反转数组

var str='what is your name';

var arr=str.split(' ');   -----字符串转成数组

arr.reverse();--------------数组反转

str=arr.join(' ');-----------连接，并赋给字符串

alert(str);

数组--->字符串：join

字符串--->数组：split

二、JSON（对象字面量）

 1、什么是Json

    是一个对象，存储数据的一种格式

    var json{名称1：值1，名称2：值2，名称3：值3，……}

    {"name":"值1","age":"18","sex":"男"}

    加引号是标准写法。如果与后台交互，必须用标准写法

    alert(json.a);==alert(json['b']);

例子：

{"职位":"前端工程师", "年龄":"18", {大姐名字：小红，大姐职位：设计师，大姐年龄：23}，{二姐名字：小花，二姐职位：java工程师，二姐年龄：28}}

 2、json标准写法

    var json={"a":"abc","b":"dddd"}   

    最后一个值结束后，不要加逗号

 3、Json和数组

                 下标            length                循环

   json       字符串          无             for/for in都可以            无序，for in时无法保证顺序              可以存任意类型的值

  数组        数字              有            只能用for in                                                                             同上

 4、Json和for in

    在js中，一般情况下，名称可以不加引号，而且兼容

    for(var i in json){

        alert(i);   //对应每个名称

        alert(json[i]);   //对应每个值

    }

例一：利用json设置样式（一）

window.onload=function(){

    var oBtn=document.getElementById('btn1');

    var oDiv=document.getElementById('div1');

    oBtn.onclick=function(){

        for(var i in json){

            oDiv.style[i]=json[i];

        }

    }

}

利用json设置样式（二）

window.onload=function(){

    var oBox=document.getElementById('box');

    oBox.onclick=function(){

        setStyle(oBox,{

                width:'200px',

                height:'300px',

                background:'red',

                fontSize:'40px'   //最后一个值结束后不加逗号

        }); 

    }

}

function setStyle(obj,json){

    for(var name in json){

        obj.style[name]=json[name];

    }

}

改版：

oBox.onclick=function(){

    this.style.cssText='width:200px;height:300px;background:red;font-size:40px'  //会覆盖原来所有的行间样式

}

利用json设置样式（三）

window.onload=function(){

    var oDiv=document.getElementById('div1');

    var json={width:'400px', height:'400px', background:'red'};

    setStyle(oDiv,'background','red');

}

function setStyle(){

    if(arguments.length==2){

        for(var i in arguments[1]){

            arguments[0].style[i]=arguments[1][i];

        }

    }else if(arguments.length==3){

        arguments[0].style[arguments[1]]=arguments[1][i];

    }

}

获取样式，老老实实用getStyle

三、getElementsByClassName获取元素

1. document.getElementsByClassName  通过class获取元素，不管层级。 IE678：对象不支持

2.解决兼容性问题的办法一

for(var i=0;i<aLi.length;i++){

    if(aLi[i].className='lishow'){

        aLi[i].style.background='blue';

    }

}

3. 函数封装

function getByClassName(oParent,sClass){

    var arr=[];

    var aEl=oParent.getElementsByTagName('*');   //获取oParent下的所有标签

    for(var i=0;i<aEl.length;i++){

        var arr=aEl[i].className.split(' ');

        if(findInArr(arr,name)){

            result.push(aEl[i]);

        }

    }

    return arr;

}

function findInArr(arr,name){

    for(var i=0;i<arr.length;i++){

        if(arr[i].className==name){

            return true;

        }

    }

    return false;

}

第二种封装方法：

function getByClassName(oParent,sClass){

    if(oParent.getElementsByClassName){ //原生的性能好。如果认识原生的这个函数，就用原生

        return oParent.getElementsByClassName(sClass);

    };

    var arr=[];

    var aEl=oParent.getElementsByTagName('*');

    for(var i=0;i<aEl.length;i++){

        if(aEl[i].className==sClass){

           arr[arr.length]=aEl[i];

        };

    };

    return arr;

};

第三种：

function getByClass(oParent,sClass){

     if(!sClass){//如果没有传第二个参数

          var sClass=oParent;

          oParent=document;

     };

     if(document.getElementsByClassName){

          return oParent.getElementsByClassName(sClass);

     };

     var arr=[ ];

     var aEl=oParent.getElementsByTagName('*');

     for(var i=0;i<aEl.length;i++){

          if(aEl[i].className==sClass){

               arr[arr.length]=aEl[i];

          };

     };

     return arr;

};

四、select元素

直接value属性：不兼容：没加value

1、selectedIndex---当前选项的下标

alert(oSe.options[oSe.selectedIndex].value);

alert(oSe.options[oSe.selectedIndex].text);

2、options：所有选项的数组

每一个选项都有两个属性：

（1）value

（2）text

oSe.potions[oSe.selectedIndex];

3、可设置length：oSe.options.length;

4、一个从没定义过的自定义属性-----undefined

     一个从没定义过的变量------报错

五、onchange（与onfocus、onblur比较）

oSe.onchange=function(){     }---------------下拉菜单发生变化时执行代码

如果用在文本框上，需要失去焦点时，才会触发，很少用于文本框

window.onload=function(){

    var oSe=document.getElementById('se');

    oSe.onchange=function(){

        alert(this.value);

    }

}

六、Math对象

1、取整

（1）Math.ceil();---->向上取整

（2）Math.floor();---->向下取整

（2）Math.round();--->四舍五入

2、绝对值---->Math.abs();

3、开平方---->Math.sqrt();

      幂---->Math.pow(a,b);----a的b次方

4、最大值---->Math.max(a,b,c);---->a、b、c中的最大值

      最小值---->Math.min(a,b,c);

七、批量设置样式

1、css Text------可以一次设置各种样式，但是如果操作行间样式时，会覆盖其他样式   oDiv.style.cssText

2、with-----乱，影响性能

3、className----推荐

 

【本课总结】

1、什么时候加括号，什么时候不加？

（1）函数加括号会立即执行， onclick=undefined

（2）findInArr();功能性函数要加括号，让它立即执行

2、为什么加分号？

每句话结束要加

3、arguments---获取参数数组

4、封闭空间---避免重名，函数里面的东西都是局部的

5、获取非行间样式

currentStyle[attr]   getComputedStyle(obj,false)[attr]   不能读取复合样式，不能设置样式

6、批量设置样式

（1）cssText不用，会覆盖其他行间样式

（2）with不用，太乱且影响性能

（3）传json，可以用

7、数组

（1）定义  new Array(1,2,3)   

（2）length：可读取、可赋值

（3）方法：push  pop   shift   unshift      concat   join  splice   reverse sort

8、字符串

indexOf  lastIndexOf    substring   split   toUpperCse   toLowerCase    charAt

9、select

value    selectedIndex    options   text  value  tion   

10、date

0  上个月最后一天

35   把多余天数自动计入下个月

11、Math

ceil   round   floor   abs  sqrt   pow   max   min    random