JavaScript对象
程序员文章站
2022-06-09 22:59:39
...
我们要开始学习内建的 JavaScript 对象，以及如何使用它们。从下一节开始，我们将具体地依次讲解的这些内建的 JavaScript 对象。
1、 字符串对象
例子1：计算字符串长度
<html>
<body>
<script type="text/javascript">
var txt="Hello World!"
document.write(txt.length)
</script>
</body>
</html>
例子2：为字符串添加样式
<html>
<body>
<script type="text/javascript">
var txt="Hello World!"
document.write("<p>Big: " + txt.big() + "</p>")
document.write("<p>Small: " + txt.small() + "</p>")
document.write("<p>Bold: " + txt.bold() + "</p>")
document.write("<p>Italic: " + txt.italics() + "</p>")
document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>")
document.write("<p>Fixed: " + txt.fixed() + "</p>")
document.write("<p>Strike: " + txt.strike() + "</p>")
document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>")
document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>")
document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>")
document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>")
document.write("<p>Subscript: " + txt.sub() + "</p>")
document.write("<p>Superscript: " + txt.sup() + "</p>")
document.write("<p>Link: " + txt.link("http://www.w3school.com.cn") + "</p>")
</script>
</body>
</html>
indexOf() 方法
如何使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置。
match() 方法
如何使用 match() 来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。
<html>
<body>
<script type="text/javascript">
var str="Hello world!"
document.write(str.match("world") + "<br />")
document.write(str.match("World") + "<br />")
document.write(str.match("worlld") + "<br />")
document.write(str.match("world!"))
</script>
</body>
</html>
如何替换字符串中的字符 - replace()
如何使用 replace() 方法在字符串中用某些字符替换另一些字符。
<html>
<body>
<script type="text/javascript">
var str="Visit Microsoft!"
document.write(str.replace(/Microsoft/,"W3School"))
</script>
</body>
</html>
2、JavaScript Date（日期）对象
定义日期
Date 对象用于处理日期和时间。
可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象：
var myDate=new Date()
注释：Date 对象自动使用当前的日期和时间作为其初始值。
操作日期
通过使用针对日期对象的方法，我们可以很容易地对日期进行操作。
在下面的例子中，我们为日期对象设置了一个特定的日期 (2008 年 8 月 9 日)：
var myDate=new Date()
myDate.setFullYear(2008,7,9)
注意：表示月份的参数介于 0 到 11 之间。也就是说，如果希望把月设置为 8 月，则参数应该是 7。
在下面的例子中，我们将日期对象设置为 5 天后的日期：
var myDate=new Date()
myDate.setDate(myDate.getDate()+5)
注意：如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。
比较日期
日期对象也可用于比较两个日期。
下面的代码将当前日期与 2008 年 8 月 9 日做了比较：
var myDate=new Date();
myDate.setFullYear(2008,7,9);
var today = new Date();
if (myDate>today)
{
alert("Today is before 9th August 2008");
}
else
{
alert("Today is after 9th August 2008");
}
getTime()
getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
<html>
<body>
<script type="text/javascript">
var d=new Date();
document.write("从 1970/01/01 至今已过去 " + d.getTime() + " 毫秒");
</script>
</body>
</html>
setFullYear()
如何使用 setFullYear() 设置具体的日期。
<html>
<body>
<script type="text/javascript">
var d = new Date()
d.setFullYear(1992,10,3)
document.write(d)
</script>
</body>
</html>
toUTCString()
如何使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。
<html>
<body>
<script type="text/javascript">
var d = new Date()
document.write (d.toUTCString())
</script>
</body>
</html>
getDay()
如何使用 getDay() 和数组来显示星期，而不仅仅是数字。
<html>
<body>
<script type="text/javascript">
var d=new Date()
var weekday=new Array(7)
weekday[0]="星期日"
weekday[1]="星期一"
weekday[2]="星期二"
weekday[3]="星期三"
weekday[4]="星期四"
weekday[5]="星期五"
weekday[6]="星期六"
document.write("今天是" + weekday[d.getDay()])
</script>
</body>
</html>
显示一个钟表
如何在网页上显示一个钟表。
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}
function checkTime(i)
{
if (i<10)
{i="0" + i}
return i
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
3、JavaScript Array（数组）对象
合并两个数组 - concat()
如何使用 concat() 方法来合并两个数组。
<html>
<body>
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
document.write(arr.concat(arr2))
</script>
</body>
</html>
用数组的元素组成字符串 - join()
如何使用 join() 方法将数组的所有元素组成一个字符串。
<html>
<body>
<script type="text/javascript">
var arr = new Array(3);
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join());
document.write("<br />");
document.write(arr.join("."));
</script>
</body>
</html>
文字数组 - sort()
如何使用 sort() 方法从字面上对数组进行排序。
<html>
<body>
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
document.write(arr.sort())
</script>
</body>
</html>
数字数组 - sort()
如何使用 sort() 方法从数值上对数组进行排序。
<html>
<body>
<script type="text/javascript">
function sortNumber(a, b)
{
return a - b
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr + "<br />")
document.write(arr.sort(sortNumber))
</script>
</body>
</html>
4、JavaScript Boolean（逻辑）对象
创建 Boolean 对象
使用关键词 new 来定义 Boolean 对象。下面的代码定义了一个名为 myBoolean 的逻辑对象：
var myBoolean=new Boolean()
5、JavaScript Math（算数）对象
round()
如何使用 round()。
random()
如何使用 random() 来返回 0 到 1 之间的随机数。
max()
如何使用 max() 来返回两个给定的数中的较大的数。
min()
如何使用 min() 来返回两个给定的数中的较小的数。
6、JavaScript RegExp 对象
定义 RegExp
RegExp 对象用于存储检索模式。
通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象，其模式是 "e"：
var patt1=new RegExp("e");
当您使用该 RegExp 对象在一个字符串中检索时，将寻找的是字符 "e"。
RegExp 对象的方法
RegExp 对象有 3 个方法：test()、exec() 以及 compile()。
test()
test() 方法检索字符串中的指定值。返回值是 true 或 false。
例子：
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
由于该字符串中存在字母 "e"，以上代码的输出将是：
true
TIY
exec()
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
例子 1：
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
由于该字符串中存在字母 "e"，以上代码的输出将是：
e
TIY
compile()
compile() 方法用于改变 RegExp。
compile() 既可以改变检索模式，也可以添加或删除第二个参数。
例子：
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));
由于字符串中存在 "e"，而没有 "d"，以上代码的输出是：
truefalse
7、JavaScript HTML DOM 对象
• Previous Page
• Next Page
除了内置的 JavaScript 对象以外，你还可以使用 JavaScript 访问并处理所有的 HTML DOM 对象。
更多 JavaScript 对象
点击以下链接，可以获得以下对象的更多信息，包括它们的集合、属性、方法以及事件。
对象 描述
Window
JavaScript 层级中的顶层对象。Window 对象表示浏览器窗口。每当 <body> 或者 <frameset> 标签出现，Window 对象就会被自动创建。
Navigator
包含客户端浏览器的信息。
Screen
包含客户端显示屏的信息。
History
包含了浏览器窗口访问过的 URL。
Location
包含了当前URL的信息。
HTML DOM
HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。
HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。
通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。
HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。
点击下面的链接，可获得更多关于如何使用 JavaScript 来访问和处理 DOM 对象的知识：
对象 描述
Document
代表整个 HTML 文档，用来访问页面中的所有元素。
Anchor
代表 <a> 元素。
Area
代表图像地图中的 <area> 元素。
Base
代表 <base> 元素。
Body
代表图像地图中的 <body> 元素。
Button
代表 <button> 元素。
Event
代表事件的状态
Form
代表 <form> 元素
Frame
代表 <frame> 元素
Frameset
代表 <frameset> 元素
Iframe
代表 <iframe> 元素
Image
代表 <img> 元素
Input button
代表 HTML 表单中的按钮
Input checkbox
代表 HTML 表单中的选择框
Input file
代表 HTML 表单中的 fileupload 。
Input hidden
代表 HTML 表单中的隐藏域。
Input password
代表 HTML 表单中的密码域。
Input radio
代表 HTML 表单中的单选框。
Input reset
代表 HTML 表单中的重置按钮。
Input submit
代表 HTML 表单中的确认按钮。
Input text
代表 HTML 表单中的文本输入域。
Link
代表 <link> 元素
Meta
代表 <meta> 元素
Object
代表一个 <Object> 元素
Option
代表 <option> 元素
Select
代表 HTML 表单中的选择列表。
Style
代表某个单独的样式声明。
Table
代表 <table> 元素。
TableData
代表 <td> 元素。
TableRow
代表 <tr> 元素。
Textarea
代表 <textarea> 元素。
1、 字符串对象
例子1：计算字符串长度
<html>
<body>
<script type="text/javascript">
var txt="Hello World!"
document.write(txt.length)
</script>
</body>
</html>
例子2：为字符串添加样式
<html>
<body>
<script type="text/javascript">
var txt="Hello World!"
document.write("<p>Big: " + txt.big() + "</p>")
document.write("<p>Small: " + txt.small() + "</p>")
document.write("<p>Bold: " + txt.bold() + "</p>")
document.write("<p>Italic: " + txt.italics() + "</p>")
document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>")
document.write("<p>Fixed: " + txt.fixed() + "</p>")
document.write("<p>Strike: " + txt.strike() + "</p>")
document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>")
document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>")
document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>")
document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>")
document.write("<p>Subscript: " + txt.sub() + "</p>")
document.write("<p>Superscript: " + txt.sup() + "</p>")
document.write("<p>Link: " + txt.link("http://www.w3school.com.cn") + "</p>")
</script>
</body>
</html>
indexOf() 方法
如何使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置。
match() 方法
如何使用 match() 来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。
<html>
<body>
<script type="text/javascript">
var str="Hello world!"
document.write(str.match("world") + "<br />")
document.write(str.match("World") + "<br />")
document.write(str.match("worlld") + "<br />")
document.write(str.match("world!"))
</script>
</body>
</html>
如何替换字符串中的字符 - replace()
如何使用 replace() 方法在字符串中用某些字符替换另一些字符。
<html>
<body>
<script type="text/javascript">
var str="Visit Microsoft!"
document.write(str.replace(/Microsoft/,"W3School"))
</script>
</body>
</html>
2、JavaScript Date（日期）对象
定义日期
Date 对象用于处理日期和时间。
可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象：
var myDate=new Date()
注释：Date 对象自动使用当前的日期和时间作为其初始值。
操作日期
通过使用针对日期对象的方法，我们可以很容易地对日期进行操作。
在下面的例子中，我们为日期对象设置了一个特定的日期 (2008 年 8 月 9 日)：
var myDate=new Date()
myDate.setFullYear(2008,7,9)
注意：表示月份的参数介于 0 到 11 之间。也就是说，如果希望把月设置为 8 月，则参数应该是 7。
在下面的例子中，我们将日期对象设置为 5 天后的日期：
var myDate=new Date()
myDate.setDate(myDate.getDate()+5)
注意：如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。
比较日期
日期对象也可用于比较两个日期。
下面的代码将当前日期与 2008 年 8 月 9 日做了比较：
var myDate=new Date();
myDate.setFullYear(2008,7,9);
var today = new Date();
if (myDate>today)
{
alert("Today is before 9th August 2008");
}
else
{
alert("Today is after 9th August 2008");
}
getTime()
getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
<html>
<body>
<script type="text/javascript">
var d=new Date();
document.write("从 1970/01/01 至今已过去 " + d.getTime() + " 毫秒");
</script>
</body>
</html>
setFullYear()
如何使用 setFullYear() 设置具体的日期。
<html>
<body>
<script type="text/javascript">
var d = new Date()
d.setFullYear(1992,10,3)
document.write(d)
</script>
</body>
</html>
toUTCString()
如何使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。
<html>
<body>
<script type="text/javascript">
var d = new Date()
document.write (d.toUTCString())
</script>
</body>
</html>
getDay()
如何使用 getDay() 和数组来显示星期，而不仅仅是数字。
<html>
<body>
<script type="text/javascript">
var d=new Date()
var weekday=new Array(7)
weekday[0]="星期日"
weekday[1]="星期一"
weekday[2]="星期二"
weekday[3]="星期三"
weekday[4]="星期四"
weekday[5]="星期五"
weekday[6]="星期六"
document.write("今天是" + weekday[d.getDay()])
</script>
</body>
</html>
显示一个钟表
如何在网页上显示一个钟表。
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}
function checkTime(i)
{
if (i<10)
{i="0" + i}
return i
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
3、JavaScript Array（数组）对象
合并两个数组 - concat()
如何使用 concat() 方法来合并两个数组。
<html>
<body>
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
document.write(arr.concat(arr2))
</script>
</body>
</html>
用数组的元素组成字符串 - join()
如何使用 join() 方法将数组的所有元素组成一个字符串。
<html>
<body>
<script type="text/javascript">
var arr = new Array(3);
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join());
document.write("<br />");
document.write(arr.join("."));
</script>
</body>
</html>
文字数组 - sort()
如何使用 sort() 方法从字面上对数组进行排序。
<html>
<body>
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
document.write(arr.sort())
</script>
</body>
</html>
数字数组 - sort()
如何使用 sort() 方法从数值上对数组进行排序。
<html>
<body>
<script type="text/javascript">
function sortNumber(a, b)
{
return a - b
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr + "<br />")
document.write(arr.sort(sortNumber))
</script>
</body>
</html>
4、JavaScript Boolean（逻辑）对象
创建 Boolean 对象
使用关键词 new 来定义 Boolean 对象。下面的代码定义了一个名为 myBoolean 的逻辑对象：
var myBoolean=new Boolean()
5、JavaScript Math（算数）对象
round()
如何使用 round()。
random()
如何使用 random() 来返回 0 到 1 之间的随机数。
max()
如何使用 max() 来返回两个给定的数中的较大的数。
min()
如何使用 min() 来返回两个给定的数中的较小的数。
6、JavaScript RegExp 对象
定义 RegExp
RegExp 对象用于存储检索模式。
通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象，其模式是 "e"：
var patt1=new RegExp("e");
当您使用该 RegExp 对象在一个字符串中检索时，将寻找的是字符 "e"。
RegExp 对象的方法
RegExp 对象有 3 个方法：test()、exec() 以及 compile()。
test()
test() 方法检索字符串中的指定值。返回值是 true 或 false。
例子：
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
由于该字符串中存在字母 "e"，以上代码的输出将是：
true
TIY
exec()
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
例子 1：
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
由于该字符串中存在字母 "e"，以上代码的输出将是：
e
TIY
compile()
compile() 方法用于改变 RegExp。
compile() 既可以改变检索模式，也可以添加或删除第二个参数。
例子：
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));
由于字符串中存在 "e"，而没有 "d"，以上代码的输出是：
truefalse
7、JavaScript HTML DOM 对象
• Previous Page
• Next Page
除了内置的 JavaScript 对象以外，你还可以使用 JavaScript 访问并处理所有的 HTML DOM 对象。
更多 JavaScript 对象
点击以下链接，可以获得以下对象的更多信息，包括它们的集合、属性、方法以及事件。
对象 描述
Window
JavaScript 层级中的顶层对象。Window 对象表示浏览器窗口。每当 <body> 或者 <frameset> 标签出现，Window 对象就会被自动创建。
Navigator
包含客户端浏览器的信息。
Screen
包含客户端显示屏的信息。
History
包含了浏览器窗口访问过的 URL。
Location
包含了当前URL的信息。
HTML DOM
HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。
HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。
通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。
HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。
点击下面的链接，可获得更多关于如何使用 JavaScript 来访问和处理 DOM 对象的知识：
对象 描述
Document
代表整个 HTML 文档，用来访问页面中的所有元素。
Anchor
代表 <a> 元素。
Area
代表图像地图中的 <area> 元素。
Base
代表 <base> 元素。
Body
代表图像地图中的 <body> 元素。
Button
代表 <button> 元素。
Event
代表事件的状态
Form
代表 <form> 元素
Frame
代表 <frame> 元素
Frameset
代表 <frameset> 元素
Iframe
代表 <iframe> 元素
Image
代表 <img> 元素
Input button
代表 HTML 表单中的按钮
Input checkbox
代表 HTML 表单中的选择框
Input file
代表 HTML 表单中的 fileupload 。
Input hidden
代表 HTML 表单中的隐藏域。
Input password
代表 HTML 表单中的密码域。
Input radio
代表 HTML 表单中的单选框。
Input reset
代表 HTML 表单中的重置按钮。
Input submit
代表 HTML 表单中的确认按钮。
Input text
代表 HTML 表单中的文本输入域。
Link
代表 <link> 元素
Meta
代表 <meta> 元素
Object
代表一个 <Object> 元素
Option
代表 <option> 元素
Select
代表 HTML 表单中的选择列表。
Style
代表某个单独的样式声明。
Table
代表 <table> 元素。
TableData
代表 <td> 元素。
TableRow
代表 <tr> 元素。
Textarea
代表 <textarea> 元素。