二.JavaScript 对象-白红宇

二.JavaScript 对象

阅读量：4048 次

发布时间：2019-05-25

本文共 13153 字，大约阅读时间需要 43 分钟。

1.JavaScript 对象简介

JavaScript 是面向对象的编程语言 (OOP)。

OOP 语言使我们有能力自定义对象和变量类型。

(1)面向对象编程

注意：对象只是一种特殊的数据。对象拥有属性和方法。

(2)属性

属性指与对象有关的值。

案例：打印字符串长度

var txt="Hello World!"

document.write(txt.length)

(3)方法

方法指对象可以执行的行为（或者可以完成的功能）。

案例:打印大写字母

var str="Hello world!"

document.write(str.toUpperCase())

2.JavaScript 字符串(String)对象

String 对象属性

属性描述 FF IE

constructor 对创建该对象的函数的引用 1 4

length 字符串的长度 1 3

prototype 允许您向对象添加属性和方法 1 4

String 对象方法

方法描述

anchor() 创建 HTML 锚。

big() 用大号字体显示字符串。

blink() 显示闪动字符串。

bold() 使用粗体显示字符串。

charAt() 返回在指定位置的字符。

charCodeAt() 返回在指定的位置的字符的 Unicode 编码。

concat() 连接字符串。

fixed() 以打字机文本显示字符串。

fontcolor() 使用指定的颜色来显示字符串。

fontsize() 使用指定的尺寸来显示字符串。

fromCharCode() 从字符编码创建一个字符串。

indexOf() 检索字符串。

italics() 使用斜体显示字符串。

lastIndexOf() 从后向前搜索字符串。

link() 将字符串显示为链接。

localeCompare() 用本地特定的顺序来比较两个字符串。

match() 找到一个或多个正则表达式的匹配。

replace() 替换与正则表达式匹配的子串。

search() 检索与正则表达式相匹配的值。

slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。

small() 使用小字号来显示字符串。

split() 把字符串分割为字符串数组。

strike() 使用删除线来显示字符串。

sub() 把字符串显示为下标。

substr() 从起始索引号提取字符串中指定数目的字符。

substring() 提取字符串中两个指定的索引号之间的字符。

sup() 把字符串显示为上标。

toLocaleLowerCase() 把字符串转换为小写。

toLocaleUpperCase() 把字符串转换为大写。

toLowerCase() 把字符串转换为小写。

toUpperCase() 把字符串转换为大写。

toSource() 代表对象的源代码。

toString() 返回字符串。

valueOf() 返回某个字符串对象的原始值。

http://www.w3school.com.cn/js/jsref_obj_string.asp

(1)JavaScript String（字符串）对象实例

计算字符串的长度

var txt = "Hello World!"

document.write(txt.length)

为字符串添加样式

var txt="Hello World!"

document.write("<p>Big: " + txt.big() + "</p>")

document.write("<p>Link: " + txt.link("http://www.w3school.com.cn") + "</p>")

创建 HTML 锚

stringObject.anchor(anchorname)

var txt="Hello world!"

document.write(txt.anchor("myanchor")) → <a name="myanchor">Hello world!</a>

使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置

var str="Hello world!"

document.write(str.indexOf("Hello")) → 0

document.write(str.indexOf("World")) → -1

document.write(str.indexOf("world")) → 6

使用 match() 来查找字符串中特定的字符，并且如果找到的话，则返回这个字符

var str="Hello world!"

document.write(str.match("world")) → world

document.write(str.match("World")) → null

replace()替换字符串中的字符

var str="Visit Microsoft!"

document.write(str.replace(/Microsoft/,"W3School"))

3.JavaScript Date（日期）对象

Date 对象属性

属性描述

constructor 返回对创建此对象的 Date 函数的引用。

prototype 使您有能力向对象添加属性和方法。

Date 对象方法

Date() 返回当日的日期和时间。

getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。

getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。

getMonth() 从 Date 对象返回月份 (0 ~ 11)。

