JavaScript知识点积累

Calibri (西文正文)

1. arguments

fn1(1,2,3); //实参——实际传递的参数
	//function fn1(a,b,c){	//形参——形式上传递的参数，abc这些名称代表123
	function fn1(){
		arguments=>[1,2,3]——实参的集合
		alert(arguments); //object arguments
		alert(arguments.length);//3 长度
		alert(arguments[arguments.length-1]);//弹出参数的最后一个值	
	}
	//当函数的参数个数无法确定的时候，用arguments

2. getComputedStyle()

alert(getComputedStyle($(div1)).width);

getComputedStyle是获取计算机（浏览器）计算后的样式,但是IE6,7，8不兼容

3. currentStyle

alert($('div1').currentStyle.width);//只兼容IE浏览器，不兼容标准浏览器

4. 兼容获取元素的样式

function getStyle(obj,attr){
	return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}

5. cssText
   设置某元素的style样式

$("div1").style.cssText="width:300px";
$("div1").style.width="500px";

6. 定时器：时间概念

var timer=setInterval(函数，毫秒);	=>重复执行
	clearInterval(timer);		=>清除

var timer=setTimeout(函数，毫秒);		=>只执行一次（炸弹）


clearTimeout(timer);	=>清除定时器

7. 页面滚动元素

页可见区域宽： document.body.clientWidth; 
网页可见区域高： document.body.clientHeight; 

网页可见区域宽： document.body.offsetWidth   (包括边线的宽); 
网页可见区域高： document.body.offsetHeight (包括边线的宽); 

网页正文全文宽： document.body.scrollWidth; 
网页正文全文高： document.body.scrollHeight;

网页被卷去的高： document.body.scrollTop; 
网页被卷去的左： document.body.scrollLeft; 

网页正文部分上： window.screenTop; 
网页正文部分左： window.screenLeft; 

屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width; 

屏幕可用工作区高度： window.screen.availHeight;

上下滚动实例：
JS8-函数返回值、定时器基础——作业-按钮控制商品图片上下滚动.html
oUl.offsetTop:某元素与顶部的偏移量

timer=setInterval(function(){
			if(oUl.offsetTop<=oDiv.offsetHeight-oUl.offsetHeight){
				clearInterval(timer);
			}else{
				oUl.style.top=(oUl.offsetTop-3)+"px";
			}
},30);

8. 系统时间

var myTime = new Date();
var iYear = myTime.getFullYear();
var iMoth = myTime.getMonth()+1;	//月是从0开始计算的
var iDay = myTime.getDate();	//20日
var iWeek = myTime.getDay();	//星期几
var iHours = myTime.getHours();
var iMinutes = myTime.getMinutes();
var iSec = myTime.getSeconds();

if(iWeek === 0){iWeek = "星期日";};
if(iWeek === 1){iWeek = "星期一";};
if(iWeek === 2){iWeek = "星期二";};
if(iWeek === 3){iWeek = "星期三";};
if(iWeek === 4){iWeek = "星期四";};
if(iWeek === 5){iWeek = "星期五";};
if(iWeek === 6){iWeek = "星期六";};



var str='';
str=iYear+"年"+iMoth+"月"+iDay+"日 "+iWeek+" 
"+iHours+":"+iMinutes+":"+iSec;
alert(str);	//2015年4月20日星期一 15:20:10

9. 倒计时
   倒计时：未来的时间点(不变)—现在的时间点(在变)

var t = Math.floor((iNew-iNow)/1000);
天： Math.floor(t/86400);
时:	Math.floor(t%86400/3600);
分:	Math.floor(t%86400/3600/60);
秒:	Math.floor(t%60);
数字日期形式：new Date(2013,4,1,9,48,12)
字符串形式：new Date('June 10,2013 12:12:12')
注意月份。

var iNow = new Date();
var iNew = new Date(2015,3,22,10,31,0);//2015年4月22日9:55:0
var t = Math.floor((iNew-iNow)/1000);


var str= Math.floor(t/86400)+'天'+Math.floor(t%86400/3600)+'时
'+Math.floor(t%86400/3600/60)+'分'+Math.floor(t%60)+'秒'; 
alert(str);

10. 字符串方法

var str='妙味课堂';
alert(str.length);//包括字符里面的空格
alert( str.charAt( 2 ) ); //课
alert( str.charCodeAt() ); //默认是下标为0的编码值: 22937
alert( str.charCodeAt(1) ); //21619
alert( String.fromCharCode( 22937 ) );//秒
alert( String.fromCharCode( 22937,21619 ) ); //妙味

常用ASCII编码值：
0~9	48-57
a~z		97-122
A~Z	65-90



var str = 'www.miaov.com/2013wwww';
alert(str.indexOf('m'));  //4
alert(str.indexOf('m',5));  //从第5位开始 查找m的位置	输出12
alert(str.indexOf('m',500));  //-1	当找不到的时候，输出-1
alert(str.indexOf('x'));  //-1
alert(str.indexOf('ww'));  //0
alert(str.indexOf('ww',2)); //18

var str = '妙味课堂是一支独具特色的IT培训团队，妙味反对传统';
alert(str.indexOf('妙味'));	 //0	从左到右，从开始到最后
alert(str.lastIndexOf('妙味'));	 //39	从右到左，从最后到开始
alert(str.lastIndexOf('妙味',38));	//19	
alert(str.lastIndexOf('妙味',-2));	//0	如果第二参数为负数，自动作为0来处

