zoukankan      html  css  js  c++  java
  • js最基础知识回顾5(数组,JSON,getByClass,select,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; //从后面添加
         (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,0,'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 iMinIndex=i;     //最小值对应的下标
            for(var j=i+1; j<arr.length;j++){
                if(arr[j]<Min){
                    Min=arr[j];
                    iMinIndex=j;
                }
            };
            var c=arr[i];
            arr[i]=arr[iMinIndex];
            arr[iMinIndex]=c;
        }
            alert(arr);
    }
     
    模拟数组排序:
         var arr=[2,45,78,12,46,1];
                function findInMin(arr,start){    //从第start位往后找最小值
                    var iMin=arr[start];//假设第start个数为最小值;
                    var iMinIndex=start;//假设最小值的下标为start;
                    for(var i=start;i<arr.length;i++){   
                    if(iMin>arr[i]){
                        iMin=arr[i];
                        iMinIndex=i;
                    }
                }
                    return iMinIndex;
                }
                for(var i=0;i<arr.length;i++){
                    var n=findInMin(arr,i);     //i值不能固定;
                    var tem;
                    tem=arr[n];       //最小值arr[n]与arr[i]调换位置
                    arr[n]=arr[i];
                    arr[i]=tem;
                }
                alert(arr);
    5. 转换
    (1) concat(数组2)连接两个数组------------a.concat(b)
        var a=[1,2,3];
        var b=[4,5,6];
        alert(a.concat(b));
    (2) join(分隔符)
        用分隔符组合数组元素,生成字符串
        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":"blue","age":"18","sex":"男"}
        加引号是标准写法。如果与后台交互,必须用标准写法
        alert(json.a);==alert(json['a']);
    例子:
    {"职位":"前端工程师", "年龄":"18", {大姐名字:小红,大姐职位:设计师,大姐年龄:23},{二姐名字:小花,二姐职位:java工程师,二姐年龄:28}}
     2、json标准写法
        var json={"a":"abc","b":"dddd"}   
        最后一个值结束后,不要加逗号
     3、Json和数组
                     下标            length                循环                                 顺序
       json       字符串          无             只能用for in                  无序,for in时无法保证顺序              可以存任意类型的值
      数组        数字              有            for/for in都可以            有序                                                               同上
     4、Json和for in
        在js中,一般情况下,名称可以不加引号,而且兼容
        for(var i in json){
            alert(i);   //对应每个名称
            alert(json[i]);   //对应每个值
        }
    利用json设置样式(一)
    window.onload=function(){
        var oBox=document.getElementById('box');
        oBox.onclick=function(){
            setStyle(oBox,{
                    '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='200px;height:300px;background:red;font-size:40px'  //会覆盖原来所有的行间样式
    }
    利用json设置样式(二)
    window.onload=function(){
        var oDiv=document.getElementById('div1');
        var json={'400px', height:'400px', background:'red'};
        setStyle(oDiv,'background','red');
    }
    function setStyle(){
        var obj=arguments[0];
        if(arguments.length==3){
           var name=arguments[1];
      var value=arguments[2];
      obj.style[name]=value;
        }else{
      var json=arguments[1];
      for(var name in json){
       obj.style[name]=json[name];
        }  
       }
      }
    获取样式,老老实实用getStyle
    三、getElementsByClassName获取元素
    1. document.getElementsByClassName  通过class获取元素,不管层级。 IE8--:对象不支持
    2. 函数封装
       function findInArr(n,arr){
                    for(var i=0;i<arr.length;i++){
                        if(n==arr[i]){
                            return true;
                        }
                    }
                    return false;
                }
              function getByClass(oParent,sClass){
                    if(oParent.getElementsByClassName);
                    {return oParent.getElementsByClassName(sClass);}
                    else{
                        var aEle=oParent.getElementsByTagName('*');
                        var arr=[];
                        for(var i=0;i<aEle.length;i++){
                        var tem=aEle[i].className.split(' ');
                        if(findInArr(sClass,tem)){
                            arr.push(aEle[i]);
                        }
                    }
                    return arr;
                    }
                }

    四、select元素
    直接value属性:不兼容:没加value
    1、selectedIndex---当前选项的下标
    var aO=oS1.options;  //选中oS1下面所有的option;
    var option=new Option('河北','hb');
    oS1.add(option);//增加一个option
    oS1.remove(1);//删除下标为1的option
    oS1.options.selectedIndex;//选中的那一项
    alert(oS1.options[oS1.selectedIndex].innerHTML);//当前选中的option文本的内容1;
    alert(oS1.options[oS1.selectedIndex].text);//当前选中的option文本的内容2;
    2、options:所有选项的数组
    每一个选项都有两个属性:
    (1)value
    (2)text
    3、可设置length:oS1.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    
    10、date
    0  上个月最后一天
    35   把多余天数自动计入下个月
    11、Math
    ceil   round   floor   abs  sqrt   pow   max   min    random
  • 相关阅读:
    代理模式和装饰模式的理解
    Mysql常用命令
    java动态代理(JDK和cglib)
    MyEclipse中SVN使用步骤
    ActionContext和ServletActionContext小结
    java和unicode
    Win7下telnet使用
    MyEclipse8.5安装SVN插件
    linux常用命令(基础)
    选择TreeView控件的树状数据节点的JS方法
  • 原文地址:https://www.cnblogs.com/yang0902/p/5700406.html
Copyright © 2011-2022 走看看