getFullYear() 从 Date 对象以四位数字返回年份。

getYear() 请使用 getFullYear() 方法代替。

getHours() 返回 Date 对象的小时 (0 ~ 23)。

getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。

getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。

getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。

getTime() 返回 1970 年 1 月 1 日至今的毫秒数。

getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差。

getUTCDate() 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。

getUTCDay() 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。

getUTCMonth() 根据世界时从 Date 对象返回月份 (0 ~ 11)。

getUTCFullYear() 根据世界时从 Date 对象返回四位数的年份。

getUTCHours() 根据世界时返回 Date 对象的小时 (0 ~ 23)。

getUTCMinutes() 根据世界时返回 Date 对象的分钟 (0 ~ 59)。

getUTCSeconds() 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。

getUTCMilliseconds()根据世界时返回 Date 对象的毫秒(0 ~ 999)。

parse() 返回1970年1月1日午夜到指定日期（字符串）的毫秒数。

setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。

setMonth() 设置 Date 对象中月份 (0 ~ 11)。

setFullYear() 设置 Date 对象中的年份（四位数字）。

setYear() 请使用 setFullYear() 方法代替。

setHours() 设置 Date 对象中的小时 (0 ~ 23)。

setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。

setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。

setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。

setTime() 以毫秒设置 Date 对象。

setUTCDate() 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。

setUTCMonth() 根据世界时设置 Date 对象中的月份 (0 ~ 11)。

setUTCFullYear() 根据世界时设置 Date 对象中的年份（四位数字）。

setUTCHours() 根据世界时设置 Date 对象中的小时 (0 ~ 23)。

setUTCMinutes() 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。

setUTCSeconds() 根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。

setUTCMilliseconds()根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。

toSource() 返回该对象的源代码。

toString() 把 Date 对象转换为字符串。

toTimeString() 把 Date 对象的时间部分转换为字符串。

toDateString() 把 Date 对象的日期部分转换为字符串。

toGMTString() 请使用 toUTCString() 方法代替。

toUTCString() 根据世界时，把 Date 对象转换为字符串。

toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。

toLocaleTimeString()根据本地时间格式，把 Date 对象的时间部分转换为字符串。

toLocaleDateString()根据本地时间格式，把 Date 对象的日期部分转换为字符串。

UTC() 根据世界时返回 1970 年 1 月 1 日到指定日期的毫秒数。

valueOf() 返回 Date 对象的原始值。

(1)JavaScript Date（日期）对象实例

返回当日的日期和时间

var date = new Date();

document.write(date); → Fri Nov 09 2012 16:28:07 GMT+0800

返回从 1970 年 1 月 1 日至今的毫秒数

var d = new Date();

document.write("从 1970/01/01 至今已过去 " + d.getTime() + " 毫秒"); → 从 1970/01/01 至今已过去 1352449713725 毫秒

传入一个时间参数(2012-09-08 10:00:00)，自动刷新页面指定模块来显示时钟

var today;

var ss = "123";

function setTime(time) {

var dateStr = time.replace(/-/g, "/");

alert(dateStr);

today = new Date(dateStr);

startTime();

}

function startTime() {

today.setSeconds(today.getSeconds() + 1);

var hour = today.getHours();

var min = today.getMinutes();

var sec = today.getSeconds();

hour = checkTime(hour);

min = checkTime(min);

sec = checkTime(sec);

document.getElementById('time').innerHTML = hour + ":" + min + ":" + sec;

t = setTimeout('startTime()', 1000);

}

function checkTime(i) {

if (i < 10) {

i = "0" + i

}

return i

}

使用 getDay() 和数组来显示星期

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()])

(2)定义日期

Date 对象用于处理日期和时间。可以通过 new 关键词来定义 Date 对象。

var myDate = new Date();

var myDate = new Date("2012/09/08 10:00:00");

(3)操作日期

使用针对日期对象的方法，我们可以很容易地对日期进行操作

