javascript:内置对象学习笔记二

前言：刚刚整理博客，发现比较靠前的一篇文章的发布状态赫然“未发布”，原来是“javascript:内置对象学习笔记一”的续篇，整理好的日期距今数月，忘了发了，汗。
四：Array对象
1、Array的初始化
一维数组：

/*一维数组
var studentsArr=new Array();
var studentsArr=new Array(len);
var studentsArr=new Array([student0,[student1,[student2,]]]);
*/

//实例
var studentsArr=new Array(3);
studentsArr[0]="jeff wong"；
studentsArr[1]="jeffery zhao"；
studentsArr[2]="terry lee"；

for(var i=0;i<studentsArr.length;i++){
  alert("student name:"+studentsArr[i]);
}

二维数组：

/* 二维数组 */
var studentsArr=new Array(3);
studentsArr[0]=new Array("jeff wong","beijing");
studentsArr[1]=new Array("jeffery zhao","shanghai");
studentsArr[2]=new Array("terry lee","tianjin");


for(var i=0;i<studentsArr.length;i++){
alert("student name:"+studentsArr[i][0]+",address:"+studentsArr[i][1]);
}

2、常用方法
（1）push()：将参数添加到数组的结尾

//push将参数添加到数组的结尾

var objArr=new Array("jeff wong");
for(var i=0;i<5;i++){
  objArr.push(i); // 将5个整数添加到数组的结尾
}
for(var i=0;i<objArr.length;i++){
alert(objArr[i]);
}

（2）、pop()：返回数组最后一个元素的值，并将length属性减１，即返回后立即丢失最后一个元素。

var objArr=new Array("jeff wong");
for(var i=0;i<5;i++){
  objArr.push(i); // 将5个整数添加到数组的结尾
}
alert(objArr.pop()); //去掉数组的最后一个元素
for(var i=0;i<objArr.length;i++){
alert(objArr[i]); //这里没有4了
}

（3）、shift()：和pop类似，但它是移去数组的第一个元素，并返回这个元素的值

var objArr=new Array("jeff wong");
for(var i=0;i<5;i++){
  objArr.push(i); // 将5个整数添加到数组的结尾
}
alert(objArr.shift()); //去掉数组的第一个元素
for(var i=0;i<objArr.length;i++){
alert(objArr[i]); //这里没有"jeff wong"了
}

(4)、unshift(item1[,item2[,...]]])：将参数列表插入到数组的开头，和push方法类型，但push方法是将元素添加到数组的结尾。

var objArr=new Array("jeff wong");
for(var i=0;i<5;i++){
  objArr.push(i); // 将5个整数添加到数组的结尾
}
objArr.unshift("terry lee"); //将参数列表插入到数组的开头
for(var i=0;i<objArr.length;i++){
alert(objArr[i]); 
}

（5）、sort(fucCompare)：根据fucCompare定义的大小比较函数，对一个数组进行排序。函数fucCompare必须接受两个参数element1,element2,如果需要element1排在element2之前，应该返回一个负数；如果需要element1排在element2之后，应该返回一个正数，如果两个数平等对待（即保持原有顺序）则返回０。当省略fucCompare时，则元素按照字典顺序排列。如：对定义的比较函数fucCompare: function fucCompare(e1,e2){return e1-e2;}那么，[3,4,2,7].sort(fucCompare)将得到[2,3,4,7].

// 数字降序排列

function funcCompare(oNum,oNum1){
return oNum-oNum1;
}

var objArr=new Array(3,7,2,1);
objArr.sort(funcCompare);
for(var i=0;i<objArr.length;i++){
alert(objArr[i]); 
}

对于字符串排序，推荐用string的localeCompare方法：

function funcTest()
{
  var playerArr=new Array("Dallas Mavericks","诺维斯基","San Antonio ","邓肯","Houston Rockets","姚明","New Orleans ","保罗");
  playerArr.sort(sortByCharacter);
  for(var i=0;i<playerArr.length;i++){
    alert(playerArr[i]);
}
 
}

//字符串排序
function sortByCharacter(stra,strb){
  return stra.localeCompare(strb); 
}

（6）、reverse()：将数组中的元素反转排列

var objArr=new Array(1,2,3,4,"jeff wong");
objArr.reverse();//将数组中的元素反转排列,这个操作是在原有数组上经行操作，同时也返回数组本身

for(var i=0;i<objArr.length;i++){
alert(objArr[i]); 
}

