JS对象全解:
1、Object 基本介绍
prototype 属性
返回对象类型原型的引用。prototype 属性是 object 共有的。
objectName.prototype
说明:
用 prototype 属性提供对象的类的一组基本功能。 对象的新实例“继承”赋予该对象原型的操作。
对于数组对象,以下例子说明prototype 属性的用途。
给数组对象添加返回数组中最大元素值的方法。要完成这一点,声明一个函数,将它加入 Array.prototype, 并使用它。
function array_max( )
{
var i, max = this[0];
for (i = 1; i < this.length; i++)
{
if (max < this[i])
max = this[i];
}
return max;
}
Array.prototype.max = array_max;
var x = new Array(1, 2, 3, 4, 5, 6);
var y = x.max( );
// 该代码执行后,y 保存数组 x 中的最大值,或说 6。
constructor 属性
表示创建对象的函数。
object.constructor
说明:constructor 属性是所有具有 prototype 的对象的成员。它们包括除 Global 和 Math 对象以外的所有 JScript 固有对象。constructor 属性保存了对构造特定对象实例的函数的引用。
例如:
x = new String("Hi");
if (x.constructor == String) // 进行处理(条件为真)。
或
function MyFunc {
// 函数体。
}
y = new MyFunc;
if (y.constructor == MyFunc) // 进行处理(条件为真)。
2、Array 的基本操作
数组的创建
var arrayObj = new Array(); //创建一个数组
var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度
var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); //创建一个数组并赋值
数组的元素的访问
var testGetArrValue=arrayObj[1]; //获取数组的元素值
arrayObj[1]= "这是新值"; //给数组元素赋予新的值
数组元素的添加
arrayObj.push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾,并返回数组新长度
arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始,数组中的元素自动后移,返回数组新长度
arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置,插入位置的元素自动后移,返回""。
数组元素的删除
arrayObj.pop(); //移除最后一个元素并返回该元素值
arrayObj.shift(); //移除最前一个元素并返回该元素值,数组中元素自动前移
arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所移除的元素
数组的截取和合并
arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分,注意不包括 end 对应的元素,如果省略 end 将复制 start 之后的所有元素
arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //将多个数组(也可以是字符串,或者是数组和字符串的混合)连接为一个数组,返回连接好的新的数组
数组的拷贝
arrayObj.slice(0); //返回数组的拷贝数组,注意是一个新的数组,不是指向
arrayObj.concat(); //返回数组的拷贝数组,注意是一个新的数组,不是指向
数组元素的字符串化
arrayObj.join(separator); //返回字符串,这个字符串将数组的每一个元素值连接在一起,中间用 separator 隔开。
toLocaleString 、toString 、valueOf:可以看作是join的特殊用法,不常用
数组元素的排序
arrayObj.reverse(); //反转元素(最前的排到最后、最后的排到最前),返回数组地址
arrayObj.sort(); //对数组元素排序,返回数组地址
使用map遍历数组
/* Demo1 */
var squares = [1,2,3,4].map(function (val) {
return val * val;
});
3、字符串和字符串对象
方法 | 描述 | FF | IE |
---|---|---|---|
anchor() | 创建 HTML 锚。 | 1 | 3 |
big() | 用大号字体显示字符串。 | 1 | 3 |
blink() | 显示闪动字符串。 | 1 | |
bold() | 使用粗体显示字符串。 | 1 | 3 |
charAt() | 返回在指定位置的字符。 | 1 | 3 |
charCodeAt() | 返回在指定的位置的字符的 Unicode 编码。 | 1 | 4 |
concat() | 连接字符串。 | 1 | 4 |
fixed() | 以打字机文本显示字符串。 | 1 | 3 |
fontcolor() | 使用指定的颜色来显示字符串。 | 1 | 3 |
fontsize() | 使用指定的尺寸来显示字符串。 | 1 | 3 |
fromCharCode() | 从字符编码创建一个字符串(只能通过 String 调用,属于类方法)。 | 1 | 4 |
indexOf() | 检索字符串。 | 1 | 3 |
italics() | 使用斜体显示字符串。 | 1 | 3 |
lastIndexOf() | 从后向前搜索字符串。 | 1 | 3 |
link() | 将字符串显示为链接。 | 1 | 3 |
localeCompare() | 用本地特定的顺序来比较两个字符串。 | 1 | 4 |
match() | 找到一个或多个正则表达式的匹配。 | 1 | 4 |
replace() | 替换与正则表达式匹配的子串。 | 1 | 4 |
search() | 检索与正则表达式相匹配的值。 | 1 | 4 |
slice() | 提取字符串的片断,并在新的字符串中返回被提取的部分。 | 1 | 4 |
small() | 使用小字号来显示字符串。 | 1 | 3 |
split() | 把字符串分割为字符串数组。 | 1 | 4 |
strike() | 使用删除线来显示字符串。 | 1 | 3 |
sub() | 把字符串显示为下标。 | 1 | 3 |
substr() | 从起始索引号提取字符串中指定数目的字符。 | 1 | 4 |
substring() | 提取字符串中两个指定的索引号之间的字符。 | 1 | 3 |
sup() | 把字符串显示为上标。 | 1 | 3 |
toLocaleLowerCase() | 把字符串转换为小写。 | - | - |
toLocaleUpperCase() | 把字符串转换为大写。 | - | - |
toLowerCase() | 把字符串转换为小写。 | 1 | 3 |
toUpperCase() | 把字符串转换为大写。 | 1 | 3 |
toSource() | 代表对象的源代码。 | 1 | - |
toString() | 返回字符串。 | - | - |
valueOf() | 返回某个字符串对象的原始值。 | 1 | 4 |
相关使用范例:
concat :将两个或多个字符的文本组合起来,返回一个新的字符串。
var a = "hello";
var b = ",world";
var c = a.concat(b);
//c = "hello,world"
indexOf :返回字符串中一个子串第一处出现的索引(从左到右搜索,第二个参数指定搜索的起始位置)。如果没有匹配项,返回 -1 。
var index1 = a.indexOf("l");
//index1 = 2
var index2 = a.indexOf("l",3);
//index2 = 3
charAt :返回指定位置的字符。
var get_char = a.charAt(0);
//get_char = "h";
lastIndexOf :返回字符串中一个子串最后一处出现的索引(从右到左搜索),如果没有匹配项,返回 -1 。
var index1 = lastIndexOf('l');
//index1 = 3
var index2 = lastIndexOf('l',2)
//index2 = 2
match :检查一个字符串匹配一个正则表达式内容,如果么有匹配返回 null。
var re = new RegExp(/^\w+$/);
var is_alpha1 = a.match(re);
//is_alpha1 = "hello"
var is_alpha2 = b.match(re);
//is_alpha2 = null
substring :返回字符串的一个子串,传入参数是起始位置和结束位置。
var sub_string1 = a.substring(1);
//sub_string1 = "ello"
var sub_string2 = a.substring(1,4);
//sub_string2 = "ell"
substr :返回字符串的一个子串,传入参数是起始位置和长度
var sub_string1 = a.substr(1);
//sub_string1 = "ello"
var sub_string2 = a.substr(1,4);
//sub_string2 = "ello"
replace :用来查找匹配一个正则表达式的字符串,然后使用新字符串代替匹配的字符串。
var result1 = a.replace(re,"Hello");
//result1 = "Hello"
var result2 = b.replace(re,"Hello");
//result2 = ",world"
search :执行一个正则表达式匹配查找。如果查找成功,返回字符串中匹配的索引值。否则返回 -1 。
var index1 = a.search(re);
//index1 = 0
var index2 = b.search(re);
//index2 = -1
slice :提取字符串的一部分,并返回一个新字符串(与 substring 相同)。
var sub_string1 = a.slice(1);
//sub_string1 = "ello"
var sub_string2 = a.slice(1,4);
//sub_string2 = "ell"
split :通过将字符串划分成子串,将一个字符串做成一个字符串数组。
var arr1 = a.split("");
//arr1 = [h,e,l,l,o]
4、Window对象及方法
window 对象简介
熟练 window 对象的 open、close、alert、confirm 、 prompt 、 setTimeout 、 clearTimeout 、 setInterval 、 clearInterval、moveBy、resizeBy、scrollBy 方法的使用
掌握 window 对象的 moveTo、resizeTo、scrollTo、print 方法的使用
熟练掌握 window 对象的 status、location、name、self、opener 属性 的使用
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 对象的方法
window 对象有以下方法:open close alert confirm prompt setTimeout clearTimeout setInterval clearInterval moveBy moveTo resizeBy resizeTo scrollBy scrollTo find back forward home stop print blur focus captureEvent enableExternalCapture disableExternalCapture handleEvent releaseEvent routeEvent scroll
1. open 方法
语法格式:window.open(URL,窗口名称,窗口风格) 功能:打开一个新的窗口,并在窗口中装载指定 URL 地址的网页。
说明:
open 方法用于打开一个新的浏览器窗口, 并在新窗口中装入一个指定的 URL 地址;
open 方法在打开一个新的浏览器窗口时,还可以指定窗口的名称(第二 个参数);
open 方法在打开一个新的浏览器窗口时,还可以指定窗口的风格(第三 个参数),窗口风格有以下选项,这些选项可以多选,如果多选,各选项之间用逗 号分隔。toolbar:指定窗口是否有标准工具栏。当该选项的值为 1 或 yes 时, 表示有标准工具栏,当该选项的值为 0 或 no 时,表示没有标准工具栏; location:指定窗口是否有地址工具栏,选项的值及含义与 toolbar 相 同; directories: 指定窗口是否有链接工具栏, 选项的值及含义与 toolbar 相同; status:指定窗口是否有状态栏,选项的值及含义与 toolbar 相同; menubar:指定窗口是否有菜单,选项的值及含义与 toolbar 相同; scrollbar:指定当前窗口文档大于窗口时是否有滚动条,选项的值及 含义与 toolbar 相同; resizable:指定窗口是否可改变大小,选项的值及含义与 toolbar 相 同; width:以像素为单位指定窗口的宽度,已被 innerWidth 取代; height:以像素为单位指定窗口的高度,已被 innerHeight 取代; outerWidth:以像素为单位指定窗口的外部宽度; outerHeight:以像素为单位指定窗口的外部高度; left:以像素为单位指定窗口距屏幕左边的位置; top:以像素为单位指定窗口距屏幕顶端的位置; alwaysLowered:指定窗口隐藏在所有窗口之后,选项的值及含义与 toolbar 相同; alwaysRaised: 指定窗口浮在所有窗口之上, 选项的值及含义与 toolbar 相同; dependent:指定打开的窗口为当前窗口的一个子窗口,并随着父窗口 的关闭而关闭,选项的值及含义与 toolbar 相同; hotkeys:在没有菜单栏的新窗口中设置安全退出的热键,选项的值及 含义与 toolbar 相同; innerHeight:设定窗口中文档的像素高度; innerWidth:设定窗口中文档的像素宽度; screenX:设定窗口距离屏幕左边界的像素长度; screenY:设定窗口距离屏幕上边界的像素长度; titleBar: 指明标题栏是否在新窗口中可见, 选项的值及含义与 toolbar 相同; z-look:指明当窗口被激活时,不能浮在其它窗口之上,选项的值及含 义与 toolbar 相同。open 方法返回的是该窗口的引用。
小技巧:该方法经常用于在打开一个网页时自动打开另一个窗口。
例:编制一个小程序,它用于在打开当前窗口时自动打开另一个 窗口,要求该窗没有标准工具栏、地址栏、链接工具栏、菜单栏,但有状态栏, 窗口中打开的网页地址为:http://www.dlrtvu.edu.cn。
2. close 方法
语法格式:window.close() 功能:close 方法用于自动关闭浏览器窗口。
3. alert 方法
语法格式:window.alert(提示字符串) 功能:弹出一个警告框,在警告框内显示提示字符串文本。
4. confirm 方法
语法格式:window.confirm(提示字符串) 功能:显示一个确认框,在确认框内显示提示字符串,当用户单击“确 定”按钮 时该方法返回 true,单击“取消”时返回 false。
5. prompt 方法
语法格式:window.prompt(提示字符串,缺省文本) 功能:显示一个输入框,在输入框内显示提示字符串,在输入文本框显 示缺省文本,并等待用户输入,当用户单击“确定”按钮时,返回用户输入的字 符串,当单击“取消”按钮时,返回 null 值。
6. setTimeout 方法
语法格式:window.setTimeout(代码字符表达式,毫秒数) 功能:定时设置,当到了指定的毫秒数后,自动执行代码字符表达式。
7. clearTimeout 方法
语法格式:window.clearTimeout(定时器) 功能:取消以前的定时设置,其中的参数是用 setTimeout 设置时的返 回值。
8. setInterval 方法
语法格式:window.setInterval(代码字符表达式,毫秒数) 功能:设定一个时间间隔后(第二个参数),反复执行“代码字符表达 式”的内容
9. clearInterval 方法
语法格式:window.clearInterval(时间间隔器) 功能:取消 setInterval 设置的定时。其中的参数是 setInterval 方法 的返回值。
10. moveBy 方法
语法格式: window.moveBy(水平位移量,垂直位移量) 功能:按照给定像素参数移动指定窗口。第一个参数是窗口水平移动的 像素,第二个参数是窗口垂直移动的像素。
11.moveTo 方法
语法格式:window.moveTo(x,y) 功能:将窗口移动到指定的指定坐标(x,y)处。
12. resizeBy 方法
语法格式:window.resizeBy(水平,垂直) 功能: 将当前窗口改变指定的大小(x,y), x、 的值大于 0 时为扩大, 当 y 小于 0 时为缩小。
13. resizeTo 方法
语法格式:window.resizeTo(水平宽度,垂直宽度) 功能:将当前窗口改变成(x,y)大小,x、y 分别为宽度和高度。
14. scrollBy 方法
语法格式:window.scrollBy(水平位移量,垂直位移量) 功能: 将窗口中的内容按给定的位移量滚动。 参数为正数时, 正向滚动, 否则反向滚动。
15. scrollTo 方法
语法格式:window.scrollTo(x,y) 功能:将窗口中的内容滚动到指定位置。
16.find 方法
语法格式:window.find() 功能:当触发该方法时,将弹出一个“find”(查找)对话窗口,并允许 用户在触发 find 方法的页面中查找一个字符串。注:该属性在 IE5.5 及 Netscape6.0 中都不支持。
17. back 方法
语法格式:window.back() 功能:模拟用户点击浏览器上的“后退”按钮,将页面转到浏览器的上 一页。说明:仅当当前页面存在上一页时才能进行该操作。注:IE5.5 不支持该方法,Netscape6.0 支持。
18. forward 方法
语法格式:window.forward() 功能:模拟用户点击浏览器上的“前进”按钮,将页面转到浏览器的下 一页。说明:仅当当前页面存在下一页时才能进行该操作。注:IE5.5 不支持该方法,Netscape6.0 支持。
19. home 方法
语法格式:window.home() 功能:模拟用户点击浏览器上的“主页”按钮,将页面转到指定的页面 上。注:IE5.5 不支持该方法,Netscape6.0 支持。
20. stop 方法
语法格式: window.stop() 功能: 模拟用户点击浏览器上的“停止”按钮, 终止浏览器的下载操作。注:IE5.5 不支持该方法,Netscape6.0 支持。
21. print 方法
语法格式:window.print() 功能:模拟用户点击浏览器上的“打印”按钮,通知浏览器打开打印对 话框打印当前页。
22. blur 方法
语法格式:window.blur() 功能:从窗口中移出焦点。当与 focus 方法合用时必须小心,因为可能 导致焦点不断移进移出。
23. focus 方法
语法格式:window.focus() 功能:使窗口中得到焦点。当与 blur 方法合用时必须小心,因为可能 导致焦点不断移进移出。
24. captureEvent 方法
语法格式:window.captureEvent(Event) window.captureEvent(事件 1|事件 2|...|事件 n) 功能:捕捉指定参数的所有事件。由于能够捕获哪些由本地程序自己处 理的事件, 所以程序员可以随意定义函数来处理事件。 如果有多个事件需要捕捉, 各事件之间用管道符“|”隔开。
可捕捉的事件类型如下: Event.ABORTEvent.BLUREvent.CHANGEEvent.CLICKEvent.DBLCLICKEvent.DRAGDROPEvent.ERROREvent.FOCUSEvent.KEYDOWNEvent.KEYPRESSEvent.KEYUP Event.LOADEvent.MOUSEDOWNEvent.MOUSUEMOVEEvent.MOUSEOUTEvent.MOUSEOVEREvent.MOUSEUPEvent.MOVEEvent.RESETEvent.RESIZEEvent.SELECTEvent.SUBMIT Event.UNLOAD
25. enableExternalCapture 事件
语法格式:window.enableExternalCapture(event) 功能: enableExternalCapture 方法用于捕捉通过参数传入的外部事件。
26. disableExternalCapture 事件
语法格式:window.disableExternalCapture() 功能:取消 enableExternalCapture 方法的设置,终止对外部事件的捕 捉。
27. handleEvent 事件
语法格式:window.handleEvent(event) 功能:触发指定事件的事件处理器。
28. releaseEvent 事件
语法格式:window.releaseEvent(event) window.releaseEvent(事件 1|事件 2|...|事件 n) 功能:释放通过参数传入的已被捕捉的事件,这些事件是由window.captureEvent 方法设置的,可释放的事件与 captureEvent 相 同。
29. routeEvent 事件
语法格式:window.releaseEvent(event) 功能:把被捕捉类型的所有事件转交给标准事件处理方法进行处理,可 转交的事件与 captureEvent 相同。
30 scroll 事件
语法格式: window.scroll(X 坐标,Y 坐标) 功能:将窗口移动到指定的坐标位置。
window 对象的属性
window 对象具有如下属 性:statusstatusbarstatusbar.visibledefaultstatuslocationlocationbarlocationbar.visibleself nameclosedframesframes.lengthlengthdocumenthistoryinnerHeightinnerWidthmenubarmenubar.visible openerouterHeightouterWidthpageXOffsetpageYOffsetparentpersonalbarpersonalbar.visiblescrollbarscrollbar.visibletoolbar toolbar.visibletop
1. status 属性
语法格式:window.status=字符串 功能:设置或给出浏览器窗口中状态栏的当前显示信息。小技巧:可以使用该属性设置浏览器窗口状态栏信息。
2. statusbar 属性
语法格式:window.statusbar.属性 功能:statusbar 属性本身也是一个对象,用于访问它自已的 visible 属性从而确定状态栏是否可见。注:IE5.5 浏览器不支持该属性。
3. statusbar.visible 属性
语法格式:window.statusbar.visible 功能:检查状态栏是否可见,如果可见则返回 true,反之返回 false。注:IE5.5 浏览器不支持该属性。
4. defaultstatus 属性
语法格式:window.defaultstatus[=字符串] 功能:defaultstatus 属性值是浏览器窗中状态栏的默认显示信息。
5.location 属性
语法格式:window.location=URL 功能:给出当前窗口的 URL 信息或指定打开窗口的 URL。
6. locationbar 属性
语法格式:window.locationbar.属性 功能:locationbar 属性也可以看成是一个子对象,这个属性用来获取 它自已的visible 属性来确定位置栏是否可见。到目前为止,该属性只有一个子属性:visible。注:IE5.5 不支持该属性。
7. locationbar.visible 属性
语法格式:window.locationbar.visible 功能:返回位置栏是否可见,如果可见返回 true,反之返回 false。注:IE5.5 不支持该属性。
8. self 属性
语法格式: window.self.方法 window.self.属性 功能:该属性包含当前窗口的标志,利用这个属性,可以保证在多个窗 口被打开的情况下,正确调用当前窗口内的函数或属性而不会发生混乱。
9. name 属性
语法格式:window.name=名称 功能:返回窗口名称,这个名称是由 window.open()方法创建新窗口时 给定的。在 javascript1.0 版本中,这个属性只能用于读取窗口名称,而到了javascript1.1 版本时,可以用这个属性给一个不是用 window.open() 方法创建的窗口指定一个名称。
10. closed 属性
语法格式:window.closed 功能:closed 属性用于返回指定窗口的实例是否已经关闭,如果关闭, 返回 true,反之返回 flase。
11. frames 属性
语法格式:window.frames["框架名称"] window.frames[数值] 功能: frames 属性是一个数组, 用来存储文档中每一个由元素创建的子 窗口(框架)实例, 其中的下标即可以是次序号也可以是用 FRAME 元素的 NAME 属 性指定的名称来得到并使用。
12. frames.length 属性
语法格式:window.frames.length 功能:frames.length 属性用于给出文档中子窗口(框架)实例的个数。
13. length 属性
语法格式:window.length 功能:length 属性返回一个窗口内的子窗口数目,该属性与window.frame.length 属性的值相同。
14. document 属性
语法格式:window.document.事件 window.document.方法 window.document.属性 功能: window 对象的子对象 document 是 javascript 的核心对象, 在脚 本中遇到 BODY 元素时创建一个实例。
15. history 属性
语法格式:window.history[数值] window.history.方法() window.history.属性 window 对象的子对象 history 是 javascript 的核心对象之一,该属性 包含了一个已访问过页面的名称和 URL 的数组。
16. innerHeight 属性
语法格式:window.innerHeight=数值 功能:返回或指定浏览器窗口中文档的像素高度,这个高度不包括任何 工具栏和组成窗口的页面修饰高度。 注:IE5.5 不支持该属性。
17. innerWidth 属性
语法格式:window.innerHeight=数值 功能:返回或指定浏览器窗口中文档的像素宽度,这个宽度不包括任何 工具栏和组成窗口的页面修饰宽度。注:IE5.5 不支持该属性。
18. menubar 属性
语法格式:window.menubar.属性 功能:menubar 属性也可以看成是一个子对象,这个属性用来获取它自 已的visible 属性来确定菜单栏是否可见。 到目前为止,该属性只有一个子属性:visible。注:IE5.5 不支持该属性。
19. menubar.visible 属性
语法格式:window.menubar.visible 功能:menubar.visible 属性用于返回菜单栏是否可见,如果可见返回 true,反之返回 false。注:IE5.5 不支持该属性。
20. opener 属性
语法格式:window.opener window.opener.方法 window.opener.属性 功能:opener 属性与打开该窗口的父窗口相联系,当访问子窗口中 operer 属性时, 返回的是父窗口。 通过该属性, 可以使用父窗口对象中的方法和属性。
21. outerHeight 属性
语法格式:window.outerHeight 功能:outerHeight 属性用于访问浏览器窗口的像素高度,该高度包括 工具栏和装饰边的高度。注:IE5.5 不支持该属性。
22. outerWidth 属性
语法格式:window.outerWidth 功能: outerWidth 属性用于访问浏览器窗口的像素宽度, 该宽度包括工 具栏和装 饰边的宽度。注:IE5.5 不支持该属性。
23. pageXOffset 属性
语法格式:window.pageXOffset=数值 功能:指定浏览器窗口中文档左上角在窗口中的当前水平像素位置。在 利用moveTo 移动之前, 可以通过该属性来决定是否需要移动窗口。 因为该属 性返回了可见文档相对整个页面的当前位置。注:IE5.5 不支持该属性。
24. pageYOffset 属性
语法格式: window.pageYOffset=数值 功能:指定浏览器窗口中文档左上角在窗口中的当前垂直像素位置。在 利用moveTo 移动之前, 可以通过该属性来决定是否需要移动窗口。 因为该属 性返回了可见文档相对整个页面的当前位置。注:IE5.5 不支持该属性。
25. parent 属性
语法格式:window.parent.frames[数值] window.parent.framesName 功能:访问各个子窗口(多框架)所在的父窗口。
26. personalbar 属性
语法格式:window.personalbar.属性 功能: personalbar 属性本身也是一个对象, 用于访问其自身的 visible 属性来确定个人栏是否可见。注:IE5.5 不支持该属性。
27. personalbar.visible 属性
语法格式:window.personalbar.visible 功能:确定个人栏是否可见,如果可见则返回 true,反之返回 false。注:IE5.5 不支持该属性。
28. scrollbars 属性
语法格式:window.scrollbars.属性 功能:scrollbars 属性本身也是一个对象,用于访问其自身的 visible 属性来确 定滚动栏是否可见。注:IE5.5 不支持该属性。
29. scrollbars.visible 属性
语法格式:window.scrollbars.visible 功能: scrollbars.visible 用于确定滚动栏是否可见, 如果可见则返回 true,反之返回 false。注:IE5.5 不支持该属性。
30. toolbar 属性
语法格式:window.toolbar.属性 功能:toolbar 属性本身也是一个对象,用于访问它自已的 visible 属 性从而确定 工具栏是否可见。注:IE5.5 不支持该属性。
31. toolbar.visible 属性
语法格式:window.toolbar.visible 功能:toolbar.visible 属性用于检查工具栏是否可见,如果可见则返 回 true,反之返回 false。注:IE5.5 不支持该属性。
32. top 属性
语法格式:window.top.frames[数值] window.top.frameName window.top.方法() window.top.属性 功能:window 对象的 top 属性用于包含所有装入浏览器的子窗口(多框 架)的最顶层窗口的信息。
------------------------------------------------------------------------------------------------------------------------------------
Window.ShowModalDialog使用手册
基本介绍:
showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
window.showModalDialog() 方法用来创建一个显示HTML内容的模态对话框。
window.showModelessDialog() 方法用来创建一个显示HTML内容的非模态对话框。
使用方法:
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])
参数说明:
sURL -- 必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
vArguments -- 可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures -- 可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
----------------
1. dialogHeight: 对话框高度,不小于100px
2. dialogWidth: 对话框宽度。
3. dialogLeft: 离屏幕左的距离。
4. dialogTop: 离屏幕上的距离。
5. center: { yes | no | 1 | 0 } : 是否居中,默认yes,但仍可以指定高度和宽度。
6. help: {yes | no | 1 | 0 }: 是否显示帮助按钮,默认yes。
7. resizable: {yes | no | 1 | 0 } [IE5+]: 是否可被改变大小。默认no。
8. status: {yes | no | 1 | 0 } [IE5+]: 是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
9. scroll: { yes | no | 1 | 0 | on | off }:是否显示滚动条。默认为yes。
下面几个属性是用在HTA中的,在一般的网页中一般不使用。
10. dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。
11. edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。
12. unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。
参数传递:
1. 要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:
-------------------------------
parent.htm
<script>
var obj = new Object();
obj.name="51js";
window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");
</script>
modal.htm
<script>
var obj = window.dialogArguments
alert("您传递的参数为:" + obj.name)
</script>
-------------------------------
2. 可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如:
------------------------------
parent.htm
<script>
str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");
alert(str);
</script>
modal.htm
<script>
window.returnValue="http://homepage.yesky.com";
</script>
5、Document 文挡对象详解
--------------------------------------------------------------------
注: 页面上元素 name 属性和 JavaScript 引用的名称必须一致包括大小写 否则会提示你一个错误信息 "引用的元素为空或者不是对象" --------------------------------------------------------------------
对象属性
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
--------------------------------------------------------------------
常用对象方法
document.write() //动态向页面写入内容
document.createElement(Tag) //创建一个 html 标签对象
document.getElementById(ID) //获得指定 ID 值的对象
document.getElementsByName(Name) //获得指定 Name 值的对象
document.body.appendChild(oTag)
--------------------------------------------------------------------
body-主体子对象
document.body //指定文档主体的开始和结束等价于<body></body>
document.body.bgColor //设置或获取对象后面的背景颜色
document.body.link //未点击过的链接颜色
document.body.alink //激活链接(焦点在此链接上)的颜色
document.body.vlink //已点击过的链接颜色
document.body.text //文本色
document.body.innerText //设置<body>...</body>之间的文本
document.body.innerHTML //设置<body>...</body>之间的 HTML 代码
document.body.topMargin //页面上边距
document.body.leftMargin //页面左边距
document.body.rightMargin //页面右边距
document.body.bottomMargin //页面下边距
document.body.background //背景图片
document.body.appendChild(oTag) //动态生成一个 HTML 对象 常用对象事件
document.body.οnclick="func()" //鼠标指针单击对象是触发
document.body.οnmοuseοver="func()" //鼠标指针移到对象时触发
document.body.οnmοuseοut="func()" //鼠标指针移出对象时触发
--------------------------------------------------------------------
location-位置子对象
document.location.hash // #号后的部分
document.location.host // 域名+端口号
document.location.hostname // 域名
document.location.href // 完整 URL
document.location.pathname // 目录部分
document.location.port // 端口号
document.location.protocol // 网络协议(http:)
document.location.search // ?号后的部分
documeny.location.reload() //刷新网页
document.location.reload(URL) //打开新的网页
document.location.assign(URL) //打开新的网页
document.location.replace(URL) //打开新的网页
--------------------------------------------------------------------
selection-选区子对象
document.selection
--------------------------------------------------------------------
images 集合(页面中的图象)
a)通过集合引用
document.images document.images.length document.images[0] document.images[i]
b)通过 nane 属性直接引用
<img name="oImage"> document.images.oImage
c)引用图片的 src 属性
document.images.oImage.src
d)创建一个图象
var oImage oImage = new Image() //
document.images.name 属性//对应页面上的<img>标签 //对应页面上<img>标签的个数 //第 1 个<img>标签 //第 i-1 个<img>标签//document.images.name 属性.src
document.images.oImage.src="1.jpg" 同时在页面上建立一个<img>标签与之对应就可以显示
<html>
<img name=oImage>
<script language="javascript">
var oImage ;
oImage = new Image() ;
document.images.oImage.src="1.jpg" ;
</script>
</html>
<html>
<script language="javascript">
oImage=document.caeateElement("IMG") ;
oImage.src="1.jpg" ;
document.body.appendChild(oImage) ;
</script>
</html>
---------------------------------------------------------------------
forms 集合(页面中的表单)
a)通过集合引用
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 个控件
b)通过标签 name 属性直接引用
<form name="Myform"><input name="myctrl"></form>
document.Myform.myctrl //document.表单名.控件名 c)访问表单的属性
document.forms[i].name //对应<form name>属性
document.forms[i].action //对应<form action>属性
document.forms[i].encoding//对应<form enctype>属性
document.forms[i].target //对应<form target>属性
document.forms[i].appendChild(oTag) //动态插入一个控件
----------------------------------------------------------------------
<html>
<!--Text 控件相关 Script-->
<form name="Myform">
<input type="text" name="oText">
<input type="password" name="oPswd">
</form>
<script language="javascript"> //获取文本密码框的值 document.write(document.Myform.oText.value) document.write(document.Myform.oPswd.value)
</script>
</html>
----------------------------------------------------------------------
<html>
<!--checkbox,radio 控件相关 script-->
<form name="Myform">
<input type="checkbox" name="chk" value="1">1
<input type="checkbox" name="chk" value="2">2
</form>
<script language="javascript">
function fun(){ //遍历 checkbox 控件的值并判断是否选中
var length ;
length=document.forms[0].chk.length ;
for(i=0;i<length;i++){
v=document.forms[0].chk[i].value ;
b=document.forms[0].chk[i].checked
if(b)
alert(v=v+"被选中")
else
alert(v=v+"未选中") }
}
</script>
<a href=# onclick="fun()">ddd</a>
</html>
----------------------------------------------------------------------
<html>
<!--Select 控件相关 Script-->
<form name="Myform">
<select name="oSelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
<script language="javascript"> //遍历 select 控件的 option 项
var length
length=document.Myform.oSelect.length for(i=0;i<length;i++) ;
document.write(document.Myform.oSelect[i].value) </script>
<script language="javascript"> //遍历 option 项并且判断某个 option 是否被选中
for(i=0;i<document.Myform.oSelect.length;i++){
if(document.Myform.oSelect[i].selected!=true)
document.write(document.Myform.oSelect[i].value)
else
document.write("<font color=red>"+document.Myform.oSelect[i].value+"</font>")
}
</script>
<script language="javascript"> //根据 SelectedIndex 打印出选中的 option //(0 到 document.Myform.oSelect.length-1) i=document.Myform.oSelect.selectedIndex document.write(document.Myform.oSelect[i].value)
</script>
<script language="javascript"> //动态增加 select 控件的 option 项
var oOption = document.createElement("OPTION");
oOption.text="4";
oOption.value="4";
document.Myform.oSelect.add(oOption);
</script>
<html>
----------------------------------------------------------------------
<Div id="oDiv">Text</Div>
document.all.oDiv //引用图层
oDiv document.all.oDiv.style.display="" //图层设置为可视
document.all.oDiv.style.display="none" //图层设置为隐藏
document.getElementId("oDiv") //通过 getElementId 引用对象
document.getElementId("oDiv").style=""
document.getElementId("oDiv").display="none"
/*document.all 表示 document 中所有对象的集合 只有 ie 支持此属性,因此也用来判断浏览器的种类*/
图层对象的 4 个属性
document.getElementById("ID").innerText //动态输出文本
document.getElementById("ID").innerHTML //动态输出
HTML document.getElementById("ID").outerText //同 innerText
document.getElementById("ID").outerHTML //同 innerHTML
<html>
<script language="javascript">
function change(){
document.all.oDiv.style.display="none"
}
</script>
<Div id="oDiv" onclick="change()">Text</Div>
</html>
<html>
<script language="javascript">
function changeText(){
document.getElementById("oDiv").innerText="NewText"
} </script>
<Div id="oDiv" onmouseover="changeText()">Text</Div>
</html>
6、Js获取当前日期时间及常用操作
var myDate = new Date();
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-????)
myDate.getMonth(); //获取当前月份(0-11,0代表1月)
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime=myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间
脚本库方法列表
.prototype.isLeapYear 判断闰年
Date.prototype.Format 日期格式化
Date.prototype.DateAdd 日期计算
Date.prototype.DateDiff 比较日期差
Date.prototype.toString 日期转字符串
Date.prototype.toArray 日期分割为数组
Date.prototype.DatePart 取日期的部分信息
Date.prototype.MaxDayOfDate 取日期所在月的最大
Date.prototype.WeekNumOfYear 判断日期所在年的第几周
StringToDate 字符串转日期型
IsValidDate 验证日期有效性
CheckDateTime 完整日期时间检查
daysBetween 日期天数差
js代码:
//---------------------------------------------------
// 判断闰年
//---------------------------------------------------
Date.prototype.isLeapYear = function()
{
return (0==this.getYear()%4&&((this.getYear()%100!=0)||(this.getYear()%400==0)));
}
//---------------------------------------------------
// 日期格式化
// 格式 YYYY/yyyy/YY/yy 表示年份
// MM/M 月份
// W/w 星期
// dd/DD/d/D 日期
// hh/HH/h/H 时间
// mm/m 分钟
// ss/SS/s/S 秒
//---------------------------------------------------
Date.prototype.Format = function(formatStr)
{
var str = formatStr;
var Week = ['日','一','二','三','四','五','六'];
str=str.replace(/yyyy|YYYY/,this.getFullYear());
str=str.replace(/yy|YY/,(this.getYear() % 100)>9?(this.getYear() % 100).toString():'0' + (this.getYear() % 100));
str=str.replace(/MM/,this.getMonth()>9?this.getMonth().toString():'0' + this.getMonth());
str=str.replace(/M/g,this.getMonth());
str=str.replace(/w|W/g,Week[this.getDay()]);
str=str.replace(/dd|DD/,this.getDate()>9?this.getDate().toString():'0' + this.getDate());
str=str.replace(/d|D/g,this.getDate());
str=str.replace(/hh|HH/,this.getHours()>9?this.getHours().toString():'0' + this.getHours());
str=str.replace(/h|H/g,this.getHours());
str=str.replace(/mm/,this.getMinutes()>9?this.getMinutes().toString():'0' + this.getMinutes());
str=str.replace(/m/g,this.getMinutes());
str=str.replace(/ss|SS/,this.getSeconds()>9?this.getSeconds().toString():'0' + this.getSeconds());
str=str.replace(/s|S/g,this.getSeconds());
return str;
}
//+---------------------------------------------------
//| 求两个时间的天数差 日期格式为 YYYY-MM-dd
//+---------------------------------------------------
function daysBetween(DateOne,DateTwo)
{
var OneMonth = DateOne.substring(5,DateOne.lastIndexOf ('-'));
var OneDay = DateOne.substring(DateOne.length,DateOne.lastIndexOf ('-')+1);
var OneYear = DateOne.substring(0,DateOne.indexOf ('-'));
var TwoMonth = DateTwo.substring(5,DateTwo.lastIndexOf ('-'));
var TwoDay = DateTwo.substring(DateTwo.length,DateTwo.lastIndexOf ('-')+1);
var TwoYear = DateTwo.substring(0,DateTwo.indexOf ('-'));
var cha=((Date.parse(OneMonth+'/'+OneDay+'/'+OneYear)- Date.parse(TwoMonth+'/'+TwoDay+'/'+TwoYear))/86400000);
return Math.abs(cha);
}
//+---------------------------------------------------
//| 日期计算
//+---------------------------------------------------
Date.prototype.DateAdd = function(strInterval, Number) {
var dtTmp = this;
switch (strInterval) {
case 's' :return new Date(Date.parse(dtTmp) + (1000 * Number));
case 'n' :return new Date(Date.parse(dtTmp) + (60000 * Number));
case 'h' :return new Date(Date.parse(dtTmp) + (3600000 * Number));
case 'd' :return new Date(Date.parse(dtTmp) + (86400000 * Number));
case 'w' :return new Date(Date.parse(dtTmp) + ((86400000 * 7) * Number));
case 'q' :return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + Number*3, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());
case 'm' :return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + Number, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());
case 'y' :return new Date((dtTmp.getFullYear() + Number), dtTmp.getMonth(), dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());
}
}
//+---------------------------------------------------
//| 比较日期差 dtEnd 格式为日期型或者有效日期格式字符串
//+---------------------------------------------------
Date.prototype.DateDiff = function(strInterval, dtEnd) {
var dtStart = this;
if (typeof dtEnd == 'string' )//如果是字符串转换为日期型
{
dtEnd = StringToDate(dtEnd);
}
switch (strInterval) {
case 's' :return parseInt((dtEnd - dtStart) / 1000);
case 'n' :return parseInt((dtEnd - dtStart) / 60000);
case 'h' :return parseInt((dtEnd - dtStart) / 3600000);
case 'd' :return parseInt((dtEnd - dtStart) / 86400000);
case 'w' :return parseInt((dtEnd - dtStart) / (86400000 * 7));
case 'm' :return (dtEnd.getMonth()+1)+((dtEnd.getFullYear()-dtStart.getFullYear())*12) - (dtStart.getMonth()+1);
case 'y' :return dtEnd.getFullYear() - dtStart.getFullYear();
}
}
//+---------------------------------------------------
//| 日期输出字符串,重载了系统的toString方法
//+---------------------------------------------------
Date.prototype.toString = function(showWeek)
{
var myDate= this;
var str = myDate.toLocaleDateString();
if (showWeek)
{
var Week = ['日','一','二','三','四','五','六'];
str += ' 星期' + Week[myDate.getDay()];
}
return str;
}
//+---------------------------------------------------
//| 日期合法性验证
//| 格式为:YYYY-MM-DD或YYYY/MM/DD
//+---------------------------------------------------
function IsValidDate(DateStr)
{
var sDate=DateStr.replace(/(^\s+|\s+$)/g,''); //去两边空格;
if(sDate=='') return true;
//如果格式满足YYYY-(/)MM-(/)DD或YYYY-(/)M-(/)DD或YYYY-(/)M-(/)D或YYYY-(/)MM-(/)D就替换为''
//数据库中,合法日期可以是:YYYY-MM/DD(2003-3/21),数据库会自动转换为YYYY-MM-DD格式
var s = sDate.replace(/[\d]{ 4,4 }[\-/]{ 1 }[\d]{ 1,2 }[\-/]{ 1 }[\d]{ 1,2 }/g,'');
if (s=='') //说明格式满足YYYY-MM-DD或YYYY-M-DD或YYYY-M-D或YYYY-MM-D
{
var t=new Date(sDate.replace(/\-/g,'/'));
var ar = sDate.split(/[-/:]/);
if(ar[0] != t.getYear() || ar[1] != t.getMonth()+1 || ar[2] != t.getDate())
{
//alert('错误的日期格式!格式为:YYYY-MM-DD或YYYY/MM/DD。注意闰年。');
return false;
}
}
else
{
//alert('错误的日期格式!格式为:YYYY-MM-DD或YYYY/MM/DD。注意闰年。');
return false;
}
return true;
}
//+---------------------------------------------------
//| 日期时间检查
//| 格式为:YYYY-MM-DD HH:MM:SS
//+---------------------------------------------------
function CheckDateTime(str)
{
var reg = /^(\d+)-(\d{ 1,2 })-(\d{ 1,2 }) (\d{ 1,2 }):(\d{ 1,2 }):(\d{ 1,2 })$/;
var r = str.match(reg);
if(r==null)return false;
r[2]=r[2]-1;
var d= new Date(r[1],r[2],r[3],r[4],r[5],r[6]);
if(d.getFullYear()!=r[1])return false;
if(d.getMonth()!=r[2])return false;
if(d.getDate()!=r[3])return false;
if(d.getHours()!=r[4])return false;
if(d.getMinutes()!=r[5])return false;
if(d.getSeconds()!=r[6])return false;
return true;
}
//+---------------------------------------------------
//| 把日期分割成数组
//+---------------------------------------------------
Date.prototype.toArray = function()
{
var myDate = this;
var myArray = Array();
myArray[0] = myDate.getFullYear();
myArray[1] = myDate.getMonth();
myArray[2] = myDate.getDate();
myArray[3] = myDate.getHours();
myArray[4] = myDate.getMinutes();
myArray[5] = myDate.getSeconds();
return myArray;
}
//+---------------------------------------------------
//| 取得日期数据信息
//| 参数 interval 表示数据类型
//| y 年 m月 d日 w星期 ww周 h时 n分 s秒
//+---------------------------------------------------
Date.prototype.DatePart = function(interval)
{
var myDate = this;
var partStr='';
var Week = ['日','一','二','三','四','五','六'];
switch (interval)
{
case 'y' :partStr = myDate.getFullYear();break;
case 'm' :partStr = myDate.getMonth()+1;break;
case 'd' :partStr = myDate.getDate();break;
case 'w' :partStr = Week[myDate.getDay()];break;
case 'ww' :partStr = myDate.WeekNumOfYear();break;
case 'h' :partStr = myDate.getHours();break;
case 'n' :partStr = myDate.getMinutes();break;
case 's' :partStr = myDate.getSeconds();break;
}
return partStr;
}
//+---------------------------------------------------
//| 取得当前日期所在月的最大天数
//+---------------------------------------------------
Date.prototype.MaxDayOfDate = function()
{
var myDate = this;
var ary = myDate.toArray();
var date1 = (new Date(ary[0],ary[1]+1,1));
var date2 = date1.dateAdd(1,'m',1);
var result = dateDiff(date1.Format('yyyy-MM-dd'),date2.Format('yyyy-MM-dd'));
return result;
}
//+---------------------------------------------------
//| 取得当前日期所在周是一年中的第几周
//+---------------------------------------------------
Date.prototype.WeekNumOfYear = function()
{
var myDate = this;
var ary = myDate.toArray();
var year = ary[0];
var month = ary[1]+1;
var day = ary[2];
document.write('< script language=VBScript\> \n');
document.write('myDate = Datue(''+month+'-'+day+'-'+year+'') \n');
document.write('result = DatePart('ww', myDate) \n');
document.write(' \n');
return result;
}
//+---------------------------------------------------
//| 字符串转成日期类型
//| 格式 MM/dd/YYYY MM-dd-YYYY YYYY/MM/dd YYYY-MM-dd
//+---------------------------------------------------
function StringToDate(DateStr)
{
var converted = Date.parse(DateStr);
var myDate = new Date(converted);
if (isNaN(myDate))
{
//var delimCahar = DateStr.indexOf('/')!=-1?'/':'-';
var arys= DateStr.split('-');
myDate = new Date(arys[0],--arys[1],arys[2]);
}
return myDate;
}
若要显示:当前日期加时间(如:2009-06-12 12:00)
function CurentTime()
{
var now = new Date();
var year = now.getFullYear(); //年
var month = now.getMonth() + 1; //月
var day = now.getDate(); //日
var hh = now.getHours(); //时
var mm = now.getMinutes(); //分
var clock = year + "-";
if(month < 10)
clock += "0";
clock += month + "-";
if(day < 10)
clock += "0";
clock += day + " ";
if(hh < 10)
clock += "0";
clock += hh + ":";
if (mm < 10) clock += '0';
clock += mm;
return(clock);
}
JS简单教程:
1、JS中的 for in 穷举
通过JavaScript代码添加到对象的属性是可枚举的
内部对象的预定义属性(如方法)通常是不可枚举的
可用 propertyIsEnumerable 判断指定属性在对象中是否可以穷举
var a = {x:1,y:2};
a.propertyIsEnumerable("x")
// true
{x:1,y:2}.propertyIsEnumerable("x")
// SyntaxError: Unexpected token :
2、JavaScript map方法
对数组的每个元素调用定义的回调函数并返回包含结果的数组。
对数组用指定的方法。
array1.map(callbackfn[, thisArg])
________________________________________
参数 定义
array1 必需。 一个数组对象。
callbackfn 必需。 一个接受最多三个参数的函数。 对于数组中的每个元素,map 方法都会调用 callbackfn 函数一次。
thisArg 可选。 可在 callbackfn 函数中为其引用 this 关键字的对象。 如果省略 thisArg,则 undefined 将用作 this 值。
________________________________________
返回值
其中的每个元素均为关联的原始数组元素的回调函数返回值的新数组。
________________________________________
异常
如果 callbackfn 参数不是函数对象,则将引发 TypeError 异常。
________________________________________
备注
对于数组中的每个元素,map 方法都会调用 callbackfn 函数一次(采用升序索引顺序)。 不为数组中缺少的元素调用该回调函数。
除了数组对象之外,map 方法可由具有 length 属性且具有已按数字编制索引的属性名的任何对象使用。
________________________________________
回调函数语法 :
function callbackfn(value, index, array1)
回调参数 定义
value 数组元素的值。
index 数组元素的数字索引。
array1 包含该元素的数组对象。
修改数组对象
数组对象可由回调函数修改。
示例
function AreaOfCircle(radius) {
var area = Math.PI * (radius * radius);
return area.toFixed(0);
}
var radii = [10, 20, 30];
var areas = radii.map(AreaOfCircle);
document.write(areas); // Output: // 314,1257,2827
下面的示例阐释 thisArg 参数的用法,该参数指定对其引用 this 关键字的对象。
var obj = {
divisor: 10,
remainder: function (value) {
return value % this.divisor;
}
}
var numbers = [6, 12, 25, 30];
var result = numbers.map(obj.remainder, obj);
document.write(result); // Output: // 6,2,5,0
在下面的示例中,内置 JavaScript 方法用作回调函数。
var numbers = [9, 16];
var result = numbers.map(Math.sqrt);
document.write(result); // Output: 3,4
map 方法可应用于字符串。 下面的示例阐释了这一点。
function threeChars(value, index, str) {
return str.substring(index - 1, index + 2);
}
var word = "Thursday";
var result = [].map.call(word, threeChars);
// var result = Array.prototype.map.call(word, threeChars);
document.write(result); // Output: // Th,Thu,hur,urs,rsd,sda,day,ay
3、JS类型转换 方法大全
转换成数字
ECMAScript提供了两种把非数字的原始值转换成数字的方法,即parseInt()和parseFloat()。
注意:只有对String类型(Number除外)调用这些方法,才能正确运行对其他类型返回的都是NaN。
例如:
Js代码
var iNum1 = parseInt(“1234blue”);//returns 1234
var iNum2 = parseInt(“oxA”); //returns 10
var iNum3 = parseInt(“22.5″); //returns 22
var iNum4 = parseInt(“blue”); //returns NaN
以下其他类型转换
一、类型转换
1.转换成字串
ECMAScript的Boolean值、数字和字串的原始值的有趣之处在于它们是伪对象,这意味着它们实际上具有属性和方法。
如:
Js代码
var sColor = “blue”;
alert(sColor.length);//outputs “4″
总而言之,3种主要的原始值Boolean值、数字和字串都有toString()方法。ECMAScript定义的所有对象都有toString()方法,无论它是伪对象,还是真的对象。
Boolean型的toString()方法只是输出”true”或”false”,结果由变量的值决定:
Js代码
var bFound = false;
alert(bFound.toString());//outputs “false”
Number类型的toString()方法比较特殊,它有两种模式,即默认模式和基模式,采用默认模式,toString()方法只是用相应的字符串输出数字值(无论是整数、浮点数还是科学记数法)。
Js代码
var iNum1 = 10;
var fNum2 = 10.0;
alert(iNum1.toString()); //outputs “10″
alert(fNum2.toString()); //outputs “10″
采用Number类型的toString()方法的基模式,可以用不同的基(进制基数)输出数字。
Js代码
var iNum = 10;
alert(iNum.toString(2)); //outputs “1010″
alert(iNum.toString(8)); //outputs “12″
alert(iNum.toString(16)); //outputs “A”
2.转换成数字
ECMAScript提供了两种把非数字的原始值转换成数字的方法,即parseInt()和parseFloat()。
注意:只有对String类型(Number除外)调用这些方法,才能正确运行对其他类型返回的都是NaN。
例如:
Js代码
var iNum1 = parseInt(“1234blue”);//returns 1234
var iNum2 = parseInt(“oxA”); //returns 10
var iNum3 = parseInt(“22.5″); //returns 22
var iNum4 = parseInt(“blue”); //returns NaN
parseInt()方法还有基模式,可以把二进制、八进制、十六进制或者其他任何进制的字符串转换成十进制整数。第二个参数指定按哪一种进制来解析。
Js代码
var iNum1 = parseInt(“AF”,16);// returns 175
var iNum2 = parseInt(“10″,2); // returns 2
var iNum3 = parseInt(“10″,8); //returns 8
var iNum4 = parseInt(“10″,10); //returns 10
说明:如果十进制数包含前导0,那么最好采用基数10,否则得到的是八进制的值。
Js代码
var iNum1 = parseInt(“010″); // returns 8
var iNum2 = parseInt(“010″,8); //returns 8
var iNum3 = parseInt(“010″,10);//returns 10
parseFloat() 方法与parseInt()方法的处理方式相似,从位置0开始查看每个字符,直到找到第一个非有效的字符为止,然后把该字符之前的字串转换成数字。对于这 个方法来说,第一个出现的小数点是有效字符。如果用两个小数点,第二个小数点将被看作无效的。使用该方法的另一个不同之处在于,字串必须以十进制形式表示 浮点数。
Js代码
var fNum1 = parseFloat(“1234blue”); //returns 1234.0
var fNum2 = parseFloat(“0xA”); //returns NaN
var fNum3 = parseFloat(“22.5″); //returns 22.5
var fNum4 = parseFloat(“22.34.5″);//returns 22.34
var fNum5 = parseFloat(“0908″);//returns NaN
var fNum6 = parseFloat(“blue”);//returns NaN
3.强制类型转换
ECMAScript中可用的3种强制类型转换如下:
(1).Boolean(value)
把给定的值转换成Boolean型。
当要转换的值是至少有一个字符的字符串、非0数字或对象时,Boolean()函数将返回true。如果该值是空字符串、数字0、undefined或null,它将返回false。
如:
Js代码
var b1 = Boolean(“”); // false;
var b2 = Boolean(“hi”);//true
var b3 = Boolean(100);//true
var b4 = Boolean(null);//false
var b5 = Boolean(0);//false
var b6 = Boolean(new Object());//true
(2).Number(value)
把给定的值转换成数字(可以是整数或浮点数)。
还 记得parseInt()和parseFloat()方法只转换第一个无效字符之前的字符串,因此”4.5.6″将被转换为”4.5″。用 Number()进行强制类型转换,”4.5.6″将返回NaN,因为整个字符串值不能转换成数字。如果字符串能被完整地转换,Number()将判断是 调用parseInt()方法还是调用parseFloat()方法。
如:
Js代码
Number(false);//0
Number(true);//1
Number(undefined);//NaN
Number(null);//0
Number(“5.5″);//5.5
Number(“56″);//56
Number(“5.6.7″);//NaN
Number(new Object());//NaN
Number(100);//100
(3).String(value)
把给定的值转换成字串。
与调用toString()方法的唯一不同之处在于,对null或undefined值强制类型转换可以生成字符串而不引发错误:
Js代码
var s1 = String(null);//”null”
var oNull = null;
var s2 = oNull.toString();//causes an error
二、引用类型
引用类型通常叫作类(class),也就是说,遇到引用值时,所处理的就是对象。ECMAScript定义了“对象定义”,逻辑上等价于其他程序设计语言中的类。
1.Object类
ECMAScript中的所有类都由这个类继承而来,Object类中的所有属性和方法都会出现在其他类中(被覆盖)。
Object类的属性:
(1).Constructor—-对创建对象的函数的引用(指针)。对于Object类,该指针指向原始的object()函数。
(2).Prototype—-对该对象的对象原型的引用。对于所有的类,它默认返回Object对象的一个实例。 一、类型转换
1.转换成字串
ECMAScript的Boolean值、数字和字串的原始值的有趣之处在于它们是伪对象,这意味着它们实际上具有属性和方法。
如:
Js代码
var sColor = “blue”;
alert(sColor.length);//outputs “4″
总而言之,3种主要的原始值Boolean值、数字和字串都有toString()方法。ECMAScript定义的所有对象都有toString()方法,无论它是伪对象,还是真的对象。
Boolean型的toString()方法只是输出”true”或”false”,结果由变量的值决定:
Js代码
var bFound = false;
alert(bFound.toString());//outputs “false”
Number类型的toString()方法比较特殊,它有两种模式,即默认模式和基模式,采用默认模式,toString()方法只是用相应的字符串输出数字值(无论是整数、浮点数还是科学记数法)。
Js代码
var iNum1 = 10;
var fNum2 = 10.0;
alert(iNum1.toString()); //outputs “10″
alert(fNum2.toString()); //outputs “10″
采用Number类型的toString()方法的基模式,可以用不同的基(进制基数)输出数字。
Js代码
var iNum = 10;
alert(iNum.toString(2)); //outputs “1010″
alert(iNum.toString(8)); //outputs “12″
alert(iNum.toString(16)); //outputs “A”
parseInt()方法还有基模式,可以把二进制、八进制、十六进制或者其他任何进制的字符串转换成十进制整数。第二个参数指定按哪一种进制来解析。
Js代码
var iNum1 = parseInt(“AF”,16);// returns 175
var iNum2 = parseInt(“10″,2); // returns 2
var iNum3 = parseInt(“10″,8); //returns 8
var iNum4 = parseInt(“10″,10); //returns 10
说明:如果十进制数包含前导0,那么最好采用基数10,否则得到的是八进制的值。
Js代码
var iNum1 = parseInt(“010″); // returns 8
var iNum2 = parseInt(“010″,8); //returns 8
var iNum3 = parseInt(“010″,10);//returns 10
parseFloat() 方法与parseInt()方法的处理方式相似,从位置0开始查看每个字符,直到找到第一个非有效的字符为止,然后把该字符之前的字串转换成数字。对于这 个方法来说,第一个出现的小数点是有效字符。如果用两个小数点,第二个小数点将被看作无效的。使用该方法的另一个不同之处在于,字串必须以十进制形式表示 浮点数。
Js代码
var fNum1 = parseFloat(“1234blue”); //returns 1234.0
var fNum2 = parseFloat(“0xA”); //returns NaN
var fNum3 = parseFloat(“22.5″); //returns 22.5
var fNum4 = parseFloat(“22.34.5″);//returns 22.34
var fNum5 = parseFloat(“0908″);//returns NaN
var fNum6 = parseFloat(“blue”);//returns NaN
3.强制类型转换
ECMAScript中可用的3种强制类型转换如下:
(1).Boolean(value)
把给定的值转换成Boolean型。
当要转换的值是至少有一个字符的字符串、非0数字或对象时,Boolean()函数将返回true。如果该值是空字符串、数字0、undefined或null,它将返回false。
如:
Js代码
var b1 = Boolean(“”); // false;
var b2 = Boolean(“hi”);//true
var b3 = Boolean(100);//true
var b4 = Boolean(null);//false
var b5 = Boolean(0);//false
var b6 = Boolean(new Object());//true
(2).Number(value)
把给定的值转换成数字(可以是整数或浮点数)。
还 记得parseInt()和parseFloat()方法只转换第一个无效字符之前的字符串,因此”4.5.6″将被转换为”4.5″。用 Number()进行强制类型转换,”4.5.6″将返回NaN,因为整个字符串值不能转换成数字。如果字符串能被完整地转换,Number()将判断是 调用parseInt()方法还是调用parseFloat()方法。
如:
Js代码
Number(false);//0
Number(true);//1
Number(undefined);//NaN
Number(null);//0
Number(“5.5″);//5.5
Number(“56″);//56
Number(“5.6.7″);//NaN
Number(new Object());//NaN
Number(100);//100
(3).String(value)
把给定的值转换成字串。
与调用toString()方法的唯一不同之处在于,对null或undefined值强制类型转换可以生成字符串而不引发错误:
Js代码
var s1 = String(null);//”null”
var oNull = null;
var s2 = oNull.toString();//causes an error
二、引用类型
引用类型通常叫作类(class),也就是说,遇到引用值时,所处理的就是对象。ECMAScript定义了“对象定义”,逻辑上等价于其他程序设计语言中的类。
1.Object类
ECMAScript中的所有类都由这个类继承而来,Object类中的所有属性和方法都会出现在其他类中(被覆盖)。
Object类的属性:
(1).Constructor—-对创建对象的函数的引用(指针)。对于Object类,该指针指向原始的object()函数。
(2).Prototype—-对该对象的对象原型的引用。对于所有的类,它默认返回Object对象的一个实例。
4、arguments.callee 与arguments. caller调用自身
一、Arguments
该对象代表正在执行的函数和调用他的函数的参数。
[function.]arguments[n]
参数function :选项。当前正在执行的 Function 对象的名字。
n :选项。要传递给 Function 对象的从0开始的参数值索引。
说明:Arguments是进行函数调用时,除了指定的参数外,还另外创建的一个隐藏对象。
Arguments是个类似数组但不是数组的对象,说他类似数组是因为其具备数组相同的访问性质及方式,能够由arguments[n]来访问对应的单个参数的值,并拥有数组长度属性length。还有就是arguments对象存储的是实际 传递给函数的参数,而不局限于函数声明所定义的参数列表,而且不能显式创建 arguments 对象。
在此添加了一个说明arguments不是数组(Array类)的代码:
Array.prototype.selfvalue = 1;
alert(new Array().selfvalue);
function testAguments(){
alert(arguments.selfvalue);
}
运行代码您会发现第一个alert显示1,这表示数组对象拥有selfvalue属性,值为1,而当您调用函数testAguments时,您会发现显示的是“undefined”,说明了不是arguments的属性,即arguments并不是个数组对象。
二、caller
返回一个对函数的引用,该函数调用了当前函数。
functionName.caller
functionName 对象是所执行函数的名称。
说明:对于函数来说,caller 属性只有在函数执行时才有定义。假如函数是由顶层调用的,那么 caller 包含的就是 null 。假如在字符串上下文中使用 caller 属性,那么结果和 functionName.toString 相同,也就是说,显示的是函数的反编译文本。
下面的例子说明了 caller 属性的用法:
function callerDemo() {
if (callerDemo.caller) {
var a= callerDemo.caller.toString();
alert(a);
} else{
alert("this is a top function");
}
}
function handleCaller() {
callerDemo();
}
三、callee
返回正被执行的 Function 对象,也就是所指定的 Function 对象的正文。
[function.]arguments.callee
可选项 function 参数是当前正在执行的 Function 对象的名称。
说明:callee 属性的初始值就是正被执行的 Function 对象。
callee 属性是 arguments 对象的一个成员,他表示对函数对象本身的引用,这有利于匿名函数的递归或确保函数的封装性,例如下边示例的递归计算1到n的自然数之和。而该属性仅当相关函数正在执行时才可用。更有需要注意的是callee拥有length属性,这个属性有时候用于验证还是比较好的。arguments.length是实参度,arguments.callee.length是形参长度,由此能够判断调用时形参长度是否和实参长度一致。
//callee能够打印其本身
function calleeDemo() {
alert(arguments.callee);
}
//递归计算
var sum = function(n){
if (n <= 0) return 1;
else return n +arguments.callee(n - 1)
}
比较一般的递归函数:
var sum = function(n){
if (1==n) return 1;
else return n + sum (n-1);
}
调用时:alert(sum(100));
其中函数内部包含了对sum自身的引用,函数名仅仅是个变量名,在函数内部调用sum即相当于调用一个全局变量,不能很好的体现出是调用自身,这时使用callee会是个比较好的方法。
四、apply and call
他们的作用都是将函数绑定到另外一个对象上去运行,两者仅在定义参数方式有所区分:
apply(thisArg,argArray);
call(thisArg[,arg1,arg2…] ]);
即任何函数内部的this指针都会被赋值为thisArg,这可实现将函数作为另外一个对象的方法运行的目的
apply的说明:假如 argArray 不是个有效的数组或不是 arguments 对象,那么将导致一个 TypeError。
假如没有提供 argArray 和 thisArg任何一个参数,那么 Global 对象将被用作 thisArg,并且无法被传递任何参数。
call的说明:call 方法可将一个函数的对象上下文从初始的上下文改变为由thisArg指定的新对象。
假如没有提供thisArg参数,那么Global对象被用作thisArg
相关技巧:应用call和apply有一个技巧在里面,就是用call和apply应用另一个函数(类)以后,当前的
函数(类)就具备了另一个函数(类)的方法或是属性,这也能够称之为“继承”。看下面示例:
// 继承的演示
function base() {
this.member = " dnnsun_Member";
this.method = function() {
window.alert(this.member);
}
}
function extend() {
base.call(this);
window.alert(member);
window.alert(this.method);
}
上面的例子能够看出,通过call之后,extend能够继承到base的方法和属性。
顺便提一下,在javascript框架prototype里就使用apply来创建一个定义类的模式,
其实现代码如下:
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
解析:从代码看,该对象仅包含一个方法:Create,其返回一个函数,即类。但这也同时是类的构造函数,其中调用initialize,而这个方法是在类创建时定义的初始化函数。通过如此途径,就能够实现prototype中的类创建模式
5、createTextRange()的使用总结
<script language="javascript">
function test()
{
var rng=document.body. createTextRange();
alert(rng.text)
}
function test1()
{
var rng=document.body. createTextRange();
alert(rng.htmlText)
}
</script>
<input type="button" οnclick="test()" value="text">
<input type="button" οnclick="test1()" value="htmlText">
获取指定文本框中的选中的文字:只响应第一个文本框
<input id="inp1" type="text" value="1234567890">
<input id="inp2" type="text" value="9876543210">
<input type="button" οnclick="test()" value="确定">
<script language="javascript">
function test()
{
var o=document.getElementById("inp1")
var r = document.selection.createRange();
if(o. createTextRange().inRange(r))
alert(r.text);
}
</script>
页面文本倒序查找
abababababababa
<input value="倒序查找a" οnclick=myfindtext("a") type="button">
<script language ='javascript'>
var rng = document.body. createTextRange();
function myfindtext(text)
{
rng.collapse(false);
if(rng.findText(text,-1,1))
{
rng.select();
rng.collapse(true);
}else
{alert("end");}
}
</script>
聚焦控件后把光标放到最后
<script language="javascript">
function setFocus()
{
var obj = event.srcElement;
var txt =obj. createTextRange();
txt.moveStart('character',obj.value.length);
txt.collapse(true);
txt.select();
}
</script>
<input type="text" value="http://toto369.net" οnfοcus="setFocus()">
得到文本框内光标位置
<script language="javascript">
function getPos(obj){
obj.focus();
var s=document.selection.createRange();
s.setEndPoint("StartToStart",obj. createTextRange())
alert(s.text.length);
}
</script>
<input type="text" id="txt1" value="1234567890">
<input type="button" value="得到光标位置" οnclick=getPos(txt1)>
控制input框内光标位置
<script language="javascript">
function setPos(num)
{
text1.focus();
var e =document.getElementById("text5");
var r =e. createTextRange();
r.moveStart('character',num);
r.collapse(true);
r.select();
}
</script>
<input type="text" id="text5" value="1234567890">
<select οnchange="setPos(this.selectedIndex)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
选中文本框中的一段文字
<script language=javascript>
function sel(obj,num)
{
var rng=obj. createTextRange()
var sel = rng.duplicate();
sel.moveStart("character", num);
sel.setEndPoint("EndToStart", rng);
sel.select();
}
</script>
<input type="text" id="text1" value="1234567890">
<select οnchange="sel(text1,this.value)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
控制文本框内光标的移动
<input type="button" value="<" οnclick=go(-1)>
<input id="demo" value="这里是文字">
<input type="button" value=">" οnclick=go(1)>
<script language="javascript">
function go(n){
demo.focus();
with(document.selection.createRange())
{
moveStart("character",n);
collapse();
select();
}
}
</script>