1)为日期对象设置了一个特定的日期 (2008 年 8 月 9 日)：

var myDate = new Date();

myDate.setFullYear(2008, 7, 9);

注意：表示月份的参数介于 0 到 11 之间。也就是说，如果希望把月设置为 8 月，则参数应该是 7。

2)将日期对象设置为 5 天后的日期：

var myDate = new Date();

myDate.setDate(myDate.getDate() + 5);

注意：如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。

(4)比较日期

日期对象也可用于比较两个日期。

var myDate = new Date();

myDate.setFullYear(2008, 7, 9);

var today = new Date();

if (myDate > today) {

alert("myDate>today");

} else {

alert("myDate<today"); //显示这里

}

4.JavaScript Array（数组）对象

数组对象的作用是：使用单独的变量名来存储一系列的值

创建 Array 对象的语法：

new Array();

new Array(size);

new Array(element0, element1, ..., elementn);

Array 对象属性

属性描述

constructor 返回对创建此对象的数组函数的引用。

index

input

length 设置或返回数组中元素的数目。

prototype 使您有能力向对象添加属性和方法。

Array 对象方法

方法描述

concat() 连接两个或更多的数组，并返回结果。

join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

pop() 删除并返回数组的最后一个元素

push() 向数组的末尾添加一个或更多元素，并返回新的长度。

reverse() 颠倒数组中元素的顺序。

shift() 删除并返回数组的第一个元素

slice() 从某个已有的数组返回选定的元素

sort() 对数组的元素进行排序

splice() 删除元素，并向数组添加新元素。

toSource() 返回该对象的源代码。

toString() 把数组转换为字符串，并返回结果。

toLocaleString() 把数组转换为本地数组，并返回结果。

unshift() 向数组的开头添加一个或更多元素，并返回新的长度。

valueOf() 返回数组对象的原始值

(1)实例

创建数组，为其赋值，然后输出这些值。

var mycars = new Array()

mycars[0] = "Saab"

mycars[1] = "Volvo"

mycars[2] = "BMW"

for (i = 0; i < mycars.length; i++) {

document.write(mycars[i] + "<br />")

}

For...In 声明,使用 for...in 声明来循环输出数组中的元素

var x

var mycars = new Array()

mycars[0] = "Saab"

mycars[1] = "Volvo"

mycars[2] = "BMW"

for (x in mycars) {

document.write(mycars[x] + "<br />")

}

合并两个数组 - concat(),使用 concat() 方法来合并两个数组

var arr1 = 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"

var arr3 = arr1.concat(arr2)

用数组的元素组成字符串 - join(),使用 join() 方法将数组的所有元素组成一个字符串。

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("."));

文字数组 - sort(),如何使用 sort() 方法从字面上对数组进行排序。

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());

数字数组 - sort(),如何使用 sort() 方法从数值上对数组进行排序。

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));

5.JavaScript Boolean（逻辑）对象

Boolean 对象表示两个值："true" 或 "false"。

创建 Boolean 对象的语法：

new Boolean(value); //构造函数

Boolean(value); //转换函数

Boolean 对象属性

属性描述

constructor 返回对创建此对象的 Boolean 函数的引用

prototype 使您有能力向对象添加属性和方法。

Boolean 对象方法

方法描述

toSource() 返回该对象的源代码。

toString() 把逻辑值转换为字符串，并返回结果。

valueOf() 返回 Boolean 对象的原始值。

注释：如果省略 value 参数，或者设置为 0、-0、null、""、false、undefined 或 NaN，则该对象设置为 false。

否则设置为 true（即使 value 参数是字符串 "false"）。

案例:

var b1=new Boolean( 0)

var b2=new Boolean(1)

var b3=new Boolean("")

var b4=new Boolean(null)

var b5=new Boolean(NaN)

var b6=new Boolean("false")

0 是逻辑的 false

1 是逻辑的 true

空字符串是逻辑的 false