（7）、concact([item1[,item2[,....]]]）：将参数列表连接到另一个数组的后面形成一个新的数组并返回，原有数组不受影响。

var objArr=new Array(1,2,3,4,"jeff wong");

var concatArr= objArr.concat("jeffery zhao","terry lee");//将参数列表连接到objArr的后面形成一个新的数组并返回，原有数组objArr不受影响
for(var i=0;i<objArr.length;i++){
alert(objArr[i]); 
}
for(var i=0;i<concatArr.length;i++){
alert(concatArr[i]); 
}

（8）、join(separator)：以separator指定的字符作为分割符，将数组转换为字符串，当seperator 为逗号时，其作用和toString()相同。

var objArr=new Array(1,2,3,4,"jeff wong");

alert(objArr.join("-"));//以"-"作为分割符，将数组转换为字符串

（9）、slice(start,end)：返回数组对象的一个子集，索引从start开始（包括 start），到end结束（不包括end),原有数组不受影响。

var objArr=new Array(1,2,3,4,"jeff wong","jeffery zhao","terry lee");

var numArr=objArr.slice(0,4); //返回数组对象的一个子集var strArr=objArr.slice(4,7);

for(var i=0;i<numArr.length;i++){
alert(numArr[i]); 
}
for(var i=0;i<strArr.length;i++){
alert(strArr[i]); 
}

for(var i=0;i<objArr.length;i++){ //objArr不受影响
alert(objArr[i]); 
}

（10）、splice(start,deleteCount[,item1,item2[,...]]])：这是一个复杂的函数，用于完成数组元素的删除　取代和插入操作。其中，start参数表示要进行操作的索引位置，deleteCount指从start开始要删除的元素的元素个数（包括了start位置），如果deleteCount省略，则表示从start开始要删除数组的剩余部分。[,item1[,item2[,...]]]则表示可选的插入到start之前的元素列表。

var objArr=[0,1,2,3,4,5,6];

objArr.splice(1,1);

alert(objArr.toString());;//显示"0,2,3,4,5,6" 删除

objArr=[0,1,2,3,4,5,6];

objArr.splice(0,0,"a","b");

alert(objArr.toString());;//显示“a,b,0,1,2,3,4,5,6" 插入

objArr=[0,1,2,3,4,5,6];

objArr.splice(3,2,"c","d");

alert(objArr.toString());;//显示"0,1,2,c,d,5,6" 替换

五：window对象和document对象（简单概括）
Dom，翻译过来就是“文档对象模型”。这种模型是为了方便HTML和XML文档而设计的。Dom这个术语反映3个意思，一是“文档”，也就是说它的表现形式为一份文档（废话^_^）就是网页（可以比较COM（组件对象模型）里的组件）；二是“对象”，也就是说，其内部是由一个个可操控的对象构成的；三是“模型”，DOM是一个树形结构，一个可以用脚本灵活操作的模型。我们知道，打开任何一个网页，浏览器会首先创建一个窗口，这个窗口就是一个window对象，也是js运行所依附的全局环境对象和全局作用域对象。为了加载网页文档，当前窗口将为要打开的网页创建一个document对象，然后将网页加载到这个document中。
window对象是客户端javascript最高层对象之一，只要打开浏览器窗口，不管该窗口中是否有打开的网页，当遇到BODY、FRAMESET或FRAME元素时，都会自动建立window对象的实例。另外，该对象的实例也可由window.open()方法创建。由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成： document.write()。　 在窗口中觖发本窗口对象的任何方法和属性时可以省去窗口的实例名称。例如给当前的myWin窗口设置status属性时，可以只用status而不用myWin.status。但是，在事件处理中调用location属性、close()方法或open()方法时必须使用实例名称。
好了，关于window对象和document对象有太多的方法和属性，这里不会一一举例说明，只有通过项目和实践才能真正融会贯通。Code is cheap.下面看几个简单的常用的window对象方法的示例。

function hello() {
    alert("hello");
}

function testHello(oName) {
    alert("hello," + oName);
}

