javascript:内置对象学习笔记二

简介:

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

ContractedBlock.gif Code

二维数组:

ContractedBlock.gif Code

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属性减1,即返回后立即丢失最后一个元素。

复制代码
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类似,但它是移去数组的第一个元素,并返回这个元素的值

ContractedBlock.gif Code

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

ContractedBlock.gif Code

(5)、sort(fucCompare):根据fucCompare定义的大小比较函数,对一个数组进行排序。函数fucCompare必须接受两个参数element1,element2,如果需要element1排在element2之前,应该返回一个负数;如果需要element1排在element2之后,应该返回一个正数,如果两个数平等对待(即保持原有顺序)则返回0。当省略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方法:

ContractedBlock.gif Code

(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[,....]]]):将参数列表连接到另一个数组的后面形成一个新的数组并返回,原有数组不受影响。

ContractedBlock.gif Code

(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),原有数组不受影响。

ContractedBlock.gif Code

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

ContractedBlock.gif Code


五: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对象方法的示例。

ContractedBlock.gif Code
接着介绍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;前台开发人员可能长用到。

ContractedBlock.gif Code





本文转自JeffWong博客园博客,原文链接:http://www.cnblogs.com/jeffwongishandsome/archive/2009/05/16/1331632.html,如需转载请自行联系原作者
目录
相关文章
|
2月前
|
JSON JavaScript 前端开发
js有哪些内置对象?
js有哪些内置对象?
|
2月前
|
前端开发 JavaScript API
JavaScript学习笔记(一)promise与async
JavaScript学习笔记(一)promise与async
|
7月前
|
Web App开发 JavaScript 前端开发
JavaScript的对象介绍和常用内置对象介绍
JavaScript的对象介绍和常用内置对象介绍
|
3月前
|
存储 JavaScript
【ES6系列第二篇】适用JS初学者的Set对象和Map对象学习笔记
【ES6系列第二篇】适用JS初学者的Set对象和Map对象学习笔记
24 0
|
4月前
|
机器学习/深度学习 存储 前端开发
【前端|Javascript第5篇】全网最详细的JS的内置对象文章!3
【前端|Javascript第5篇】全网最详细的JS的内置对象文章!3
|
4月前
|
存储 JavaScript 前端开发
【前端|Javascript第5篇】全网最详细的JS的内置对象文章!2
【前端|Javascript第5篇】全网最详细的JS的内置对象文章!2
|
4月前
|
人工智能 前端开发 JavaScript
【前端|Javascript第5篇】全网最详细的JS的内置对象文章!1
【前端|Javascript第5篇】全网最详细的JS的内置对象文章!1
|
5月前
|
JavaScript 前端开发 数据处理
JavaScript常用内置对象和方法
JavaScript是一种功能强大的编程语言,它提供了许多内置对象和方法,用于处理不同的数据类型和执行各种操作。本文将介绍JavaScript的常用内置对象和方法,包括Array、String、Date、Math等,并详细介绍它们的属性和方法。
|
5月前
|
前端开发 JavaScript Python
javascript入门学习笔记打卡(2)
javascript入门学习笔记打卡(2)
22 0
|
5月前
|
存储 前端开发 JavaScript
javascript内置对象之arguments
javascript内置对象之arguments
25 0