null 是逻辑的 false

NaN 是逻辑的 false

字符串 'false' 是逻辑的 true

6.JavaScript Math（算数）对象

Math 对象

Math 对象用于执行数学任务。

使用 Math 的属性和方法的语法：

var pivalue=Math.PI;

var sqrtvalue=Math.sqrt(15);

注释：Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。

像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。

Math 对象属性

属性描述

常数Math.E 返回算术常量 e，即自然对数的底数（约等于2.718）。

2 的自然对数Math.LN2 返回 2 的自然对数（约等于0.693）。

10 的自然对数Math.LN10 返回 10 的自然对数（约等于2.302）。

以 2 为底的 e 的对数Math.LOG2E 返回以 2 为底的 e 的对数（约等于 1.414）。

以 10 为底的 e 的对数Math.LOG10E 返回以 10 为底的 e 的对数（约等于0.434）。

圆周率Math.PI 返回圆周率（约等于3.14159）。

1/2 的平方根Math.SQRT1_2 返回 2 的平方根的倒数（约等于 0.707）。

2 的平方根Math.SQRT2 返回 2 的平方根（约等于 1.414）。

Math 对象方法

方法描述

abs(x) 返回数的绝对值。

acos(x) 返回数的反余弦值。

asin(x) 返回数的反正弦值。

atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。

atan2(y,x) 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。

ceil(x) 对数进行上舍入。

cos(x) 返回数的余弦。

exp(x) 返回 e 的指数。

floor(x) 对数进行下舍入。

log(x) 返回数的自然对数（底为e）。

max(x,y) 返回 x 和 y 中的最高值。

min(x,y) 返回 x 和 y 中的最低值。

pow(x,y) 返回 x 的 y 次幂。

random() 返回 0 ~ 1 之间的随机数。

round(x) 把数四舍五入为最接近的整数。

sin(x) 返回数的正弦。

sqrt(x) 返回数的平方根。

tan(x) 返回角的正切。

toSource() 返回该对象的源代码。

valueOf() 返回 Math 对象的原始值。

案例:

把数四舍五入为最接近的整数,使用 round()

Math.round(0.60) → 1

Math.round(0.50) → 1

Math.round(0.49) → 0

Math.round(-4.40) → -4

Math.round(-4.60) → -5

使用 random() 来返回 0 到 1 之间的随机数,random()

Math.random()

使用 max() 来返回两个给定的数中的较大的数，max()

Math.max(5,7)

使用 min() 来返回两个给定的数中的较小的数，min()

Math.min(5,7)

7.JavaScript RegExp 对象

RegExp 对象用于规定在文本中检索的内容。

RegExp 是正则表达式的缩写。

当您检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。

简单的模式可以是一个单独的字符。

更复杂的模式包括了更多的字符，并可用于解析、格式检查、替换等等。

您可以规定字符串中的检索位置，以及要检索的字符类型，等等。

直接量语法

/pattern/attributes

创建 RegExp 对象的语法：

new RegExp(pattern, attributes);

参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。

参数 attributes 是一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配。

修饰符

修饰符描述

i 执行对大小写不敏感的匹配。

g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。

m 执行多行匹配。

方括号

方括号用于查找某个范围内的字符：

表达式描述

[abc] 查找方括号之间的任何字符。

[^abc] 查找任何不在方括号之间的字符。

[0-9] 查找任何从 0 至 9 的数字。

[a-z] 查找任何从小写 a 到小写 z 的字符。

[A-Z] 查找任何从大写 A 到大写 Z 的字符。

[A-z] 查找任何从大写 A 到小写 z 的字符。

[adgk] 查找给定集合内的任何字符。

[^adgk] 查找给定集合外的任何字符。

(red|blue|green) 查找任何指定的选项。

元字符

元字符（Metacharacter）是拥有特殊含义的字符：

元字符描述

. 查找单个字符，除了换行和行结束符。

\w 查找单词字符。

