当 JavaScript 中的变量被声明的时候,程序内部会给它一个初始值 undefined
。
当你对一个值为 undefined
的变量进行运算操作的时候,算出来的结果将会是 NaN
,NaN
的意思是 "Not a Number"。
当你用一个没有 定义
的变量来做字符串连接操作的时候,它会如实的输出"undefined"
。
摄氏度转华氏度小应用
摄氏度的温度乘以9除以5,再加上32。
function convert(celsius) {
var fahrenheit = celsius * 9 / 5 + 32;
return fahrenheit;
}
字符串中的转义序列
常见的转义序列列表
Code | Output |
---|---|
\' | 单引号 |
\" | 双引号 |
\\ | 反斜杠符 |
\n | 换行符 |
\r | 回车符 |
\t | 制表符 |
\b | 退格符 |
\f | 换页符 |
通过在字符串变量或字符串后面写上 .length
来获得字符串变量 字符串
值的长度。
例如:
"Hello World!".length; //12
字符串的不可变性!
在JavaScript中, 字符串
的值是 不可变 的,这意味着一旦字符串被创建就不能被改变。
但这并不意味着 字符串 永远不能被改变,只是字符串字面量 string literal 的各个字符不能被改变。
改变 字符串 中的唯一方法是重新给它赋一个值。
通过 push()
函数可以将数据追加到一个数组的末尾。
.push()
接受把一个或多个参数,并把它“推”入到数组的末尾。
改变数组中数据的另一种方法是用 .pop()
函数。
.pop()
函数用来“抛出”一个数组末尾的值。我们可以把这个“抛出”的值赋给一个变量存储起来。
数组中任何类型的条目(数值,字符串,甚至是数组)可以被“抛出来” 。
pop()
函数用来移出数组中最后一个元素。如果想要移出第一个元素要怎么办呢?
这就是 .shift()
的用武之地。它的工作原理就像 .pop()
,但它移除的是第一个元素,而不是最后一个。
你不仅可以 shift
(移出)数组中的第一个元素,你也可以 unshift
(移入)一个元素到数组的头部。
.unshift()
函数用起来就像 .push()
函数一样, 但不是在数组的末尾添加元素,而是在数组的头部添加元素。
函数的参数parameters
在函数中充当占位符(也叫形参)的作用,参数可以为一个或多个。调用一个函数时所传入的参数为实参,实参决定着形参真正的值。简单理解:形参即形式、实参即内容。
这是带有两个参数的函数, param1
和 param2
:
function testFun(param1, param2) {
console.log(param1,param2);
}
接着我们调用 testFun
:
testFun("Hello", "World");
我们传递了两个参数, "Hello"
和 "World"
。在函数内部,param1
等于“Hello”,param2
等于“World”。请注意,testFun
函数可以多次调用,每次调用时传递的参数会决定形参的实际值。
对象 object 。
对象和数组很相似,数组是通过索引来访问和修改数据,对象是通过属性来访问和修改数据的。
这是一个示例对象:
var cat = {
"name": "Whiskers",
"legs": 4,
"tails": 1,
"enemies": ["Water", "Dogs"]
};
对象适合用来存储结构化数据,就和真实世界的对象一模一样,比如一只猫。
有两种方式访问对象属性,一个是点操作符(.
),一个是中括号操作符([]
)。
当你知道属性的名称的时候,使用点操作符。
这是一个使用点操作符读取对象属性的例子:
var myObj = {
prop1: "val1",
prop2: "val2"
};
var prop1val = myObj.prop1; // val1
var prop2val = myObj.prop2; // val2
第二种访问对象的方式就是中括号操作符([]
),如果你想访问的属性的名称有一个空格,这时你只能使用中括号操作符([]
)。
这是一个使用中括号操作符([]
)读取对象属性的例子:
var myObj = {
"Space Name": "Kirk",
"More Space": "Spock"
};
myObj["Space Name"]; // Kirk
myObj['More Space']; // Spock
注意:属性名称中如果有空格,必须把属性名称用单引号或双引号包裹起来。
中括号操作符的另一个使用方式是用变量来访问一个属性。当你需要遍历对象的属性列表或查表时,这种方式极为有用。
使用变量来访问属性的例子:
var someProp = "propName";
var myObj = {
propName: "Some Value"
}
myObj[someProp]; // "Some Value"
更多:
var myDog = "Hunter";
var dogs = {
Fido: "Mutt",
Hunter: "Doberman",
Snoopie: "Beagle"
}
var breed = dogs[myDog];
console.log(breed)// "Doberman"
注意:当我们通过变量名访问属性的时候,不需要给变量名包裹引号。因为实际上我们使用的是变量的值,而不是变量的名称。
当你创建了一个对象后,你可以用点操作符或中括号操作符来更新对象的属性。
举个例子,让我们看看 ourDog
:
var ourDog = {
"name": "Camper",
"legs": 4,
"tails": 1,
"friends": ["everything!"]
};
让我们更改它的名称为 "Happy Camper",这有两种方式来更新对象的name
属性:
ourDog.name = "Happy Camper";
ourDog["name"] = "Happy Camper";
你也可以像更改属性一样给对象添加属性。
看看我们是如何给ourDog
添加 "bark"
属性:
ourDog.bark = "bow-wow";
或者
ourDog["bark"] = "bow-wow";
我们可以删除对象的属性,例如:
delete ourDog.bark;
有时检查一个对象属性是否存在是非常有用的,我们可以用.hasOwnProperty(propname)
方法来检查对象是否有该属性。如果有返回true
,反之返回 false
。
JavaScript Object Notation 简称 JSON
,它使用JavaScript对象的格式来存储数据。JSON是灵活的,因为它允许 数据结构 是 字符串,数字,布尔值,字符串,和 对象 的任意组合。
这里是一个JSON对象的示例:
var ourMusic = [
{
"artist": "Daft Punk",
"title": "Homework",
"release_year": 1997,
"formats": [
"CD",
"Cassette",
"LP" ],
"gold": true
}
];
这是一个对象数组,并且对象有各种关于专辑的 详细信息。它也有一个嵌套的 formats
的数组。附加专辑记录可以被添加到数组的最上层。
注意:数组中有多个 JSON 对象的时候,对象与对象之间要用逗号隔开。
通过串联起来的点操作符或中括号操作符来访问JSON对象的嵌套属性。
下面是一个嵌套的JSON对象:
var ourStorage = {
"desk": {
"drawer": "stapler"
},
"cabinet": {
"top drawer": {
"folder1": "a file",
"folder2": "secrets"
},
"bottom drawer": "soda"
}
}
ourStorage.cabinet["top drawer"].folder2; // "secrets"
ourStorage.desk.drawer; // "stapler"
JSON对象可以嵌套对象和数组。与访问嵌套对象一样,用中括号操作符同样可以访问嵌套数组。
下面是如何访问嵌套数组的例子:
var ourPets = {
"cats": [
"Meowzer",
"Fluffy",
"Kit-Cat"
],
"dogs": [
"Spot",
"Bowser",
"Frankie"
]
};
ourPets.cats[1]; // "Fluffy"
ourPets.dogs[0]; // "Spot"
Math.random()
用来生成一个在0(包括0)到1(不包括1)之间的随机小数,因此Math.random()
可能返回0但绝不会返回1。
Math.floor()
向下取整 获得它最近的整数。
生成在两个指定的数之间的随机数:Math.floor(Math.random() * (max - min + 1)) + min
Regular expressions
正则表达式被用来根据某种匹配模式来寻找strings
中的某些单词。
举例:如果我们想要找到字符串The dog chased the cat
中单词 the
,我们可以使用下面的正则表达式: /the/gi
我们可以把这个正则表达式分成几段:
/
是这个正则表达式的头部
the
是我们想要匹配的模式
/
是这个正则表达式的尾部
g
代表着 global
(全局),意味着返回所有的匹配而不仅仅是第一个。
i
代表着忽略大小写,意思是当我们寻找匹配的字符串的时候忽略掉字母的大小写。
var testString = "Ada Lovelace and Charles Babbage designed the first computer and the software that would have run on it.";
var expressionToGetSoftware = /software/gi;
var softwareCount = testString.match(expressionToGetSoftware).length; //存储 testString 中匹配到 expression 的次数
我们可以在正则表达式中使用特殊选择器来选取特殊类型的值。
特殊选择器中的一种就是数字选择器\d
,意思是被用来获取一个字符串的数字。
在JavaScript中, 数字选择器类似于: /\d/g
。
在选择器后面添加一个加号标记(+
),例如:/\d+/g
,它允许这个正则表达式匹配一个或更多数字。
尾部的g
是'global'的简写,意思是允许这个正则表达式 找到所有的匹配而不是仅仅找到第一个匹配。
我们也可以使用正则表达式选择器 \s
来选择一个字符串中的空白。
空白字符有 " "
(空格符)、\r
(回车符)、\n
(换行符)、\t
(制表符) 和 \f
(换页符)。
空白正则表达式类似于:
/\s+/g
你可以用正则表达式选择器的大写版本 来转化任何匹配。
举个例子:\s
匹配任何空白字符,\S
匹配任何非空白字符。
使用构造函数来创建对象。
构造函数 通常使用大写字母开头,以便把自己和其他普通函数区别开。
下面便是一个 构造函数 了:
var Car = function() {
this.wheels = 4;
this.engines = 1;
this.seats = 1;
};
在 构造函数 中, this
指向被此 构造函数 创建出来的 对象 。
使用构造函数时,我们通过在它前面使用 new
关键字 来对它进行调用,如下:
var myCar = new Car();
myCar
现在成为了 Car
的一个 实例(instance),它被 构造函数 描述成下面的样子:
{
wheels: 4,
engines: 1,
seats: 1
}
注意:要使用 new
关键字 去调用构造函数。因为只有这样,Javascript才知道这是要去构造一个新 对象 ,并且把构造函数中的 this
指向这个新对象。
map
方法可以方便的迭代数组,例子:
var timesFour = oldArray.map(function(val){
return val * 4;
});
map
方法会迭代数组中的每一个元素,并根据回调函数来处理每一个元素,最后返回一个新数组。注意,这个方法不会改变原始数组。
在我们的例子中,回调函数只有一个参数,即数组中元素的值 (val
参数) ,但其实,你的回调函数也可以支持多个参数,譬如:元素的索引index
、原始数组arr
。
数组方法 reduce
用来迭代一个数组,并且把它累积到一个值中。
使用 reduce
方法时,你要传入一个回调函数,这个回调函数的参数是一个 累加器 (比如例子中的 previousVal
) 和当前值 (currentVal
)。
reduce
方法有一个可选的第二参数,它可以被用来设置累加器的初始值。如果没有在这定义初始值,那么初始值将变成数组中的第一项,而 currentVal
将从数组的第二项开始。
下面的例子使用了 reduce
来让数组中的所有值相减:
var singleVal = array.reduce(function(previousVal, currentVal) {
return previousVal - currentVal;
}, 0);
filter
方法用来迭代一个数组,并且按给出的条件过滤出符合的元素。
filter
方法传入一个回调函数,这个回调函数会携带一个参数,参数为当前迭代的项(我们叫它 val
)。
回调函数返回 true
的项会保留在数组中,返回 false
的项会被过滤出数组。
下面的代码示例展示了使用 filter
来移除数组中值等于5的项:
注意: 我们忽略了第二参数和第三参数,因为例子中我们只需要第一参数就够了。
array = array.filter(function(val) {
return val !== 5;
});
使用 sort
方法,你可以很容易的按字母顺序或数字顺序对数组中的元素进行排序。
与我们之前用的数组方法仅仅返回一个新数组不同, sort
方法将改变原数组,返回被排序后的数组。
sort
可以把比较函数作为参数传入。比较函数有返回值,当 a
小于 b
,返回一个负数;当 a
大于 b
,返回一个正数;相等时返回0。
如果没有传入比较函数,它将把值全部转成字符串,并按照字母顺序进行排序。
下面的例子将展示 sort
的使用,传入的比较函数把元素按照从小到大的顺序进行排列:
var array = [1, 12, 21, 2];
array.sort(function(a, b) {
return a - b;
});
sort() 方法,有一个可选参数,必须是函数,供它调用。那么就是个回调函数咯!
回调函数的参数要有两个:第一个参数的元素肯定在第二个参数的元素前面!!!
这个方法的排序是看回调函数的返回值:
- 如果返回值大于 0,则位置互换。
- 如果返回值小于 0,则位置不变。
例子:
var arr = [9,7,2];
arr.sort(function(a,b){
if(a>b) // 如果 a 大于 b,位置互换
return 1;
else //否则,位置不变
return -1;
});
// 排序结果: 2,7,9
可以使用 reverse
方法来翻转数组。
var myArray = [1, 2, 3];
myArray.reverse();
结果myArray 变成了 [3, 2, 1]
concat
方法可以用来把两个数组的内容合并到一个数组中。
concat
方法的参数应该是一个数组。参数中的数组会拼接在原数组的后面,并作为一个新数组返回。
下面是一个拼接数组的例子,用concat
把 otherArray
拼接在 oldArray
的后面:
newArray = oldArray.concat(otherArray);
你可以使用 split
方法按指定分隔符将字符串分割为数组。
你要给 split
方法传递一个参数,这个参数将会作为一个分隔符。
下面的例子展示了 split
方法的使用,按照 s
字母进行分割:
var array = string.split('s');
我们还可以使用 join
方法来把数组转换成字符串,里面的每一个元素可以用你指定的连接符来连接起来,这个连接符就是你要传入的参数。
下面展示了使用 join
来将数组中的每一项放入字符串,并用 and
进行连接:
var veggies = ["Celery", "Radish", "Carrot", "Potato"];
var salad = veggies.join(" and ");
console.log(salad); // "Celery and Radish and Carrot and Potato"
replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
语法
string.replace(searchvalue,newvalue)
参数值
参数 | 描述 |
---|---|
searchvalue | 必须。规定子字符串或要替换的模式的 RegExp 对象。 请注意,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp 对象。 |
newvalue | 必需。一个字符串值。规定了替换文本或生成替换文本的函数。 |
返回值
类型 | 描述 |
---|---|
String | 一个新的字符串,是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。 |
例子:
var str="Mr Blue has a blue house and a blue car";
var n=str.replace(/blue/g,"red");
// n输出结果
// Mr Blue has a red house and a red car
var str="Mr Blue has a blue house and a blue car";
var n=str.replace(/blue/gi, "red");
// n输出结果
// Mr red has a red house and a red car
endsWith()
方法用于确定字符串是否以指定的字符结尾。
如果该字符串以指定的字符结尾,则返回true
,否则返回false
。
注意:endsWith()
方法区分大小写。
语法
string.endsWith(searchvalue, length)
参数值
参数 | 描述 |
---|---|
searchvalue | 必须。字符串所查找的值 |
length | 可选。指定要搜索的字符串的长度。如果省略,则默认值是字符串的长度。 |
返回值
类型 | 描述 |
---|---|
Boolean | 如果字符串以该字符结尾,则返回true,否则,返回false。 |
repeat() 方法字符串复制指定次数。
语法
string.repeat(count)
参数值
参数 | 描述 |
---|---|
count | 必需,设置要复制的次数。 |
返回值
类型 | 描述 |
---|---|
String | 返回复制指定次数并连接在一起的字符串。 |
例子:
var str = "Runoob";
str.repeat(2);
// 输出结果
// RunoobRunoob
slice() 方法可从已有的数组中返回选定的元素。
slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
语法
array.slice(start, end)
参数值
参数 | 描述 |
---|---|
start | 可选。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。 |
end | 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。 |
返回值
类型 | 描述 |
---|---|
Array | 返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。 |
例子:
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
// citrus输出结果
// Orange,Lemon
splice() 方法用于添加或删除数组中的元素。
注意:这种方法会改变原始数组。
语法
array.splice(index,howmany,item1,.....,itemX)
参数值
参数 | 描述 |
---|---|
index | 必需。规定从何处添加/删除元素。 该参数是开始插入和(或)删除的数组元素的下标,必须是数字。 |
howmany | 必需。规定应该删除多少元素。必须是数字,但可以是 "0"。 如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。 |
item1, ..., itemX | 可选。要添加到数组的新元素。 |
返回值
类型 | 描述 |
---|---|
Array | 如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。 |
例子:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");
// fruits 输出结果
// Banana,Orange,Lemon,Kiwi,Apple,Mango
JavaScript Array every() 方法
every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。
every() 方法使用指定函数检测数组中的所有元素:
- 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
- 如果所有元素都满足条件,则返回 true。
注意: every() 不会对空数组进行检测。
注意: every() 不会改变原始数组。
语法
array.every(function(currentValue,index,arr), thisValue)
参数值
参数 | 描述 | ||||||||
---|---|---|---|---|---|---|---|---|---|
function(currentValue, index,arr) | 必须。函数,数组中的每个元素都会执行这个函数 函数参数:
| ||||||||
thisValue | 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。 如果省略了 thisValue ,"this" 的值为 "undefined" |
返回值
类型 | 描述 |
---|---|
Boolean | 如果所有元素都通过检测返回 true,否则返回 false。 |
JavaScript indexOf() 方法
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
如果没有找到匹配的字符串则返回 -1。
注意: indexOf() 方法区分大小写。
语法
string.indexOf(searchvalue,start)
参数值
参数 | 描述 |
---|---|
searchvalue | 必需。规定需检索的字符串值。 |
start | 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 string Object.length - 1。如省略该参数,则将从字符串的首字符开始检索。 |
返回值
类型 | 描述 |
---|---|
Number | 查找指定字符串第一次出现的位置,如果没找到匹配的字符串则返回 -1。 |
JavaScript lastIndexOf() 方法
lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,如果指定第二个参数 start,则在一个字符串中的指定位置从后向前搜索。
注意: 该方法将从后向前检索字符串,但返回是从起始位置 (0) 开始计算子字符串最后出现的位置。 看它是否含有字符串。
开始检索的位置在字符串的 start 处或字符串的结尾(没有指定 start 时)。
如果没有找到匹配字符串则返回 -1 。
注意:lastIndexOf() 方法是区分大小写的!
语法
string.lastIndexOf(searchvalue,start)
参数值
参数 | 描述 |
---|---|
searchvalue | 必需。规定需检索的字符串值。 |
start | 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的最后一个字符处开始检索。 |
返回值
类型 | 描述 |
---|---|
Number | 查找的字符串最后出现的位置,如果没有找到匹配字符串则返回 -1。 |
JavaScript from() 方法
from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。
如果对象是数组返回 true,否则返回 false。
语法
Array.from(object, mapFunction, thisValue)
参数值
参数 | 描述 |
---|---|
object | 必需,要转换为数组的对象。 |
mapFunction | 可选,数组中每个元素要调用的函数。 |
thisValue | 可选,映射函数(mapFunction)中的 this 对象。 |
返回值
类型 | 描述 |
---|---|
Array | 数组对象。 |
JavaScript Array includes() 方法
includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。
语法
arr.includes(searchElement)
arr.includes(searchElement, fromIndex)
参数值
参数 | 描述 |
---|---|
searchElement | 必须。需要查找的元素值。 |
fromIndex | 可选。从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。 |
返回值
类型 | 描述 |
---|---|
Boolean | 布尔值。如果找到指定值返回 true,否则返回 false。 |
JavaScript test() 方法
test() 方法用于检测一个字符串是否匹配某个模式。
语法
RegExpObject.test(string)
参数 | 描述 |
---|---|
string | 必需。要检测的字符串。 |
返回值
如果字符串 string 中含有与 RegExpObject 匹配的文本,则返回 true,否则返回 false。
说明
调用 RegExp 对象 r 的 test() 方法,并为它传递字符串 s,与这个表示式是等价的:(r.exec(s) != null)。
JavaScript RegExp 对象
RegExp 对象
RegExp 对象表示正则表达式,它是对字符串执行模式匹配的强大工具。
直接量语法
/pattern/attributes
创建 RegExp 对象的语法:
new RegExp(pattern, attributes);
参数
参数 pattern 是一个字符串,指定了正则表达式的模式或其他正则表达式。
参数 attributes 是一个可选的字符串,包含属性 "g"、"i" 和 "m",分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前,不支持 m 属性。如果 pattern 是正则表达式,而不是字符串,则必须省略该参数。
返回值
一个新的 RegExp 对象,具有指定的模式和标志。如果参数 pattern 是正则表达式而不是字符串,那么 RegExp() 构造函数将用与指定的 RegExp 相同的模式和标志创建一个新的 RegExp 对象。
如果不用 new 运算符,而将 RegExp() 作为函数调用,那么它的行为与用 new 运算符调用时一样,只是当 pattern 是正则表达式时,它只返回 pattern,而不再创建一个新的 RegExp 对象。
抛出
SyntaxError - 如果 pattern 不是合法的正则表达式,或 attributes 含有 "g"、"i" 和 "m" 之外的字符,抛出该异常。
TypeError - 如果 pattern 是 RegExp 对象,但没有省略 attributes 参数,抛出该异常。
修饰符
修饰符 | 描述 |
---|---|
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 对象属性
属性 | 描述 | FF | IE |
---|---|---|---|
global | RegExp 对象是否具有标志 g。 | 1 | 4 |
ignoreCase | RegExp 对象是否具有标志 i。 | 1 | 4 |
lastIndex | 一个整数,标示开始下一次匹配的字符位置。 | 1 | 4 |
multiline | RegExp 对象是否具有标志 m。 | 1 | 4 |
source | 正则表达式的源文本。 | 1 | 4 |
RegExp 对象方法
方法 | 描述 | FF | IE |
---|---|---|---|
compile | 编译正则表达式。 | 1 | 4 |
exec | 检索字符串中指定的值。返回找到的值,并确定其位置。 | 1 | 4 |
test | 检索字符串中指定的值。返回 true 或 false。 | 1 | 4 |
支持正则表达式的 String 对象的方法
方法 | 描述 | FF | IE |
---|---|---|---|
search | 检索与正则表达式相匹配的值。 | 1 | 4 |
match | 找到一个或多个正则表达式的匹配。 | 1 | 4 |
replace | 替换与正则表达式匹配的子串。 | 1 | 4 |
split | 把字符串分割为字符串数组。 | 1 | 4 |
JavaScript charCodeAt() 方法
charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。
字符串中第一个字符的位置为 0, 第二个字符位置为 1,以此类推。
语法
string.charCodeAt(index)
参数值
参数 | 描述 |
---|---|
index | 必需。表示字符串中某个位置的数字,即字符在字符串中的下标。 |
返回值
类型 | 描述 |
---|---|
Number | 返回在指定的位置的字符的 Unicode 编码。 |
JavaScript fromCharCode() 方法
fromCharCode() 可接受一个指定的 Unicode 值,然后返回一个字符串。
注意:该方法是 String 的静态方法,字符串中的每个字符都由单独的 Unicode 数字编码指定。使用语法: String.fromCharCode()。
语法
String.fromCharCode(n1, n2, ..., nX)
参数值
参数 | 描述 |
---|---|
n1, n2, ..., nX | 必需。一个或多个 Unicode 值,即要创建的字符串中的字符的 Unicode 编码。 |
返回值
类型 | 描述 |
---|---|
String | 返回代表 Unicode 编码的字符。 |
可以使用 typeof 运算符返回变量类型的方法。
JavaScript的内置类框架
1、 基类Object
所有JavaScript内置类都从基类Object派生(继承)。
基类Object包含的属性和方法如表所示,这些属性和方法可以被所有JavaScript内置类继承。
属性和方法 | 具体描述 |
---|---|
Prototype属性 | 对该对象的对象原型的引用。原型是一个对象,其他对象可以通过它继承属性。也就是说,可以把原型理解为父类 |
constructor()方法 | 构造函数。构造函数是类的一个特殊函数。创建类的对象实例时,系统会自动调用构造函数,通过构造函数对类进行初始化操作 |
hasOwnProperty(proName)方法 | 检查对象是否有局部定义的(非继承的)、具有特定名称(proName)的属性 |
IsPrototypeOf(object) | 检查对象是否是指定对象的原型 |
propertyIsEnumerable(proName)方法 | 返回Boolean值,指出指定的属性(proName)是否为一个对象的一部分以及该属性是否是可列举的。如果proName存在于object中且可以使用一个for...in循环穷举出来,则返回true;否则返回false |
toLocaleString()方法 | 返回对象本地化的字符串表示 |
toString()方法 | 返回对象的字符串表示 |
valueOf() | 返回对象的原始值(如果存在) |
2、内置类的基本功能
JavaScript内置类的基本功能如下所示。
内置类 | 基本功能 |
---|---|
Arguments | 用于存储传递给函数的参数 |
Array | 用于定义数组对象 |
Boolean | 布尔值的包装对象,用于将非布尔型的值转换成一个布尔值(True或False) |
Date | 用于定义日期对象 |
Error | 错误对象,用于错误处理。它还派生出下面几个处理错误的子类。
|
Function | 用于表示开发者定义的任何函数 |
Math | 数学对象,用于数学计算 |
Number | 原始数值的包装对象,可以自动在原始数值和对象之间转换 |
RegExp | 用于完成有关正则表达式的操作和功能 |
String | 字符串对象,用于处理字符串 |
3、Array对象
可以使用Array对象创建数组。数组(Array)是内存中一段连续的存储空间,用于保存一组相同数据类型的数据。数组具有如下特性。
- 和变量一样,每个数组都有一个唯一标识它的名称。
- 同一数组的数组元素应具有相同的数据类型。
- 每个数组元素都有索引和值(Value)两个属性,索引是从0开始的整数,用于定义和标识数组中数组元素值的位置;值当然就是数组元素对应的值。
JavaScript支持动态数组,也就是说,在创建数组对象时可以不指定数组大小。在程序运行时由赋值语句动态决定数组大小。
Array对象的方法如下所示。
方法 | 具体描述 |
---|---|
Join | 将数组中的所有元素连接成字符串,元素间使用逗号或其他分隔符连接 |
Reverse | 返回数组的倒序 |
Sort | 返回按字母顺序排序的数组 |
4、Date对象
可以使用下面几种方法创建Date对象。
MyDate = new Date(); // 创建日期为当前系统时间的Date对象
MyDate = new Date("2016-9-1"); // 创建日期为2016-9-1的Date对象
MyDate = new Date("2016, 9, 1"); // 参数分别指定Date对象的年、月、日
Date对象的常用方法如下所示。
方法 | 具体描述 |
---|---|
getDate | 返回Date对象中用本地时间表示的一个月中的日期值 |
getDay | 返回Date对象中用本地时间表示的一周中的星期值。0表示星期天,1表示星期一,2表示星期二,3表示星期三,4表示星期四,5表示星期五,6表示星期六 |
getFullYear | 返回Date对象中用本地时间表示的年份值 |
getHour | 返回Date对象中用本地时间表示的小时值 |
getMilliseconds | 返回Date对象中用本地时间表示的毫秒值 |
getMinutes | 返回Date对象中用本地时间表示的分钟值 |
getMonth | 返回Date对象中用本地时间表示的月份值(0~11,0表示1月,1表示2月,以此类推) |
getSeconds | 返回Date对象中用本地时间表示的秒钟值 |
getTime | 返回Date对象中用本地时间表示的时间值 |
getYear | 返回Date对象中的年份值,不同浏览器对此方法的实现不同,建议使用getFullYear |
setDate | 设置Date对象中用本地时间表示的数字日期 |
setFullYear | 设置Date对象中用本地时间表示的年份值 |
setHour | 设置Date对象中用本地时间表示的小时值 |
setMilliseconds | 设置Date对象中用本地时间表示的毫秒值 |
setMinutes | 设置Date对象中用本地时间表示的分钟值 |
setMonth | 设置Date对象中用本地时间表示的月份值 |
setSeconds | 设置Date对象中用本地时间表示的秒钟值 |
setTime | 设置Date对象中用本地时间表示的时间值 |
setYear | 设置Date对象中的年份值 |
toString | 返回对象的字符串表示 |
valueOf | 返回指定对象的原始值 |
Date对象的示例程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<style>
</style>
</head>
<body>
<script>
var arrWeekDay = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日");
var today;
today = new Date();
document.write("现在是:" + today.getFullYear() + "年" + (today.getMonth() + 1) + "月" + today.getDate() + "日" +
arrWeekDay[today.getDay()]);
</script>
</body>
</html>
5、Math对象
可以使用Math对象处理一些常用的数学运算。
方法 | 具体描述 |
---|---|
abs | 返回数值的绝对值 |
acos | 返回数值的反余弦值 |
asin | 返回数值的反正弦值 |
atan | 返回数值的反正切值 |
atan2 | 返回由X轴到(y, x)点的角度(以弧度为单位) |
ceil | 返回大于等于其数字参数的最小整数 |
cos | 返回数值的余弦值 |
exp | 返回e(自然对数的底)的幂 |
floor | 返回小于等于其数字参数的最大整数 |
log | 返回数字的自然对数 |
max | 返回给出的两个数值表达式中的较大者 |
min | 返回给出的两个数值表达式中的较小者 |
pow | 返回表达式的指定次幂 |
random | 返回0~1的伪随机数 |
round | 返回与给出的数值表达式最接近的整数 |
sin | 返回数字的正弦值 |
sqrt | 返回数字的平方根 |
tan | 返回数字的正切值 |
提示:Math对象不能使用new关键字创建,使用时直接使用Math.方法名()的格式调用方法。
6、String对象
String对象只有一个属性length,返回字符串的长度。
方法 | 具体描述 |
---|---|
anchor | 在对象中的指定文本两端放置一个有NAME属性的HTML锚点。下面示例说明了anchor方法是如何实现这个要求的。 var MyStr = "This is an anchor" ; MyStr = MyStr.anchor("Anchor1") ; 执行完最后一条语句后MyStr的值为: <A NAME="Anchor1">This is an anchor</A> |
big | 把HTML的<BIG>标记放置在String对象的文本两端 |
blink | 把HTML的<BLINK>标记放置在String对象中的文本两端 |
bold | 把HTML的<B>标记放置在String对象中的文本两端 |
charAt | 返回指定索引位置处的字符 |
charCodeAt | 返回指定字符的Unicode编码 |
concat | 返回一个String对象,该对象包含了两个提供的字符串的链接 |
fixed | 把HTML的<TT>标记放置在String对象中的文本两端 |
fontcolor | 把带有COLOR属性的一个HTML的<FONT>标记放置在String对象中的文本两端 |
fontsize | 把一个带有SIZE属性的HTML的<FONT>标记放置在String对象中的文本的两端 |
fromCharCode | 从一些Unicode字符值中返回一个字符串 |
indexOf | 返回String对象内第一次出现子字符串的字符位置 |
italics | 把HTML的<I>标记放置在String对象中的文本两端 |
lastIndexOf | 返回String对象中子字符串最后出现的位置 |
link | 把一个有HREF属性的HTML锚点放置在String对象中的文本两端 |
match | 使用正则表达式对象查找字符串,并将结果作为数组返回 |
replace | 返回根据正则表达式进行文字替换后的字符串的复制 |
search | 返回与正则表达式查找内容匹配的第一个子字符串的位置 |
slice | 返回字符串的片段 |
small | 将HTML的<SMALL>标记添加到String对象中的文本两端 |
split | 将一个字符串分割为子字符串,然后将结果作为字符串数组返回 |
strike | 将HTML的<STRIKE>标记放置到String对象中的文本两端 |
substr | 返回一个从指定位置开始的指定长度的子字符串 |
substring | 返回位于String对象中指定位置的子字符串 |
sup | 将HTML的<SUP>标记放置到String对象中的文本两端 |
toLowerCase | 返回一个字符串,该字符串中的所有字母都被转换为小写字母 |
toUpperCase | 返回一个字符串,该字符串中的所有字母都被转换为大写字母 |
HTML DOM
文档对象模型(Document Object Model,DOM),是W3C组织推荐的处理可扩展标志语言的标志编程接口。它是一种与平台和语言无关的应用程序接口(API)。
HTML DOM 定义了访问和操作HTML文档的标准方法。它把HTML文档表现为带有元素、属性和文本的树结构(节点树)。
在HTML DOM 中,HTML文档由元素组成,HTML元素是分层次的,每个元素又可以包含属性和文本。
我们可以使用JavaScript对HTML DOM对象进行操作。在HTML DOM类结构的顶层是浏览器对象。
我们可以使用浏览器对象操纵浏览器窗口。
对象 | 具体描述 |
---|---|
Window | Window对象是 HTML DOM 浏览器对象结构的最顶层对象,它表示浏览器窗口 |
Document | 用于管理HTML文档,可以用来访问页面中的所有元素 |
Frames | 表示浏览器窗口中的框架窗口。Frames是一个集合,例如,Frames[0]表示窗口中的第1个框架 |
History | 表示浏览器窗口的浏览历史,就是用户访问过的站点的列表 |
Location | 表示在浏览器窗口的地址栏中输入的URL |
Navigator | 包含客户端浏览器的信息 |
Screen | 包含客户端显示屏的信息 |
Window对象
Window对象表示浏览器中一个打开的窗口。
属性 | 具体描述 |
---|---|
closed | 返回窗口是否已被关闭 |
defaultStatus | 设置或返回窗口状态栏中的默认文本 |
document | 对Document对象的引用,表示窗口中的文档 |
history | 对History对象的引用。表示窗口的浏览历史记录 |
innerheight | 返回窗口的文档显示区的高度 |
innerwidth | 返回窗口的文档显示区的宽度 |
location | 对Location对象的引用。表示在浏览器窗口的地址栏中输入的URL |
name | 设置或返回窗口的名称 |
Navigator | 对Navigator对象的引用。表示客户端浏览器的信息 |
opener | 返回对创建此窗口的窗口的引用 |
outerheight | 返回窗口的外部高度 |
outerwidth | 返回窗口的外部宽度 |
pageXOffset | 设置或返回当前页面相对于窗口显示区左上角的X位置 |
pageYOffset | 设置或返回当前页面相对于窗口显示区左上角的Y位置 |
parent | 返回父窗口 |
Screen | 对Screen对象的只读引用,表示客户端显示屏的信息 |
self | 返回对当前窗口的引用 |
status | 设置窗口状态栏的文本 |
top | 返回最顶层的先辈窗口 |
window | 等价于self属性,它包含了对窗口自身的引用 |
screenLeft/screenX | 只读整数。声明窗口的左上角在屏幕上的x坐标 |
screenTop/screenY | 只读整数。声明窗口的左上角在屏幕上的y坐标 |
Window对象的方法如下所示。
方法 | 具体描述 |
---|---|
alert() | 弹出一个警告对话框 |
blur() | 把键盘焦点从顶层窗口移开 |
clearInterval() | 取消由setInterval()方法设置的timeout |
clearTimeout() | 取消由setTimeout(0方法设置的timeout |
close() | 关闭浏览器窗口 |
confirm() | 显示一个请求确认对话框,包含一个“确定”按钮和一个“取消”按钮。 |
createPopup() | 创建一个pop-up窗口 |
focus() | 把键盘焦点给予一个窗口 |
moveBy() | 相对窗口的当前坐标把它移动指定的像素 |
moveTo() | 把窗口的左上角移动到指定的坐标 |
open() | 打开一个新的浏览器窗口或查找一个已命名的窗口 |
print() | 打印当前窗口的内容 |
prompt() | 显示可提示用户输入的对话框 |
resizeBy() | 按照指定的像素调整窗口的大小 |
resizeTo() | 把窗口的大小调整到指定的宽度和高度 |
scrollBy() | 按照指定的像素值来滚动内容 |
scrollTo() | 把内容滚动到指定的坐标 |
setInterval() | 按照指定的周期(以毫秒计)来调用函数或计算表达式 |
setTimeout() | 在指定的毫秒数后调用函数或计算表达式 |
Windows.setTimeout()方法的使用。
Windows.setTimeout(code, millisec)
参数code表示要调用的函数后要执行的JavaScript代码串,参数millisec表示在执行代码前需等待的毫秒数。
Window.setTimeout()方法的使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<style>
</style>
</head>
<body>
<input type="button" value="关闭" onclick="closeWindow()">
<script>
function closeWindow() {
document.write("2秒钟后将关闭窗口");
setTimeout("window.close()", 2000);
}
</script>
</body>
</html>
Window.open()方法的用法。
Window.open()方法的功能是打开一个新窗口,可以设置窗口中显示的网页内容、标题及窗口的属性等。
Window.open(url, 窗口名, 属性列表)
属性列表的内容如下所示。
属性 | 具体描述 |
---|---|
height | 窗口高度 |
width | 窗口宽度 |
top | 窗口距屏幕上方的像素值 |
left | 窗口距屏幕左侧的像素值 |
toolbar | 是否显示工具栏,toolbar = yes 表示显示工具栏,toolbar = no 表示不显示 |
menubar | 是否显示菜单栏,menubar = yes 表示显示菜单栏,menubar = no 表示不显示 |
scrollbars | 是否显示滚动条,scrollbars = yes 表示显示滚动条,scrollbars = no 表示不显示 |
resizable | 是否允许改变窗口大小,resizable = yes 表示允许, resizable = no 表示不允许 |
location | 是否显示地址栏,location = yes 表示允许,location = no 表示不允许 |
status | 是否显示状态栏, status = yes 表示允许,status = no 表示不允许 |
directories | 导航条是否可见 |
使用Window.open()方法打开一个新窗口。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<style>
</style>
</head>
<body>
<a href="#" onclick="newWindow('http://www.ptpress.com.cn', '邮电出版社')">邮电出版社</a>
<script>
function newWindow(url, wname) {
var oth =
"toolbar=no, location=no, (directories)=no, status=no, menubar=no,scrollbars=yes, resizable=yes, left=200, top=200, height=300";
oth = oth + ", width=400, height=300";
var newWindow = window.open(url, wname, oth);
newWindow.focus();
}
</script>
</body>
</html>
Navigator对象
Navigator对象包含浏览器的信息。
属性 | 具体描述 |
---|---|
appCodeName | 返回浏览器的代码名 |
appMinorVersion | 返回浏览器的次级版本 |
appName | 返回浏览器的名称 |
appVersion | 返回浏览器的平台和版本信息 |
browserLanguage | 返回当前浏览器的语言 |
cookieEnabled | 返回指明浏览器中是否启用cookie的布尔值 |
cpuClass | 返回浏览器系统的CPU等级 |
onLine | 返回指明系统是否处于脱机模式的布尔值 |
platform | 返回运行浏览器的操作系统平台 |
systemLanguage | 返回操作系统使用的默认语言 |
userAgent | 返回由客户机发送服务器的user-agent头部的值 |
userLanguage | 返回用户设置的操作系统的语言 |
使用Navigator对象属性获取并显示浏览器信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<style>
</style>
</head>
<body>
<script>
document.write("浏览器名称:" + navigator.appName + "<br>");
document.write("浏览器版本" + navigator.appVersion + "<br>");
document.write("浏览器的代码名称:" + navigator.appCodeName + "<br>");
document.write("是否启用cookie:" + navigator.cookieEnabled + "<br>");
document.write("浏览器的语言:" + navigator.browserLanguage + "<br>");
document.write("操作系统平台:" + navigator.platform + "<br>");
document.write("CPU等级:" + navigator.cpuClass + "<br>");
</script>
</body>
</html>
提示:Navigator对象是Window对象的一个属性,但Navigator对象的实例是唯一的,即所有窗口的Navigator对象都是唯一的。
document对象
document是常用的JavaScript对象,用于管理网页文档。
1、常用属性
document对象的常用属性如下所示。
类型 | 具体描述 |
---|---|
title | 设置文档标题等价于HTML的title标签 |
bgColor | 设置页面背景色 |
fgColor | 设置前景色(文本颜色) |
linkColor | 未点击过的链接颜色 |
alinkColor | 激活链接(焦点在此链接上)的颜色 |
vlinkColor | 已点击过的链接颜色 |
URL | 返回当前文档的URL |
fileCreatedDate | 文件建立日期,只读属性 |
fileModifiedDate | 文件修改日期,只读属性 |
fileSize | 文件大小,只读属性 |
cookie | 设置和读取cookie |
charset | 设置字符集,简体中文为gb2312 |
2、常用方法
document对象的常用方法如下所示。
类型 | 具体描述 |
---|---|
write | 向页面动态写入内容 |
createElement(Tag) | 创建一个HTML标签对象 |
getElementById(ID) | 获得指定ID值的对象 |
getElementsByName(Name) | 获得指定Name值的对象 |
3、子对象和集合
document对象的常用子对象和集合如下所示。
类型 | 具体描述 |
---|---|
主体子对象body | 指定文档主体的开始和结束,等价于<body>...</body> |
位置子对象location | 指定窗口所显示文档的完整(绝对)URL |
选区子对象selection | 表示当前网页中的选中内容 |
images集合 | 表示页面中的图像 |
forms集合 | 表示页面中的表单 |
document对象的使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<style>
</style>
</head>
<body>
<img src="images/lurennvzhu.jpg" alt="" width="500" height="600" border="0"><br>
<script>
document.write("文件地址:", document.location + "<br>");
document.write("文件标题:", document.title + "<br>");
document.write("图片路径:", document.images[0].src + "<br>");
document.write("文本颜色:", document.fgColor + "<br>");
document.write("背景颜色:", document.bgColor + "<br>");
</script>
</body>
</html>
JavaScript事件处理
事件处理是JavaScript的一个优势,它可以针对某个事件编写程序进行处理。
1、常用的HTML事件
常用的HTML事件如下所示。
事件 | 说明 |
---|---|
onabort | 图像的加载被中断时触发 |
onblur | 元素失去焦点时触发 |
onchange | 域的内容被改变时触发 |
onclick | 当用户单击某个对象时触发 |
ondblclick | 当用户双击某个对象时触发 |
onerror | 如果加载文档或图像时发生错误,则触发 |
onfocus | 元素获得焦点时触发 |
onkeydown | 某个键盘按键被按下时触发 |
onkeypress | 某个键盘按键被按下并松开时触发 |
onkeyup | 某个键盘按键被松开时触发 |
onload | 一个页面或一幅图像完成加载时触发 |
onmousedown | 鼠标按钮被按下时触发 |
onmousemove | 鼠标被移动时触发 |
onmouseout | 鼠标从某元素移开时触发 |
onmouseover | 鼠标移到某元素之上时触发 |
onmouseup | 鼠标按键被松开时触发 |
onreset | 重置按钮被单击时触发 |
onresize | 窗口或框架被重新调整大小时触发 |
onselect | 文本被选中时触发 |
onsubmit | 提交按钮被单击时触发 |
onunload | 用户退出页面时触发 |
每个事件的处理函数都有一个Event对象作为参数。Event对象代表事件的状态,如发生事件中的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态等。Event对象的type属性可以返回当前Event对象表示的事件的名称。
在网页中单击鼠标,弹出一个对话框,显示触发的事件类型。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<style>
</style>
</head>
<body onmousedown="getEventType(event)">
<p>在网页中点击某个位置。对话框会提示出被触发的事件的类型.</p>
<script>
function getEventType(event) {
alert(event.type);
}
</script>
</body>
</html>
在<body>标签中定义onmousedown事件的处理函数为getEventType(),参数event是Event对象。在getEventType()函数中调用alert()方法显示event.type属性。
也可以使用addEventListener()函数侦听事件并对事件进行处理,语法如下。
target.addEventListener(type, listener, useCapture);
参数说明如下。
- target:HTML DOM 对象,如document或window。
- type:事件类型
- listener:侦听到事件后处理事件的函数。此函数必须接受Event对象作为其唯一的参数。
- useCapture:是否使用捕捉。侦听器在侦听时有3个阶段:捕获阶段、目标阶段和冒泡阶段。此参数的作用是确定侦听器是运行于捕获阶段、目标阶段,还是冒泡阶段。一般用false,不用捕捉。
演示使用addEventListener()函数侦听事件并对事件进行处理的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<style>
</style>
</head>
<body>
<input id="myinput">
<script>
function handler() {
alert('welcome');
}
document.getElementById("myinput").addEventListener("click", handler, false);
</script>
</body>
</html>
2、Window对象的事件处理
Window对象的事件包括OnLoad(窗口启动)、OnUnLoad(窗口关闭)、OnFocus(窗口获得焦点)、OnBlur(窗口失去焦点)和OnError(窗口中出现错误)等,比较常用的事件是OnLoad。
在打开一个网页时弹出一个对话框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<style>
</style>
</head>
<body onload="alert('welcome')">
打开此网页时将弹出一个对话框
<script>
</script>
</body>
</html>
3、Event对象
每个事件的处理函数都有一个Event对象作为参数,Event对象代表事件的状态。
Event对象的属性如下所示。
事件 | 说明 |
---|---|
altKey | 用于检查Alt键的状态。当Alt键按下时,值为TRUE,否则为FALSE |
button | 检查按下的鼠标键。可能的取值如下。
这个属性仅用于 onmousedown、onmouseup 和 onmousemove 时间。对于其他事件,不管鼠标状态如何,都返回0 |
cancelBubble | 检测是否接受上层元素的事件的控制。等于TRUE表示不被上层元素的事件控制;等于FALSE(默认值)表示允许被上层元素的事件控制 |
clientX | 返回鼠标在窗口客户区域中的X坐标 |
clientY | 返回鼠标在窗口客户区域中的Y坐标 |
ctrlKey | 用于检查Ctrl键的状态。当Ctrl键按下时,值为TRUE,否则为FALSE |
fromElement | 检测 onmouseover 和 onmouseout事件发生时,鼠标离开的元素 |
keyCode | 检测键盘事件对应的内码。这个属性用于 onkeydown 、onkeyup 和 onkeypress 事件 |
offsetX | 检查相对于触发事件的对象,鼠标位置的水平坐标(即水平偏移) |
offsetY | 检查相对于触发事件的对象,鼠标位置的垂直坐标(即垂直偏移) |
propertyName | 设置或返回元素的变化的属性的名称。可以使用onpropertychange事件,得到propertyName的值 |
returnValue | 从事件中返回的值 |
screenX | 检测鼠标相对于用户屏幕的水平位置 |
ScreenY | 检测鼠标相对于用户屏幕的垂直位置 |
shiftKey | 检查Shift键的状态。当Shift键按下时,值为TRUE,否则为FALSE |
srcElement | 返回触发事件的元素 |
srcFilter | 返回触发 onfilterchange 事件的滤镜 |
toElement | 检测 onmouseover 和 onmouseout 事件发生时,鼠标进入的元素 |
type | 返回事件名 |
x | 返回鼠标相对于 css 属性中有 position 属性的上级元素的 x 轴坐标 |
y | 返回鼠标相对于 css 属性中有 position 属性的上级元素的 y 轴坐标 |