JavaScript 对象详解----重要
2012-03-10 14:18 臭小子1983 阅读(379) 评论(0) 编辑 收藏 举报一、Array数组对象
一、声明数组的方法：
1、var arr = new Array();
arr[0] = "1";
arr[0] = "2";
2、var arr = new Array(4,23,2,323,asdf);
3、var arr = ["aaa", "bbb", {name:"guang", age:"28"}];
一、属性：
1、constructor：返回对创建此对象的数组函数的引用。
var test=new Array();
if (test.constructor==Array){
document.write("This is an Array");
}
if (test.constructor==Boolean){
document.write("This is a Boolean");
}
if (test.constructor==Date){
document.write("This is a Date");
}
2、length：返回数组中元素的数目。
var arr = new Array("aaa", "bbb", "ccc"); arr.length;
3、prototype：实现
二、方法
1、 push()：可以在数组的末尾插入一个或多个元素，并返回新的长度
var a = []; //建立数组 a.push ("a"); a.push ("b"); a.push ("c"); alert(a); //结果是a,b,c;
2、 pop()：用于删除数组的最后一个元素
var arr = new Array("百度","腾讯QQ","网易"); document.write(arr.pop()+"<br>"); // 输出网易 document.write(arr); // 输出百度，腾讯QQ
3、 shift()：用于把数组的第一个元素从其中删除，并返回第一个元素的值
var Arr = new Array("土豆网","优酷网","网易") document.write(Arr+"<br />"); // 输出土豆网,优酷网,网易 document.write(Arr.shift() +"<br />"); // 输出土豆网 document.write(Arr); // 输出优酷网,网易
4、 unshift()：可以将一个或多个元素插入到数组的头部
var arr = new Array("土豆网","优酷网") document.write(arr.unshift("网易") + "<br />") //输出网易,土豆网,优酷document.write(arr.unshift('aa','bb','cc') +"<br />"); //输出网易,土豆网,优酷,aa,bb,cc
5、 join()：可以把一个数组的所有元素都转换成字符串，然后把它们连接起来并以逗号分割.
var a = [1,2,3]; var s = a.join(); // 输出字符串的1,2,3
6、 reverse()：将颠倒的数组元素的顺序并返回颠倒后的数据。
var arr = new Array('凤翔俯','承天门','三贤府')
document.write(arr.reverse()); // 输出三贤府，承天门, 凤翔俯
7、 sort()：在原数组上对数组元素进行排序
注： 若 a 小于 b，在排序后的数组中 a 应该出现在b 之前，则返回一个小于 0 的值。 若 a 等于 b，则返回 0。 若 a 大于 b，则返回一个大于 0 的值。 function sortNumber(a,b){ return a - b } var arr = new Array("10","5","40","25","1000","1"); document.write(arr + "<br />") // 10,1000,20,40,5 document.write(arr.sort(sortNumber)) // 5,10,20,40,1000 例2： var arr = new Array("10","5","40","25","1000","1"); document.write(arr.sort()) // 1,10,1000,20,40,5
9、concat()：用于连接两个或多个数组，并创建返回一个数组.
var arr = new Array("中彩网","赶集网北京","北青网"); document.write(arr.concat("中央电视台","早报网"); // 输出中彩网,赶集网北京,北青网,中央电视台,早报
10、slice()：数组由第一个参数指定的元素到第二个元素为目，例如参数-1指定数组最后一个元素，-3就是倒数第三个。
var color = new Array('red','blue','yellow','black');
var color2 = color.slice(1,2);
alert(color); //输出 red,blue,yellow,black
alert(color2); //输出 blue;注意：这里只有第二项一个值
11、splice(index,howmany,element1,…,elementX)：用于插入、删除或替换数组的元素
splice是JS中数组功能最强大的方法，它能够实现对数组元素的删除、插入、替换操作，返回值为被操作的值。
var color = [1,2,3,4,5,6,7];
splice删除： color.splice(1,2) （删除color中的2和3两项）； 参数1：指定数组的索引 参数2：要删除几项
删除指定下标的元素：
var arr = ["George", "John", "Thomas", "James", "Adrew", "Martin"]
arr.splice(2, 1); // 只删除第三项，注第二个参数要为1
console.log(arr) // 返回"George", "John", "James", "Adrew", "Martin"
splice插入： color.splice(1,0,'brown','pink') （在color键值为1的元素前插入两个值）；
splice替换： color.splice(1,2,'brown','pink') （在color中替换1、2元素）；
var color = new Array('red','blue','yellow','black');
var color2 = color.splice(2,3,'brown','pink');
alert(color); // red,blue,brown,pink
alert(color2); // yellow,black
12、toString()：将数组中每一个元素都转换成字符串，并返回结果。
var arr = [1,2,3].toString();
13、toLocaleString()：是toString()方法的本地化，下面的例子就说明来查看本计算机的日期
var d, s; // 声明变量。 d = new Date(); // 创建 Date 对象。 s = "Current setting is "; s += d.toLocaleString(); // 转换为当前区域。 return(s); // 返回转换的日期。
实例：
一、让数组里的内容随机排列
$(function () { var firstArr = ["HTML","XHTML","CSS","JavaScript","JSON","RIA","jQuery"]; var lastArr = []; for(var i=firstArr.length; i>=1; i--){ // 随机提取数组里的数 var len = Math.floor(Math.random()*firstArr.length); lastArr.push(firstArr[len]); firstArr.splice(len,1) } for(var i=0; i<lastArr.length; i++){ $("#test1").append(lastArr[i]+"，"); } })
二、String字符串对象
JavaScript转义符
| 转义序列 | 字符 |
|---|---|
| \b | 退格 |
| \f | 走纸换页 |
| \n | 换行 |
| \r | 回车 |
| \t | 横向跳格 (Ctrl-I) |
| \' | 单引号 |
| \" | 双引号 |
| \\ | 反斜杠 |
一、属性：
1、length：字符串长度
var str = "国羽曝四短板"; alert(str.length);
2、constructor：
3、prototype：
二、方法：
1、anchor() ：方法用于创建 HTML 锚
var txt="Hello world!"
document.write(txt.anchor("myanchor"))
2、big() ：方法用于把字符串显示为大号字体
var str="Hello world!"
document.write(str.big())
3、blink()： 方法用于显示闪动的字符串
4、bold()：方法用于把字符串显示为粗体
5、charAt() :方法可返回指定位置的字符。
var str="Hello world!" document.write(str.charAt(1)) // 返回e 参数下标从0开始
6、charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。
var str="Hello world!" document.write(str.charCodeAt(1)) // 输出101 e的Unicode码为101
7、indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果没有查找到返回-1
var str="Hello world!" document.write(str.indexOf("Hello") + "<br />") // 0 document.write(str.indexOf("World") + "<br />") // -1 document.write(str.indexOf("world")) // 6
8、lastIndexOf()：方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
9、concat() 方法用于连接两个或多个字符串
var str1="Hello " var str2="world!" document.write(str1.concat(str2)); // 输出 Hello world;
10、replace()：用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
var str = "让宝宝吃饭不再成为头痛的难题"; document.write(str.replace(/宝宝/,"孩子")); // 输出让孩子吃饭不再成为头痛的难题
// 或者第一个参数可以写字符串：
var getNode = document.getElementsByTagName("a")[0].innerHTML;
var newNode = getNode.replace("卫生厅","派出所");
document.getElementsByTagName("a")[0].innerHTML = newNode;
11、search()：检索与正则表达式相匹配的值。如果没有匹配返回-1。
var str="Visit W3School!" document.write(str.search(/W3school/)) // 输出6 document.write(str.search(/w3school/)) // 输出-1
// 第一个参数可以定字符串
var getNode = document.getElementsByTagName("a")[0].innerHTML;
var newNode = getNode.search("卫生厅");
document.getElementsByTagName("a")[0].innerHTML = newNode;
12、slice(开始，结束) 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
var str="Hello happy world!" document.write(str.slice(6)) // 输happy world! var str="Hello happy world!" document.write(str.slice(6,11)) // 提取第六个字符到第11个字符 输出happy
13、split()：方法用于把一个字符串分割成字符串数组。输出正常以”，”符号相分隔。
var str="How are you doing today?" document.write(str.split(" ") + "<br />") // 输出How,are,you,doing,today? document.write(str.split("") + "<br />") // 输出H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,? document.write(str.split(" ",3)) // 输出How,are,you
14、substr(start,length) 方法可在字符串中抽取从 start 下标开始的指定数目的字符。如果start为-1，则是从最后一个字符开始，如果-2，则倒数第二个字符开始
var str="[精彩动画]让好听的儿歌伴宝宝快乐长大"; document.write(str.substr(3,7)); // 输出 动画]让好听的
15、fixed() 方法用于把字符串显示为打字机字体
var str="Hello world!"
document.write(str.fixed())
16、fontcolor() 方法用于按照指定的颜色来显示字符串
17、fromCharCode() 可接受一个或多个指定的 Unicode 值，然后返回一个字符串
document.write(String.fromCharCode(72,69,76,76,79))
document.write("<br />")
document.write(String.fromCharCode(65,66,67))
18、italics()： 方法用于把字符串显示为斜体
19、link()：方法用于把字符串显示为超链接。
20、localeCompare()：用本地特定的顺序来比较两个字符串。
21、match()：方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。如果找到输出这个值，如果没检索到输出null。
var str="Hello world!"
document.write(str.match("world") + "<br />") // 输出world
document.write(str.match("World") + "<br />") // 输出null
document.write(str.match("world!")) // 输出world!
var str="1 plus 2 equal 3"
document.write(str.match(/\d+/g)) // 输出 1,2,3
22、small() 方法用于把字符串显示为小号字
23、strike() 方法用于显示加删除线的字符串
24、sub() 方法用于把字符串显示为下标
25、toLocaleLowerCase()：把字符串转换为小写
26、toLocaleUpperCase()：把字符串转换为大写。
27、toLowerCase()：把字符串转换为小写。
28、toUpperCase()：把字符串转换为大写
29、toString()：
30、valueOf() 方法可返回 String 对象的原始值。
31、parseInt(string)：将字符串提出字数，也可以将小数变成正数。
32、parseFloat(string)：
三、Window对象
一、Window大写表示浏览器窗口对象，而小写window表示窗口句柄
1、window // 窗口自身
2、window.self // 引用本窗口window=window.self
3、window.closed // 表示窗口是否已经关闭
---------------------------------------------------------------------
二、对象方法
7、window.alert("text") //提示信息对话框
8、window.confirm("text") //确认对话框
9、window.prompt("text") //要求键盘输入对话框
10、window. setInterval("action",time) //每隔指定的时间(毫秒)就执行一次操作
11、window.clearInterval() //清除时间设置作用就是终止循环
12、window.setTimeout(action,time) //隔了指定的时间(毫秒)执行一次操作
13、window.open() //打开新的窗口
14、window.close() //关闭脚本所在窗口
15、window.alert() //弹出简提示
16、window.blur() //窗口失去焦点
17、window.focus() //窗口获得焦点
18、window.moveBy() //移动窗口
19、window.moveTo() //移动窗口
20、window.navigate() //浏览某个URL
21、window.print() //打印当前窗口文档内容
22、window.prompt() //询问对话框
23、window.resizeBy() //改变窗口大小
24、window.resizeTo() //改变窗口大小
25、window.scroll() //控制滚动条
26、window.scrollBy() //控制滚动条
27、window.scrollTo() //控制滚动条
三、对象属性
1、window.clientInformation //客户端信息
2、window.clipboardData //剪贴板数据
3、window.closed //当前窗口是否关闭
4、window.defaultStatus //设定窗口状态栏信息
5、window.dialogArgument //模态对话框参数
6、dialogHeight //模态对话框高度
7、dialogLeft //模态对话框左上角横坐标
8、dialogTop //模态对话框左上角纵坐标
9、dialogWidth //模态对话框宽度
10、window.document //当前窗口的Document对象引用
11、window.event //事件参数
12、window.frameElement //窗口框架元素引用
13、window.frames //当前窗口中的框架
14、window.history //当前窗口中的History对象引用
15、window.images //当前窗口中的图片引用
16、window.length //当前窗口的框架的数量
17、window.location //URL地址，设置这个属性可以打开新的页面
18、window.name //为窗口命名
19、window.navigator //当前窗口的Navigator对象引用
20、window.opener //父窗口引用
21、window.resizable //窗口是否允许改变大小
22、window.screenLeft //屏幕偏移量
23、window.scrrenTop //屏幕偏移量
24、window.self //当前窗口自身引用
四、成员对象
window.event
window.document //见document对象详解
window.history
window.screen
window.navigator
window.external
---------------------------------------------------------------------
五、window.history历史对象
window.history.length //浏览过的页面数
history.back() //后退
history.forward() //前进
history.go(i) //到历史清单的第i位
//i>0前进,i<0后退
---------------------------------------------------------------------
六、window.screen对象
window.screen.width //屏幕宽度
window.screen.height //屏幕高度
window.screen.colorDepth //屏幕色深
window.screen.availWidth //可用宽度
window.screen.availHeight //可用高度(除去任务栏的高度)
---------------------------------------------------------------------
七、window.external对象
window.external.AddFavorite("地址","标题" ) //把网站添加到收藏夹
---------------------------------------------------------------------
八、window.navigator浏览器对象
navigator.appCodeName // 浏览器代码名 :appCodeName：Mozilla
navigator.appName // 浏览器的名称 :appName：Netscape
navigator.appVersion // 浏览器版本(包括系统版本)也包括了appName和appCodeName中的所有信息
navigator.platform // 操作系统类型 win32
navigator.appMinorVersion // 浏览器补丁版本
navigator.cpuClass // cpu类型 x86
navigator.plugins
navigator.opsProfile
navigator.userProfile
navigator.systemLanguage //客户系统语言 zh-cn简体中文
navigator.userLanguage //用户语言,同上
navigator.userAgent
navigator.onLine //用户否在线
navigator.cookieEnabled //浏览器是否支持cookie
navigator.mimeTypes
---------------------------------------------------------------------
九、Location对象
1、host：设置或检索位置或 URL 的主机名和端口号
2、hostname：设置或检索位置或 URL 的主机名部分
3、href： 设置或检索完整的 URL 字符串
4、assign("url") 加载 URL 指定的新的 HTML 文档。
5、reload() 重新加载当前页
6、replace("url") 通过加载 URL 指定的文档来替换当前文档
7、location.pathname 返回 --返回 /test/test.htm
1.1 BOM
BOM提供了一组以window为核心的对象，实现了对浏览器窗口的访问控制。BOM中定义了6种重要的对象：
- window对象表示浏览器中打开的窗口；
- document对象表示浏览器中加载页面的文档对象；
- location对象包含了浏览器当前的URL信息；
- navigation对象包含了浏览器本身的信息；
- screen对象包含了客户端屏幕及渲染能力的信息；
- history对象包含了浏览器访问网页的历史信息。
|
方法 |
用法 |
说明 |
|
window.moveBy 将浏览器窗口移动到指定位置（相对定位） |
window.moveBy(dx,dy) |
出于安全性和对用户有好的考虑，不允许使用JavaScript脚本将窗口移动到可视区域之外，必须始终保证浏览器窗口在屏幕的可视区域。 |
|
window.moveTo 将浏览器窗口移动到指定位置 （绝对定位） |
window.moveBy(x,y) |
如果指定的坐标(x,y)会使部分或全部窗口置于可视区域之外，那么窗口将停留在最接近屏幕边缘的位置。 |
|
window.resizeBy 将浏览器窗口的尺寸改变指定的宽度和高度（相对调整窗口大小） |
window.resizeBy(dw,dh) |
|
|
window.resizeTo 将浏览器窗口的尺寸改变指定的宽度和高度（绝对调整窗口大小） |
window.resizeTo(w,h) |
指定的宽度和高度不能为负数 |
2. 打开新窗口
用法：window.open([url],[target],[options])
参数url：打开新新窗口将要加载的url。如果未指定参数，将默认加载空白页。如：window.open("test.htm");
参数target：新打开窗口的定位目标或者名称
_self 在当前窗口加载新页面
_blank 在新窗口加载新页面
_parent 在父窗口加载新页面
_top 在顶层窗口加载新页面
参数options：新打开窗口的属性，是由若干个选项组成，选项之间用逗号分隔开，每个选项都包含了选项的名称和值。
|
选项 |
说明 |
|
height |
窗口的高度，单位像素 |
|
width |
窗口的宽度，单位像素 |
|
left |
窗口的左边缘位置 |
|
top |
窗口的上边缘位置 |
|
fullscreen |
是否全屏，默认值no |
|
location |
是否显示地址栏，默认值yes |
|
menubar |
是否显示菜单栏，默认值yes |
|
resizable |
是否允许改变窗口大小，默认值yes |
|
scrollbars |
是否显示滚动条，默认值yes |
|
status |
是否显示状态栏，默认值yes |
|
titlebar |
是否显示标题栏，默认值yes |
|
toolbar |
是否显示工具条，默认值yes |
window.open简单示例：
第一个页面代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>打开新窗口示例</title>
5 <style type="text/css">
6 #editor
7 {
8 width:300px;
9 }
10 #title, #editor textarea
11 {
12 width:100px;
13 height:80%;
14 }
15 </style>
16 <script type="text/javascript">
17 function newWin() {
18 //打开新窗口
19 var win = window.open("windowtwo.htm", "_blank", "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=300");
20 }
21 </script>
22 </head>
23 <body>
24 <form action="#">
25 <div id="editor">
26 标题：
27 <input type="text" id="title" /><br />
28 内容：
29 <textarea cols="30" rows="5" id="content"></textarea><br />
30 <input type="button" value="提交" />
31 <input type="button" value="在新窗口中编辑" onclick="newWin()" />
32 </div>
33 </form>
34 </body>
35 </html>
第二个页面代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>新窗口</title>
5 <style type="text/css">
6 #editor
7 {
8 width:300px;
9 }
10 #title, #editor textarea
11 {
12 width:100%;
13 height:80%;
14 }
15 </style>
16 <script type="text/javascript">
17 function newWindow() {
18 //父窗口
19 var parent = window.opener;
20 if (!parent) {
21 return;
22 }
23 //从父窗口中获取标题和内容，填入子窗口的相应位置
24 $("title").value = parent.document.getElementById("title").value;
25 $("content").value = parent.document.getElementById("content").value;
26 }
27
28 function $(id) {
29 return document.getElementById(id);
30 }
31 </script>
32 </head>
33 <body onload="neWindow()">
34 <form action="#">
35 <div id="editor">
36 标题：
37 <input type="text" id="title" />
38 内容：
39 <textarea cols="30" rows="5" id="content"></textarea>
40 <input type="button" value="提交" />
41 <input type="button" value="在新窗口中编辑" onclick="neWin()" />
42 </div>
- window.alert 显示消息提示框，用法 window.alert([Message]); （注：一般都省略window对象，直接使用alert）
- window.confirm 显示一个确认对话框，其中包括“确定”和“取消”按钮。
小示例：用户单击"确定"按钮时，window.confirm返回true，用户单击"取消"按钮时，window.confirm返回false。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>confirm示例</title>
6 <script type="text/javascript">
7 if(window.confirm("确定关闭窗口？"))
8 alert("true");
9 else
10 alert("false");
11 </script>
12 </head>
13 <body>
14 </body>
15 </html>
- window.prompt 显示一个消息提示框，其中包含一个文本输入框。
用法：window.prompt([Message],[default]); Message是显示在提示框上的文本，default是设置文本框的默认值。如图：
4. 状态栏控制
通过window.status属性进行控制。如：window.status="错误提示"; 这样做会影响用户体验，所以不建议对状态栏信息进行修改。
5. 定时操作
定时操作是web开发中常用功能，在基于Ajax技术的开发中，有一类应用需要定时的访问后台服务器并且更新前台页面，这类应用实现通常依赖于定时操作函数。
定时操作函数有四个：window.setInterval、window.clearInterval、window.setTimeout、window.clearTimeout，这四个函数都是window对象的方法，这说明浏览器中的定时操作是有浏览器窗口完成的。下面对这四种方法的用法详细介绍
- window.setInterval 设置定时器，每隔一段时间执行指定的代码 window.setInterval(code,time);
说明： code参数可以是一个函数，也可以是一个字符串形式的JavaScript代码
time参数是执行代码的时间间隔，单位是ms。
示例：
1 <script type="text/javascript">
2 window.setInterval(function(){
3 alert("定时器");
4 },5000);
5 </script>
- window.clearInterval 清除setInterval函数设置的定时器 window. clearInterval(time); 、
示例：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <script type="text/javascript">
6 //定时器
7 var timer;
8 //开始计数
9 function startCount() {
10 //timer将保存计数器的ID
11 timer = window.setInterval(function () {
12 //从div中取得当前计数值
13 var divid = document.getElementById("counter");
14 var num = Number(divid.innerHTML);
15 //计数值加1，更新页面
16 divid.innerHTML = String(num + 1);
17 },1000);
18 }
19
20 //停止计数
21 function pause() {
22 window.clearInterval(timer);
23 }
24 </script>
25 </head>
26 <body>
27 <div id="counter">0</div>
28 <input type="button" onclick="startCount()" value="开始计数" />
29 <input type="button" onclick="pause()" value="停止计数" />
30 </body>
31 </html>
- window.setTiimeout 设置定时器，每隔一段时间执行指定的代码 window.setTiimeout(code,time);
说明： code参数可以是一个函数，也可以是一个字符串形式的JavaScript代码，setTiimeout与setInterval区别在于setTiimeout对指定的代码只执行一次。
time参数是执行代码的时间间隔，单位是ms。
示例：
1 <script type="text/javascript">
2 window.setTimeoutl(function(){
3 alert("setTimeout");
4 },5000);
5 </script>
- window.clearTimeout 清除 setTiimeout 函数设置的定时器 window. clearTimeout(time);
示例：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <script type="text/javascript">
6 //定时器
7 var timer;
8 //开始计数
9 function startCount() {
10 //从div中取得当前计数值
11 var divid = document.getElementById("counter");
12 var num = Number(divid.innerHTML);
13 //计数值加1，更新页面
14 divid.innerHTML = String(num + 1);
15 //为了让setTimeout在执行一次后继续执行
16 timer = window.setTimeout(startCount, 1000);
17 }
18
19 //停止计数
20 function pause() {
21 window.clearTimeout(timer);
22 }
23 </script>
24 </head>
25 <body>
26 <div id="counter">0</div>
27 <input type="button" onclick="startCount()" value="开始计数" />
28 <input type="button" onclick="pause()" value="停止计数" />
29 </body>
30 </html>
43 </form>
44 </body>
45 </html>
效果如下：
四、Date对象
一、时间对象
① var myDate=new Date();//通过这一声明可以获得当前的时间
② var myDate=new Date(“month dd,yyyy hh:mm:ss”);
③ var myDate=new Date(“month dd,yyyy”);
④ var myDate=new Date(yyyy,mth,dd,hh,mm,ss);
⑤ var myDate=new Date(yyyy,mm,dd);
⑥ var myDate=new Date(ms);
需要注意最后一种形式，参数表示的是需要创建时间和GMT时间1970年1月1日之间相差的毫秒数。各种参数的含义如下：
·month：用英文表示的月份数，从January~December
·mth：用整数表示的月份。
·dd：表示一个月中的第几天
·yyyy：四位数表示的年份
·hh：小时数
·mm：分钟数
·ss：秒数
·ms：毫秒数
例：
var myDate=new Date(“May 21,2011 10:20:20”);
var myDate=new Date(“May 21 ,2011”);
var myDate=new Date(2011,11,21,12,12);
var myDate=new Date(2011,11,11);
var myDate=new Date(1178899200000);
二、常用方法
日期获取类函数
1、getFullYear()：得到年
2、getYear() ：得到date对象的年份(真实年份减去1900)
3、getMonth()：得到月 （0-11）
4、getDate()：得到日 （1-31）
5、getHours()：得到小时 （0-23）
6、getMinutes()：得到分钟（0-59）
7、getSeconds()：得到秒（0-59）
8、getDay()：得到星期几（0-6，0为星期日）
9、getTime()：得到从1970年1月1日0:0:0到现在一共耗费的毫秒数
10、getUTCDate()：返回date对象中用世界标准时间(UTC)表示的月份中的一天(1-31)
11、getUTCDay()：返回date对象中用世界标准时间(UTC)表示的周中的一天(0-6)
12、getUTCFullYear()：返回date对象中用世界标准时间(UTC)表示的四位年份
13、getUTCHours()：返回date对象中用世界标准时间(UTC)表示的小时数(0-23)
14、getUTCMilliseconds()：返回date对象中用世界标准时间(UTC)表示的毫秒数(0-999)
15、getUTCMinutes()：返回date对象中用世界标准时间(UTC)表示的分钟数(0-59)
16、getUTCMonth()：返回date对象中用世界标准时间(UTC)表示的月份数(0-11)
17、getUTCSeconds()：返回date对象中用世界标准时间(UTC)表示的秒数(0-59)
日期设置类函数
18、setYear() 设置年
19、setMonth() 设置月
20、setDate() 设置日
21、setHours() 设置小时
22、setMinutes() 设置分钟
23、setSeconds() 设置秒
24、setTime() 设置从1970年1月1日0:0:0到现在一共耗费的毫秒数
根据一个或多个数值建立时间对象, 及本地计时与世界标准计时的区别
//先用最容易理解的方式建立一个时间对象
var d = new Date(2009, 2, 27, 12, 59, 59, 999);
alert(d); //Fri Mar 27 12:59:59 UTC+0800 2009
alert(d.toString()); //Fri Mar 27 12:59:59 UTC+0800 2009
alert(d.toUTCString()); //Fri, 27 Mar 2009 04:59:59 UTC
alert(d.toLocaleString()); //2009年3月27日 12:59:59
alert(d.toDateString()); //Fri Mar 27 2009
alert(d.toLocaleDateString()); //2009年3月27日
alert(d.toTimeString()); //12:59:59 UTC+0800
alert(d.toLocaleTimeString()); //12:59:59
/* 时间在计算机中被记为一个整数, 这是从 UTC 时间的 1970-1-1 0:0:0 到此时间的毫秒数 */
alert(d.valueOf()); //1238129999999
alert(d.getTime()); //1238129999999
/* 获取本地时间和世界标准计时的时差 */
alert(d.getTimezoneOffset()); //-480; 单位是分钟, 也就是 8 小时
/* 直接使用时间值(毫秒数, 譬如上面的: 1238129999999)建立时间对象 */
var d = new Date(1238129999999);
alert(d.toLocaleString()); //2009年3月27日 12:59:59
/* 但建立函数有 2-7 个参数时, 将是根据 "年, 月, 日, 时, 分, 秒, 毫秒" 建立时间 */
d = new Date(2009, 2, 27, 12, 59, 59, 999);
alert(d.toLocaleString()); //2009年3月27日 12:59:59
d = new Date(2009, 2, 27, 12, 59, 59);
alert(d.toLocaleString()); //2009年3月27日 12:59:59
d = new Date(2009, 2, 27, 12, 59);
alert(d.toLocaleString()); //2009年3月27日 12:59:00
d = new Date(2009, 2, 27, 12);
alert(d.toLocaleString()); //2009年3月27日 12:00:00
d = new Date(2009, 2, 27);
alert(d.toLocaleString()); //2009年3月27日 0:00:00
d = new Date(2009, 2);
alert(d.toLocaleString()); //2009年3月1日 0:00:00
/* Date 类的静态函数 UTC 的参数也是和上面一样的 2-7 个, 但 UTC 获取的是个 number */
var n = Date.UTC(2009, 0); //这只是获取了那个表示时间的毫秒数
alert(typeof n); //number
var d = new Date(n); //根据刚刚获取的数、重新建立为时间对象
alert(d.toUTCString()); //Thu, 1 Jan 2009 00:00:00 UTC
alert(d.toLocaleString()); //2009年1月1日 8:00:00
无参数建立的时间对象、和用全局函数 Date 获取的时间的区别
var d1 = new Date(); //返回时间对象
var d2 = Date(); //返回时间字符串
alert(d1); //Fri Feb 27 13:20:58 UTC+0800 2009
alert(d2); //Fri Feb 27 13:20:58 2009
alert(d1.valueOf()); //1235712058340
alert(d2.valueOf()); //Fri Feb 27 13:20:58 2009
alert(typeof d1); //object
alert(typeof d2); //string
//明显看出 d2 只是字符串, 它可以使用 String 类的方法, 而不能使用 Date 类的方法.
使用字符串参数建立时间对象
var d;
d = new Date('Fri Mar 27 12:59:59 UTC+0800 2009');
alert(d.toLocaleString()); //2009年3月27日 12:59:59
d = new Date('Fri Mar 27 12:59:59 2009');
alert(d.toLocaleString()); //2009年3月27日 12:59:59
d = new Date('Fri Mar 27 2009');
alert(d.toLocaleString()); //2009年3月27日 0:00:00
d = new Date('Mar 27 2009');
alert(d.toLocaleString()); //2009年3月27日 0:00:00
/* 可使用 Date() 返回的字符串 */
var ts = Date();
d = new Date(ts);
alert(d.toLocaleString()); //2009年3月27日 14:04:38
/* Date 类的静态函数 parse 也是需要一样的字符参数, 不过它返回的是个数字(那个毫秒数) */
var n;
n = Date.parse('Mar 27 2009');
alert(n); //1238083200000
alert(typeof n); //number
d = new Date(n);
alert(d.toLocaleString()); //2009年3月27日 0:00:00
分别获取和设置: 年、月、日、时、分、秒、毫秒, 其中 "星期几" 可获取但不能设置
var d = new Date(2009, 2, 27, 12, 58, 59, 999);
alert(d.toLocaleString()); //2009年3月27日 0:00:00
alert(d.getFullYear()); //2009
alert(d.getMonth()); //2 (从 0 起, 2 指 3 月)
alert(d.getDate()); //27
alert(d.getDay()); //5 (星期五)
alert(d.getHours()); //12
alert(d.getMinutes()); //58
alert(d.getSeconds()); //59
alert(d.getMilliseconds()); //999 (毫秒)
d.setFullYear(2010);
d.setMonth(1);
d.setDate(2);
d.setHours(3);
d.setMinutes(4);
d.setSeconds(5);
d.setMilliseconds(6);
alert(d.toLocaleString()); //2010年2月2日 3:04:05
alert(d.getFullYear()); //2010
alert(d.getMonth()); //1 (从 0 起, 1 指 2 月)
alert(d.getDate()); //2
alert(d.getDay()); //2 (星期二)
alert(d.getHours()); //3
alert(d.getMinutes()); //4
alert(d.getSeconds()); //5
alert(d.getMilliseconds()); //6 (毫秒)
/* 还有一个 setTime */
var d = new Date();
d.setTime(0);
alert(d.toUTCString()); //Thu, 1 Jan 1970 00:00:00 UTC
五、Math数学对象
Math 和其他类不同, 它没有建立方法(不能这样使用: new Math()), 它的所有方法都是静态的(都得挂名调用).
1、Math.abs; //绝对值
2、Math.max; //两个数中的大者
3、Math.min; //两个数中的小者
4、Math.random; //随机数
5、Math.round; //四舍五入
6、Math.ceil; //上舍入
7、Math.floor; //下舍入
8、Math.exp; //e 的指数
9、Math.log; //自然对数
10、Math.pow; //x 的 y 次方
11、Math.sqrt; //平方根
12、Math.sin; //正弦
13、Math.cos; //余弦
14、Math.tan; //正切
15、Math.asin; //反正弦
16、Math.acos; //反余弦
17、Math.atan; //反正切
18、Math.atan2; //从 X 轴到一个点的角度
Math 类的还有八个常数
alert(Math.E); //2.718281828459045 - 自然对数的底数
alert(Math.LN10); //2.302585092994046 - 10 的自然对数
alert(Math.LN2); //0.6931471805599453 - 2 的自然对数
alert(Math.LOG10E); //0.4342944819032518 - 以 10 为底的 e 的对数
alert(Math.LOG2E); //1.4426950408889633 - 以 2 为底的 e 的对数
alert(Math.PI); //3.141592653589793 - π
alert(Math.SQRT1_2); //0.7071067811865476 - 2 的平方根除 1
alert(Math.SQRT2); //1.4142135623730951 - 2 的平方根
部分测试
/* 获取 100 以内的随机数 */
var n1, n2;
n1 = Math.ceil(Math.random()*100);
n2 = Math.ceil(Math.random()*100);
alert(n1); //9
alert(n2); //80
/* pow */
alert(Math.pow(2, 3)); // 8
alert(Math.pow(1.5, 2.4)); // 2.6461778006805154
/* round、ceil、floor*/
var x = 1.45;
alert(Math.round(x)); // 1
alert(Math.ceil(x)); // 2
alert(Math.floor(x)); // 1
x = -1.45;
alert(Math.round(x)); // -1
alert(Math.ceil(x)); // -1
alert(Math.floor(x)); // -2
六、Document文档对象
一、属性
1、title：当前文档标题,如果未定义,则包含"Untitled".
2、location：文档的全URL.
3、domain：文档页面的Web服务器所在的域
3、lastModified：含有文档最后修改日期.
4、referrer：调用者URL,即用户是从哪个URL链接到当前页面的. 通常获取页面来源的地址
5、bgColor：背景色(#xxxxxx)
6、fgColor：前景文本颜色.
7、linkColor：超链接颜色.
8、vlinkColor：访问过的超链颜色.
9、alinkColor：激活链颜色(鼠标按住未放时).
10、forms[]：文档中form对象的数组,按定义次序存储.
11、forms.length：文档中的form对象数目.
12、links[]：与文档中所有HREF链对应的数组对象,按次序定义存储.
13、links.length：文档中HREF链的数目.
14、anchors[]：锚(...)数组,按次序定义存储.
15、anchors.length 文档中锚的数目.
二、方法
1、write("string") //将字符串突出给当前窗口.(字符串可以含有HTML标记)
2、writeln("string") //与write()类似,在结尾追加回车符,只在预定格式文本中生效.
3、clear() //清当前窗口.
4、close() //关闭当前窗口.
5、open() //打开文档
一、Document子对象的接口
1、 anchors[]：对象的一个集合，该对象代表文档中的锚
<a name="a1">1</a>
<a name="a2">2</a>
<a name="a3">3</a>
<a>4</a>
<a>5</a>
<script type="text/javascript">
function dwo(s){
document.write(s+"<br>");
}
for(var i=0; i<document.anchors.length; i++){
dwo(document.anchors[i].name);
}
</script>
2、 applets[]：该对象代表文档中的java小程序.
3、 Forms[]：代表文档中的表单元素.
4、 Images[]：文档中的一个图片元素
<img src="images/job0.gif" width="267" height="161" />
<img src="images/job0.gif" width="267" height="161" />
<img src="images/job0.gif" width="267" height="161" />
<script type="text/javascript">
for(var i=0; i<document.images.length; i++){
document.images[i].style.filter="FlipV";
void(0);
}
</script>
5、 Links[]：文档中一个链接.
6、 Cookie：允许javaScript程序读写HTTPcookie，
二、对话框
1、 alert()：用于向用户显示消息.
2、 Confirm()：要求用户点击ok或Cancel键来确认或者取消某个操作.
3、 Prompt()：要求用户输入一个字符串[1].
四、状态栏
1、Window.status
window.setInterval("window.status=new Date()",1000); void(0);
2、 window.defatltStatus()：
五、表单和表单对象
1、forms[]集合可以找到一个或多个form对象，是按照在文档出现的顺序存放，forms[0]代表了文档是第一个表单
<form id="setForm" name="setForm" method="post" action="">
Document. setForm [document.setForm.length-1]：引用文档的最后一个表单.
2、elements[]集合：包含各种表单输入元素的JS对象，按照出现在form中的先后顺序存放在elements[]集合中.
Name：form的name值， value：文字框内输入的文字 show(form)要加form
<form id="form1" name="form1" method="post" action="" onsubmit="show(this); return false;">
<input type="text" name="textfield2" id="textfield2" />
<input type="text" name="textfield" id="textfield" />
<input type="submit" name="button" id="button" value="提交" /></p>
</form>
<script type="text/javascript">
function show(form){
var str = "";
for(var i=0; i<form.elements.length; i++){
str += form.elements[i].name +"="+ form.elements[i].value + "<br>";
}
document.write(str);
}
</script>
六、多选框如果 chenecked = true;是选中状态
function checkReverse() {
var hotId = document.getElementById("musce");
var che = hotId.getElementsByTagName("input");
for(var i=0; i<che.length-3; i++){
if(che[i].checked){
che[i].checked = false;
}
else {
che[i].checked = true;
}
}
}
