js最基础知识回顾5（数组,JSON,getByClass,select,Math对象）
一、数组的相关操作
1. 定义
(1)var arr=[1,'abc',function(){alert(3333);},[333,444]];
(2)var arr=new Array(12,5,8,9); 如果只放一个数字，要设定length
(3)[]的性能略高，因为代码短
2. 属性----length（既可以获取，又可以设置）---例子：快速清空数组
var a=[1,2,3,4,5,6,];
a.length=0;
alert(a);
（1）如果设置的length多于数组的内容，按照实际内容多少赋给length
（2）只有数组能操作length。
（3）数组可以存任意类型的值（可以嵌套、添加，覆盖，清空），但应尽量只存一种数据
3. 添加删除元素
(1)从尾部
push(元素)，从尾部添加-----------pop(元素)，从尾部删除
(2)从头部
unshift()，从头部添加------------shift()，从头部删除
arr.push(4); arr.pop(); arr.shift(); arr.unshift(0);
数组的添加方法二：
var arr=[]; arr[0]=33; arr[1]=44;arr[arr.length]=55;arr[arr.length]=66;arr[arr.length]=77; //从后面添加
(3)插入删除
删除元素：splice(起点，长度)---------------arr.splice(2,3)
插入元素：splice(起点，长度，插入的元素1，插入元素2，……)----也可用作替换元素
如果只插入元素，可将长度设置为0
插入值是在第一个参数前面
var arr=[1,2,3,4,5,6];arr.splice(2,3);arr.splice(2,0,'a','b','c','d');alert(arr);
4. 排序----sort([比较函数])，字符串排序
var a=['left','right','top']; a.sort(); alert(a);
数组排序可以用这个办法：
var a=[3,101,99,417];
a.sort(function(n1,n2){
return n1-n2;
});
alert(a);
例三：window.onload=function(){var arr=[-23,-452,0,4,6,123,734,1275,98,754];for(var i=0;i<arr.length;i++){var Min=arr[i]; //假设为最小值var iMinIndex=i; //最小值对应的下标for(var j=i+1; j<arr.length;j++){if(arr[j]<Min){Min=arr[j];iMinIndex=j;}};var c=arr[i];arr[i]=arr[iMinIndex];arr[iMinIndex]=c;}alert(arr);}模拟数组排序：var arr=[2,45,78,12,46,1];
function findInMin(arr,start){ //从第start位往后找最小值
var iMin=arr[start];//假设第start个数为最小值；
var iMinIndex=start;//假设最小值的下标为start；
for(var i=start;i<arr.length;i++){
if(iMin>arr[i]){
iMin=arr[i];
iMinIndex=i;
}
}
return iMinIndex;
}
for(var i=0;i<arr.length;i++){
var n=findInMin(arr,i); //i值不能固定；
var tem;
tem=arr[n]; //最小值arr[n]与arr[i]调换位置
arr[n]=arr[i];
arr[i]=tem;
}
alert(arr);
5. 转换
(1) concat(数组2)连接两个数组------------a.concat(b)
var a=[1,2,3];
var b=[4,5,6];
alert(a.concat(b));
(2) join(分隔符)
用分隔符组合数组元素，生成字符串
var a=[1,2,3,4]; alert(a.join('-'));
(3)reverse()：反转数组
var str='what is your name';
var arr=str.split(' '); -----字符串转成数组
arr.reverse();--------------数组反转
str=arr.join(' ');-----------连接，并赋给字符串
alert(str);
数组--->字符串：join
字符串--->数组：split
二、JSON（对象字面量）
1、什么是Json
是一个对象，存储数据的一种格式
var json{名称1：值1，名称2：值2，名称3：值3，……}
{"name":"blue","age":"18","sex":"男"}
加引号是标准写法。如果与后台交互，必须用标准写法
alert(json.a);==alert(json['a']);
例子：
{"职位":"前端工程师", "年龄":"18", {大姐名字：小红，大姐职位：设计师，大姐年龄：23}，{二姐名字：小花，二姐职位：java工程师，二姐年龄：28}}
2、json标准写法
var json={"a":"abc","b":"dddd"}
最后一个值结束后，不要加逗号
3、Json和数组
下标 length 循环 顺序
json 字符串 无 只能用for in 无序，for in时无法保证顺序 可以存任意类型的值
数组 数字 有 for/for in都可以 有序 同上
4、Json和for in
在js中，一般情况下，名称可以不加引号，而且兼容
for(var i in json){
alert(i); //对应每个名称
alert(json[i]); //对应每个值
}
利用json设置样式（一）
window.onload=function(){
var oBox=document.getElementById('box');
oBox.onclick=function(){
setStyle(oBox,{
width:'200px',
height:'300px',
background:'red',
fontSize:'40px' //最后一个值结束后不加逗号
});
}
}
function setStyle(obj,json){
for(var name in json){
obj.style[name]=json[name];
}
}
改版：
oBox.onclick=function(){
this.style.cssText='width:200px;height:300px;background:red;font-size:40px' //会覆盖原来所有的行间样式
}
利用json设置样式（二）
window.onload=function(){
var oDiv=document.getElementById('div1');
var json={width:'400px', height:'400px', background:'red'};
setStyle(oDiv,'background','red');
}
function setStyle(){
var obj=arguments[0];
if(arguments.length==3){
var name=arguments[1];
var value=arguments[2];
obj.style[name]=value;
}else{
var json=arguments[1];
for(var name in json){
obj.style[name]=json[name];
}
}
}
获取样式，老老实实用getStyle
三、getElementsByClassName获取元素
1. document.getElementsByClassName 通过class获取元素，不管层级。 IE8--：对象不支持
2. 函数封装
function findInArr(n,arr){
for(var i=0;i<arr.length;i++){
if(n==arr[i]){
return true;
}
}
return false;
}
function getByClass(oParent,sClass){
if(oParent.getElementsByClassName);
{return oParent.getElementsByClassName(sClass);}
else{
var aEle=oParent.getElementsByTagName('*');
var arr=[];
for(var i=0;i<aEle.length;i++){
var tem=aEle[i].className.split(' ');
if(findInArr(sClass,tem)){
arr.push(aEle[i]);
}
}
return arr;
}
}
for(var i=0;i<arr.length;i++){
if(n==arr[i]){
return true;
}
}
return false;
}
function getByClass(oParent,sClass){
if(oParent.getElementsByClassName);
{return oParent.getElementsByClassName(sClass);}
else{
var aEle=oParent.getElementsByTagName('*');
var arr=[];
for(var i=0;i<aEle.length;i++){
var tem=aEle[i].className.split(' ');
if(findInArr(sClass,tem)){
arr.push(aEle[i]);
}
}
return arr;
}
}
四、select元素
直接value属性：不兼容：没加value
1、selectedIndex---当前选项的下标
var aO=oS1.options; //选中oS1下面所有的option;
var option=new Option('河北','hb');
oS1.add(option);//增加一个option
oS1.remove(1);//删除下标为1的option
var option=new Option('河北','hb');
oS1.add(option);//增加一个option
oS1.remove(1);//删除下标为1的option
oS1.options.selectedIndex;//选中的那一项
alert(oS1.options[oS1.selectedIndex].innerHTML);//当前选中的option文本的内容1；
alert(oS1.options[oS1.selectedIndex].text);//当前选中的option文本的内容2；
2、options：所有选项的数组
每一个选项都有两个属性：
（1）value
（2）text
3、可设置length：oS1.options.length;
4、一个从没定义过的自定义属性-----undefined
一个从没定义过的变量------报错
五、onchange（与onfocus、onblur比较）
oSe.onchange=function(){ }---------------下拉菜单发生变化时执行代码
如果用在文本框上，需要失去焦点时，才会触发，很少用于文本框
window.onload=function(){
var oSe=document.getElementById('se');
oSe.onchange=function(){
alert(this.value);
}
}
六、Math对象
1、取整
（1）Math.ceil();---->向上取整
（2）Math.floor();---->向下取整
（2）Math.round();--->四舍五入
2、绝对值---->Math.abs();
3、开平方---->Math.sqrt();
幂---->Math.pow(a,b);----a的b次方
4、最大值---->Math.max(a,b,c);---->a、b、c中的最大值
最小值---->Math.min(a,b,c);
七、批量设置样式
1、css Text------可以一次设置各种样式，但是如果操作行间样式时，会覆盖其他样式 oDiv.style.cssText
2、with-----乱，影响性能
3、className----推荐
【本课总结】
1、什么时候加括号，什么时候不加？
（1）函数加括号会立即执行， onclick=undefined
（2）findInArr();功能性函数要加括号，让它立即执行
2、为什么加分号？
每句话结束要加
3、arguments---获取参数数组
4、封闭空间---避免重名，函数里面的东西都是局部的
5、获取非行间样式
currentStyle[attr] getComputedStyle(obj,false)[attr] 不能读取复合样式，不能设置复合样式
6、批量设置样式
（1）cssText不用，会覆盖其他行间样式
（2）with不用，太乱且影响性能
（3）传json，可以用
7、数组
（1）定义 new Array(1,2,3)
（2）length：可读取、可赋值
（3）方法：push pop shift unshift concat join splice reverse sort
8、字符串
indexOf lastIndexOf substring split toUpperCse toLowerCase charAt
9、select
value selectedIndex options
10、date
0 上个月最后一天
35 把多余天数自动计入下个月
11、Math
ceil round floor abs sqrt pow max min random
人生如戏，或实力或演技