\W 查找非单词字符。

\d 查找数字。

\D 查找非数字字符。

\s 查找空白字符。

\S 查找非空白字符。

\b 查找位于单词的开头或结尾的匹配。

\B 查找不处在单词的开头或结尾的匹配。

\0 查找 NUL 字符。

\n 查找换行符。

\f 查找换页符。

\r 查找回车符。

\t 查找制表符。

\v 查找垂直制表符。

\xxx 查找以八进制数 xxx 规定的字符。

\xdd 查找以十六进制数 dd 规定的字符。

\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。

量词

量词描述

n+ 匹配任何包含至少一个 n 的字符串。

n* 匹配任何包含零个或多个 n 的字符串。

n? 匹配任何包含零个或一个 n 的字符串。

n{X} 匹配包含 X 个 n 的序列的字符串。

n{X,Y} 匹配包含 X 或 Y 个 n 的序列的字符串。

n{X,} 匹配包含至少 X 个 n 的序列的字符串。

n$ 匹配任何结尾为 n 的字符串。

^n 匹配任何开头为 n 的字符串。

?=n 匹配任何其后紧接指定字符串 n 的字符串。

?!n 匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp 对象属性

属性描述

global RegExp 对象是否具有标志 g。

ignoreCase RegExp 对象是否具有标志 i。

lastIndex 一个整数，标示开始下一次匹配的字符位置。

multiline RegExp 对象是否具有标志 m。

source 正则表达式的源文本。

RegExp 对象方法

方法描述

compile 编译正则表达式。

exec 检索字符串中指定的值。返回找到的值，并确定其位置。

test 检索字符串中指定的值。返回 true 或 false。

支持正则表达式的 String 对象的方法

方法描述

search 检索与正则表达式相匹配的值。

match 找到一个或多个正则表达式的匹配。

replace 替换与正则表达式匹配的子串。

split 把字符串分割为字符串数组。

RegExp 对象的方法

RegExp 对象有 3 个方法：test()、exec() 以及 compile()。

test() 方法检索字符串中的指定值。返回值是 true 或 false。

例子：

var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

由于该字符串中存在字母 "e"，以上代码的输出将是：

true

exec()

exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

var patt1=new RegExp("e{2}", "g");

document.write(patt1.exec("The best things in life are free"), g);

由于该字符串中存在字母 "e"，以上代码的输出将是：

compile()

compile() 方法用于改变 RegExp。

compile() 既可以改变检索模式，也可以添加或删除第二个参数。

var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

document.write("</br>");

patt1.compile("d");

document.write(patt1.test("The best things in life are free"));

由于字符串中存在 "e"，而没有 "d"，以上代码的输出是：

truefalse

8.JavaScript HTML DOM 对象

除了内置的 JavaScript 对象以外，你还可以使用 JavaScript 访问并处理所有的 HTML DOM 对象。

对象描述

Window JavaScript 层级中的顶层对象。Window 对象表示浏览器窗口。每当 <body> 或者 <frameset> 标签出现，Window 对象就会被自动创建。

Navigator 包含客户端浏览器的信息。

Screen 包含客户端显示屏的信息。

History 包含了浏览器窗口访问过的 URL。

Location 包含了当前URL的信息。

HTML 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> 元素。

转载地址：http://moyci.baihongyu.com/

你可能感兴趣的文章

Ubuntu+win10远程桌面

查看>>

flutter-实现圆角带边框的view（android无效）

java LinkedList与ArrayList迭代器遍历和for遍历对比

转载一个webview开车指南以及实际项目中的使用

coursesa课程 Python 3 programming 统计文件有多少单词

查看>>

coursesa课程 Python 3 programming 输出每一行句子的第三个单词

查看>>

Returning a value from a function

查看>>

coursesa课程 Python 3 programming Functions can call other functions 函数调用另一个函数

查看>>

coursesa课程 Python 3 programming The while Statement

查看>>

course_2_assessment_6

查看>>