//window对象常见方法（属性）
function winOperation() {
    /*alert,prompt,confirm与用户交互*/
    alert("hello,ajax!");
    var userName = prompt("please enter your name:", "");
    alert("Your name is :" + userName);
    if (confirm("Do you really want to delete the message?")) {
        alert("delete ok");
    } else { alert("cancel delete"); }
    /* status和defaultStatus 是window对象的属性，用于设置状态栏信息*/
    window.status = "status message";
    window.defaultStatus = "ok";
    /*使用定时器实现javascript的延期执行或重复执行

                  window对象提供了两个方法来实现定时器的效果，分别是 window.setTimeout()和 
    window.setInterval。其中前者可以使一段代码在指定时间后运行；而后者则可以使一段代码 
    每过指定时间就运行一次。它们的原型如下： 
    window.setTimeout(expression,milliseconds); 
    window.setInterval(expression,milliseconds);
    其中，expression 可以是用引号括起来的一段代码，也可以是一个函数名，到了指定的 
    时间，系统便会自动调用该函数，当使用函数名作为调用句柄时，不能带有任何参数；而使 
    用字符串时，则可以在其中 入要传递的参数。两个方法的第二个参数是milliseconds，表 
    示 时或者重复执行的毫秒数.
    */
    // window.setTimeout(hello,5000); 
    //setTimeout("hello()",5000);

    /*如果在 时期限到达之前取消 时执行，可以使用window.clearTimeout(timeoutId)方法， 
    该方法接收一个id，表示一个定时器。这个id 是由setTimeout 方法返回的，例如： 
    */
    var id = setTimeout(hello, 5000);
    //alert(id);
    window.clearTimeout(id);
    /*   window.setInterval 方法 
    该方法使得一个函数每隔固定时间被调用一次，是一个很常用的方法。如果想要取消定 
    时执行，和clearTimeout 方法类似，可以调用window.clearInterval 方法。clearInterval 方法 
    同样接收一个setInterval方法返回的值作为参数*/
    //setInterval(hello,5000);
    var tid = setTimeout(hello, 5000);
    //alert(tid);
    window.clearInterval(tid);
    /*给定时器调 传递参数 
    无论是window.setTimeout 还是window.setInterval，在使用函数名作为调用句柄时都不能带参数，而在许多场合必需要带参数，这就需要想方法解决。
    例如对于函数testHello(oName)，它用于针对用户名显示欢迎信息：*/
    var userName = "jeff wong";
    //window.setInterval(testHello(userName),5000); // 无效
    //window.setInterval(revHello(userName),5000); //有效
}

function revHello(oUserName) {
    return function() {
        testHello(oUserName);
    }
}

接着介绍document对象一些常用属性和方法：
1、forms集合(页面中的表单)

（1)通过集合引用
document.forms                 //对应页面上的<form>标签
document.forms.length          //对应页面上<form>标签的个数
document.forms[0]              //第1个<form>标签
document.forms[i]              //第i-1个<form>标签
document.forms[i].length       //第i-1个<form>中的控件数
document.forms[i].elements[j]  //第i-1个<form>中第j-1个控件

（2)通过标签name属性直接引用
<form name="Myform"><input name="myctrl"></form>
document.Myform.myctrl         //document.表单名.控件名
2、属性
document.title             //设置文档标题等价于HTML的<title>标签
document.bgColor           //设置页面背景色
document.fgColor           //设置前景色(文本颜色)
document.linkColor         //未点击过的链接颜色
document.alinkColor        //激活链接(焦点在此链接上)的颜色
document.vlinkColor        //已点击过的链接颜色
document.URL               //设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate   //文件建立日期，只读属性
document.fileModifiedDate  //文件修改日期，只读属性
document.fileSize          //文件大小，只读属性
document.cookie            //设置和读出cookie
document.charset           //设置字符集 简体中文:gb2312
3、方法
document.write()                  //动态向页面写入内容
document.writeln()                  //动态向页面写入内容（换行）
document.createElement(Tag)       //创建一个html标签对象
document.getElementById(ID)       //获得指定ID值的对象
document.getElementsByName(Name)  //获得指定Name值的对象
4、其他

images集合(页面中的图象)

（1)通过集合引用
document.images             //对应页面上的<img>标签
document.images.length      //对应页面上<img>标签的个数
document.images[0]          //第1个<img>标签          
document.images[i]          //第i-1个<img>标签

（2)通过nane属性直接引用
<img name="oImage">
document.images.oImage      //document.images.name属性

（3)引用图片的src属性
document.images.oImage.src  //document.images.name属性.src

（4)创建一个图象
var oImage
oImage = new Image()
document.images.oImage.src="/1.jpg"
同时在页面上建立一个<img>标签与之对应就可以显示。
最后还有比如页面里引用的层叠样式表
document.styleSheets[0].cssRules或者document.styleSheets[0].rules;前台开发人员可能长用到。

// 取背景色
function getBackgroundColor() 
{
  var oCssRules=document.styleSheets[0].cssRules||document.styleSheets[0].rules;
  oCssRules[0].style.backgroundColor="red";
  alert(oCssRules[0].style.backgroundColor);
}