学习blus老师js--深入JavaScript

Posted 有点懒惰的大青年

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学习blus老师js--深入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="width: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 {width: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.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
----------

以上是关于学习blus老师js--深入JavaScript的主要内容,如果未能解决你的问题,请参考以下文章

学习blus老师js--定时器的使用

深入理解JS this,作用域

深入学习JavaScript系列——对象/继承

JavaScript学习---JavaScript深入学习

javascript深入浅出——学习笔记

青训营月影老师告诉我写好JavaScript的三大原则之——各司其责