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.

     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    ----------
  • 相关阅读:
    bzoj 4012: [HNOI2015]开店
    POJ 1054 The Troublesome Frog
    POJ 3171 Cleaning Shifts
    POJ 3411 Paid Roads
    POJ 3045 Cow Acrobats
    POJ 1742 Coins
    POJ 3181 Dollar Dayz
    POJ 3040 Allowance
    POJ 3666 Making the Grade
    洛谷 P3657 [USACO17FEB]Why Did the Cow Cross the Road II P
  • 原文地址:https://www.cnblogs.com/tenWood/p/7668966.html
Copyright © 2011-2022 走看看