alert(str.substring(0,2)); 	//妙味	从第0位开始输出2位数
alert(str.substring(4));	//从第4位数开始到最后
alert(str.substring(2,0));	//自动检测两个数的大小，把大的数放在后面，小的数放在前面
alert(str.substring());	  //默认从0位开始到最后
alert(str.substring(-3,2));	 //不接收负数，当0处理
alert(str.substring(2,-3));	 //自动检测改写为	(0,2)

alert(str.slice(2,0));	//不会输出任何数	不会自动检测两个数的大小
alert(str.slice(-2));	//输出 字符串的从后面数，两个字符串
alert(str.slice(-4,-2));	//从后面数，第4位字符串开始 数两位字符串


var str = 'www.MIaoV.com';
alert(str.toUpperCase());
alert(str.toLowerCase());


var str = 'www.miaov.com';
var arr = str.split('.');	//根据点分割成三个字符串数组，['www','miaov','com']
alert(arr[1]);

var str = 'leo';
alert(str.split());	//['leo']
alert(str.split('')); 	//['l','e','0']

var str = '2013-2-29-23-07';
alert(str.split('-'));	//['','','','','','']
alert(str.split('-',3));  //['2013','2','29']保留前面3段


var arr = ['aa','bb','cc'];
alert(typeof arr);  //object
alert(typeof arr.join());  //string  把数组转换成字符串
alert(arr.join('-'));  //aa-bb-cc
alert(arr.join(''));  //aabbcc

11. 有关json

(1) Json格式

var json2 = { 'name':'miaov' };
json2.name = '妙味';
json2['name'] = 'miaov';
alert( json2.name );
alert( json2['name'] );

(2) For-in 与for循环

var json5 = { 
			'url' : ['img/1.png','img/2.png','img/3.png','img/4.png'],
			'text' : ['图片一','图片二','图片三','图片四'],
};
for ( var attr in json5 ){
	for ( var i = 0; i < json5[attr].length; i++ ){
		alert(json5[attr][i]);	
	}	
}

var arr = ['a','b','c'];
for ( var i in arr){
	alert(i);	//弹出下标
}
注意：数组可以用for循环，也可以用for-in,
但是json没有长度，因此只能用for-in

12. 有关数组
    (1) 数组的格式

var arr = new Array(1,2,3);
var arr = new Array(4);	//当这里写一个数字的时候，表示长度为4
alert(arr.length);

var arr = ['aa',2,3];
alert(arr.length);
arr.length = 1;	//数组长度赋值为1，那么数组就只留第一个值
arr.length = 0;  //数组长度赋值为0，表示清空数组；字符串的长度不能写
alert(arr);

(2) 数组有关字符方法

var arr = [1,2,3];
alert( arr.push('abc') ); //返回值：数组的长度
alert( arr.unshift('bbbb') ); //在数组前面压入，返回值是：数组的长度
alert( arr.unshift(0) ); //IE6,7不支持unshift的返回值
alert( arr );

var arr = ['TM','ZY','ZS','DP','LEO'];
alert(arr.pop()); //默认删除数组的最后一个值；返回值：删除的值
alert(arr.shift()); //删除数组第一个值；返回值：删除的值
alert(arr);

arr.unshift(arr.pop()); //往后走
arr.push(arr.shift());//往前走


var arr = ['T1','Z2','Z3','D4','L5'];
alert(arr.splice(0,2));  //第0位开始，删除两个值 ,返回值：删除的值
arr.splice(0,2,'莫涛');  //第0位开始，两个值替换成'莫涛'
arr.splice(2,0,'钟意媳妇');  //在索引值2的位置添加一个值
arr.splice(2,1,'钟意媳妇');  //在索引值2的位置替换一个值为 '钟意媳妇~~'
alert(arr);

数组去重
var arr = [30,45,30,39,30];
for (var i = 0; i<arr.length; i++){	// i= 0
	for ( var j = i+1; j<arr.length; j++){ //j = 2
		if( arr[j] == arr[i] ){ // 30 = 30
			arr.splice(j,1); //[30,45,39,30]
			j--;	//j =1
		}
	}
}
alert(arr);

排序
var arr = ['d','c','a','e','b'];
arr.sort();  //a b c d e 是按照　ACSII码排序的

var arr2 = [4,3,5,76,2,8];
arr2.sort();  //2,3,4,5,,76,8


比较函数
arr2.sort(function(a,b){
	return a - b;  //从小到大
	//return b - a;  //从大到小	
});

alert(arr2);  //2,3,4,5,,8,76


var arrWidth = ['345px','23px','100px','10000px'];
arrWidth.sort(function(a,b){
	return parseInt(a) - parseInt(b);	
});
alert(arrWidth);


随机排序
var arr = [1,2,3,4,5,6,7,8];
alert( Math.random() ); //0~1的小数随机函数
arr.sort(function(a,b){
	return Math.random() - 0.5;	
});
alert( arr );

随机函数
//50~100
var x = 50;
var y = 100;
alert( Math.round( Math.random()*(y-x) + x ) );

// 1~x
alert( Math.ceil( Math.random()*x ) );


var arr = [1,2,3];
var arr1 = [4,5,6];
var arr2 = [7,8,9];
alert( arr.concat( arr1,arr2 ) );


var arr1 = [1,2,3];
arr1.reverse();
alert(arr1); //3,2,1

//面试题
var str = 'abcdef';
alert(str.split('').reverse().join(''));