zoukankan      html  css  js  c++  java
  • 学习blus老师js(2)--深入JavaScript

    1.函数传参                          

    可变参(不定参):arguments
    参数的个数可变,参数数组
     
    例1.求和
    求所有参数的和
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script>
    function sum()
    {
        //alert(arguments.length);
        //alert(arguments[0]);
        //arguments
        
        var result=0;
        
        for(var i=0;i<arguments.length;i++)
        {
            result+=arguments[i];
        }
        
        return result;
    }
    
    alert(sum(12, 6, 8, 6, 8, 6, 8, 6, 8, 6, 8, 6, 8, 6, 8, 6, 8, 6, 8, 6));
    </script>
    </head>
    
    <body>
    </body>
    </html>
    View Code
     
    例子2:CSS函数
    判断arguments.length
    给参数取名,增强可读性
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script>
    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', 'green');
    };
    </script>
    </head>
    
    <body>
    <div id="div1" style="200px; height:200px; background:red;">
    </div>
    </body>
    </html>
    View Code

     2.取非行间样式:

    取非行间样式(不能用来设置):

    obj.currentStyle[attr]        //IE
    getComputedStyle(obj, false)[attr]  //chrome / FF
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    #div1 {200px; height:200px; background:red;}
    </style>
    <script>
    function getStyle(obj, name)
    {
        if(obj.currentStyle)                    //IE
        {
            return obj.currentStyle[name];
        }
        else                                    //chrome / FF
        {
            return getComputedStyle(obj, false)[name];
        }
    }
    
    window.onload=function ()
    {
        var oDiv=document.getElementById('div1');
            
        alert(getStyle(oDiv, 'backgroundColor'));
    };
    </script>
    </head>
    
    <body>
    <div id="div1">
    </div>
    </body>
    </html>
    View Code

    但是要注意上面getStyle()存在的问题,这个只能取单一样式,如果要取复合样式,如上面的background,要使用'backgroundColor'

    3.数组基础                                

     1)添加、删除元素

     添加
    • push(元素),从尾部添加
    • unshift(元素),从头部添加
    删除
    • pop(),从尾部弹出
    • shift(),从头部弹出

    2)插入、删除

    splice
    splice(开始, 长度,元素…)
    先删除,后插入
    • 删除
        splice(开始,长度)
    • 插入
        splice(开始, 0, 元素…)
    • 替换
    <script>
    var arr=[1,2,3,4,5,6];
    
    //删除:splice(起点, 长度)
    //arr.splice(2, 3);
    
    //插入:splice(起点, 长度, 元素...);
    //arr.splice(2, 0, 'a', 'b', 'c');
    
    arr.splice(2, 2, 'a', 'b');
    
    alert(arr);
    </script>
    View Code

     3)排序、转换

    排序
    • sort([比较函数]),排序一个数组
        排序一个字符串数组
        排序一个数字数组
    转换类
    • concat(数组2)
        连接两个数组
    • join(分隔符)
        用分隔符,组合数组元素,生成字符串
        字符串split
    <script>
    var arr=['float', 'width', 'alpha', 'zoom', 'left'];
    
    arr.sort();
    
    alert(arr);
    </script>
    View Code
    <script>
    var arr=[12, 8, 99, 19, 112];
    
    arr.sort(function (n1, n2){
        return n1-n2;
        /*if(n1<n2)
        {
            return -1;
        }
        else if(n1>n2)
        {
            return 1;
        }
        else
        {
            return 0;
        }*/
    });
    
    alert(arr);
    </script>
    View Code

    4.

     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    ----------
  • 相关阅读:
    201771010117马兴德 实验二 Java基本程序设计(1)
    马兴德201771010117《面向对象程序设计(java)》第一周学习总结
    李晓菁201771010114《面向对象程序设计(Java)》第一周学习总结
    狄慧201771010104《面向对象程序设计(java)》第二周学习总结
    狄慧201771010104《面向对象程序设计(java)》第一周学习总结
    获奖感言
    王之泰201771010131《面向对象程序设计(java)》第十周学习总结
    王之泰201771010131《面向对象程序设计(java)》第九周学习总结
    王之泰201771010131《面向对象程序设计(java)》第八周学习总结
    王之泰201771010131《面向对象程序设计(java)》第七周学习总结
  • 原文地址:https://www.cnblogs.com/tenWood/p/7668966.html
Copyright © 2011-2022 走看看