码迷,mamicode.com
首页 > 编程语言 > 详细

学习blus老师js(2)--深入JavaScript

时间:2017-10-15 00:30:39      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:tle   html   col   argument   数字   char   none   name   val   

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(2)--深入JavaScript

标签:tle   html   col   argument   数字   char   none   name   val   

原文地址:http://www.cnblogs.com/tenWood/p/7668966.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!