JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。 [1] JavaScript在1995年由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 JavaScript的标准是ECMAScript 。截至 2012 年,所有浏览器都完整的支持ECMAScript 5.1,旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日,ECMA国际组织发布了ECMAScript的第六版,该版本正式名称为 ECMAScript 2015,但通常被称为ECMAScript 6 或者ES2015。
JavaScript的标准是ECMAScript
。截至 2012 年,所有浏览器都完整的支持ECMAScript 5.1,旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日,ECMA国际组织发布了ECMAScript的第六版,该版本正式名称为 ECMAScript 2015,但通常被称为ECMAScript 6 或者ES2015。
发展初期,JavaScript的标准并未确定,同期有Netscape的JavaScript,微软的JScript和CEnvi的ScriptEase三足鼎立。为了互用性,Ecma国际(前身为欧洲计算机制造商协会)创建了ECMA-262标准(ECMAScript),两者都属于ECMAScript的实现,尽管JavaScript作为给非程序人员的脚本语言,而非作为给程序人员的脚本语言来推广和宣传,但是JavaScript具有非常丰富的特性。 1997年,在ECMA(欧洲计算机制造商协会)的协调下,由Netscape、Sun、微软、Borland组成的工作组确定统一标准:ECMA-262。完整的JavaScript实现包含三个部分:ECMAScript,文档对象模型,浏览器对象模型。
Js基础
JavaScript基础参考
html引入js
JavaScript 有 3 种引入方式,分别是
行内引入
行内引入,是在标签的事件中直接编写js代码
<input type="button" value="行内引入方式" onclick="javascript:alert('我是行内引入方式');">
其中javascript:可以省略
<input type="button" value="行内引入方式2" onclick="alert('我也是行内引入样式')">
内部引入
指的是在html标签中,添加script标签
<script type="text/javascript">内部引入js中的代码</script>
在script中的代码除了定义函数外,均会自动执行
<h2>标题</h2>
<script>
alert(1); // 立即执行
function test(){ // 定义了一个名为test的函数
alert(2);
}
</script>
内部引入的js代码,通常有2个位置,对于工具类js,写在head,而如果涉及到操作标签则一般放在body结束前,如果在操作 标签 时而 标签 本身未被加载,此时代码会报错而得不到正确的结果。
外部引入
<script type="text/javascript" src="路径/文件名.js"></script>
内部引入和外部引入均使用script标签,如果一个script标签使用了src,则在标签中编写的代码无效。
Js注释
Js有2种注释,分别是
单行注释:
<script>
//在行的首位注释,也叫整行注释
alert("这是一些js代码");//在一些代码后进行注释,也叫行尾注释
</script>
多行注释:
<script>
/*
中间的内容无论有多少行,均不生效
中间的内容无论有多少行,均不生效
*/
</script>
内容输出
除了弹窗外, 还有很多方法把js数据显示给用户, 比如document.write,console.log(), 或把数据写入html等
js代码风格
在JavaScript中,一行可以编写多条语句
如果一行中只有一条语句,可以不加分号,例如
var a = 10
a++
console.log(a)
它更接近python的书写风格,但并不强制缩进。
仅在一行中编写多条语句时,才强制加分号
var a = 10; var b = 20;
a++; b++;
document.write
使用document.write方法把js中的数据写入到页面中。
<script>
document.write("使用javascript写入内容<br>");
document.write("继续追加内容");
</script>
写入数据时,可以指定text文本,支持html标签。
与write方法相似的有writeln方法,该方法添加一个空格(不是换行)
<script>
document.writeln("Hello World!");
document.writeln("Have a nice day!");
</script>
console.log
使用console.log()方法向控制台打印内容,通常用于调试
<script>
var a = 12;
a+= 30;
console.log(a); // 在控制台中输出a
</script>
一般按下f12,或者ctrl+shift+j或页面点击右键并选择“检查”即可快速打开开发者工具,在“控制台”( console )中即可看到输出的内容。
弹出窗
JavaScript 有三种类型的弹出框:①提示框、②选择框和③输入框。
提示框
如果要确保信息传递给用户,通常会使用提示框,通常也叫警告框。
当警告框弹出时,用户将需要单击“确定”来继续。
语法
window.alert("sometext");
window.alert() 方法可以不带 window 前缀来写。
实例
alert("我是一个警告框!");
选择框
如果您希望用户验证或接受某个东西,则通常使用“选择”框,它是一个选择模型,接受或拒绝。
当选择框弹出时,用户将不得不单击“确定”或“取消”来继续进行。
如果用户单击“确定”,该框返回 true。如果用户单击“取消”,该框返回 false。
语法
window.confirm("sometext");
window.confirm() 方法可以不带 window 前缀来编写。
实例
var r = confirm("请按按钮");
if (r == true) {
x = "您按了确认!";
} else {
x = "您按了取消!";
}
输入框
如果您希望用户在进入页面前输入值,通常会使用输入框
当输入框弹出时,用户将不得不输入值后单击“确定”或点击“取消”来继续进行。
如果用户单击“确定”,该框返回输入值。如果用户单击“取消”,该框返回 NULL。
语法
window.prompt("sometext","defaultText");
window.prompt() 方法可以不带 window 前缀来编写。
实例
var person = prompt("请输入您的姓名", "比尔盖茨");
if (person != null) {
document.getElementById("demo").innerHTML = "你好 " + person + "!今天过的怎么样?";
}
数据类型
Js 数据类型,可以分为①原始数据类型 和 ②引用数据类型。
原始类型
以下为5种原始数据类型
number | 数字 | 1,-2,3.3,NaN |
string | 字符串 | “Hello” |
boolean | 布尔 | true, false |
null | 空 | 没有东西,可以理解为占位符 |
undefined | 未定义 | 变量没给初始值,就是undefined |
最新的JavaScript添加了 bigint,以及symble两种原始数据类型。
引用类型
引用数据类型,也可以理解为除了原始数据类型就是引用数据类型。
通常情况下,引用数据类型有如下几种类型:
Array | 数组:用于在单一引用中存储多个值的结构。 | let myVariable = [1, '张三', '李四', 10]; 元素引用方法: myVariable[0] , myVariable[1] …… |
---|---|---|
Object | 对象:JavaScript 里一切皆对象,一切皆可储存在变量里。这一点要牢记于心。 | let myVariable = document.querySelector('h1'); 以及上面所有示例都是对象。 |
typeof关键字
在 Js 中,可以使用 typeof 关键字判断对数据类型进行判断
判断number
var num1 = 1;
var num2 = 1.2;
var num3 = NaN; // NaN是一个关键字,表示非数字,它属于数字类型
//把上面三个数据及其类型输出到页面上
document.write(num1+"--"+typeof(num1)+"<br/>");
document.write(num2+"--"+typeof(num2)+"<br/>");
document.write(num3+"--"+typeof(num3)+"<br/>");
判断string
var str1 = "abc";
var str2 = 'def';
document.write(str1+"--"+typeof(str1)+"<br/>");
document.write(str2+"--"+typeof(str2)+"<br/>");
判断boolean
var flag1 = true;
var flag2 = false;
document.write(flag1+"--"+typeof(flag1)+"<br/>");
document.write(flag2+"--"+typeof(flag2)+"<br/>");
判断null
var obj = null;
document.write(obj+"--"+typeof(obj)+"<br/>");
判断undefined
var un1 =undefined;
var un2; //这个不赋值,也是undefined
document.write(un1+"--"+typeof(un1)+"<br/>");
document.write(un2+"--"+typeof(un2)+"<br/>");
变量
Js 是一种弱类型语言,弱类型是指,在开辟变量存储空间时,不指定存储的数据类型,可以存放任意类型。
声明变量
在 ES6 之前,JavaScript 只有两种作用域: 全局变量 与 函数内的局部变量,并使用 var 声明变量。
- 名称可包含字母、数字、下划线和美元符号
- 名称必须以字母开头
- 名称也可以 $ 和 _ 开头(但是通常我们不会这么做)
- 名称对大小写敏感(y 和 Y 是不同的变量)
- 保留字(比如 JavaScript 的关键词)无法用作变量名称
var carName = "Volvo";
// 这里可以使用 carName 变量
function myFunction() {
// 这里也可以使用 carName 变量
}
ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。
let 声明的变量只在 let 命令所在的范围有效,比如函数中声明仅函数中有效,在外部声明则是全局的
<script>
let num = 1; // 当前页面有效,全局变量
(function abc(){
let a = 20; // 仅在函数中有效
console.log(num);
})()
</script>
const 声明一个只读的常量,一旦声明,常量的值就不能改变。
const num = 10;
num=20; // 报错
console.log(num);
声明多个变量
您可以在一条语句中声明很多变量。使用逗号分隔变量即可:
var lastname="Doe", age=30, job="carpenter";
声明也可横跨多行
var lastname="Doe",
age=30,
job="carpenter";
当然,你也可以一次声明多个变量
let a=b=c=10;
console.log(a);
console.log(b);
console.log(c);
未初始化变量
对于未赋值的变量,默认值为undefined。
如果你希望在后续进行算术运算
,推荐初始化为0,而不是不写值。例如以下程序将得不到正确的sum
let sum;
sum+=1;
console.log(sum);
如果你希望进行字符串拼接
,推荐初始化为””,为空时会将undefined也拼接进去
let str;
str+= "abc";
console.log(str); // undefinedabc
可见,在javascript中,定义时初始化变量是重要的
重新声明变量
如果重新变量,不会报错,数据也不会丢失,但仅针对于var声明的变量
var str = "hello, world";
var str;
console.log(str);
对于let声明的变量,则不允许重复声明,例如以下代码会报错
let str = "hello, world";
let str;
console.log(str); // Uncaught SyntaxError: Identifier 'str' has already been declared
所以,不推荐重复声明变量,正常情况下也不应该重复声明变量。
运算符
JavaScript有大量运算符,这里对各个运算符进行详细的介绍
算术运算符
一、加号运算符(+)
加号运算符有2个作用:① 加法运算 、②字符串拼接
实例:加法运算
let a = 10
let b = 20
let c = a+b
console.log(c) // 30
实例:字符串拼接
let a = 10;
let b = "abc";
let c = 2+a+b;
console.log(c); // 12abc
注释:任何数据类型与字符串相加,均会变为字符串!
二、减号运算符(-)
进行减法运算
let a = 30;
let b = 10;
let c = a-b;
console.log(c) // 20
三、其他算术运算符(* / %)
这些运算符没有太大的特点,分别是(乘法、除法、取余数)
let a = 60;
let b = 20;
console.log(a*b) // 1200
console.log(a/b) // 3
console.log(a%b) // 0
自操作运算符
包括++,–两个运算符
一、自增运算符(++)
仅用于数字
let a = 10;
console.log(a++); // 10
console.log(++a); // 11
二、自减运算符(–)
和自增运算符相反
let a = 10;
console.log(a--); // 10
console.log(--a); // 9
赋值运算符
包括=,+=,-=,/=,%=
一、赋值运算符(=)
let a = 10; // 把10赋值给a
let b = a; // 把a的值赋值给b
对于原始数据类型,=是赋值,而对于引用数据类型,=是复制地址
二、其他赋值运算符
包括+=,-=…在内的运算符,使用方式基本相同
let a = 10;
let b = 5;
console.log(a+=b); // 相当于a=a+b; 即 a,结果为15
console.log(a-=b); // a=a-b; 15-5; 结果为10
console.log(a*=b); // 50
console.log(a/=b); // 10
console.log(a%=b); // 0
比较运算符
包括==,===,!=…以及三元运算符
一、恒等于运算符(==,===)
JavaScript中的==与===都可以等值判断,而===时需要值相当并且类型相同
let a = 10;
let b = 10.0;
let c = "10";
console.log(a==b); // true
console.log(a===b); // true
console.log(a==c); // true
console.log(a===c); // false
在比较时,仅使用==时不同类型的数据会进行一定的类型转换,这也是为什么10==”10″
二、不等于运算符(!=,!==)
数据不相等,和等于相反
let a = 10;
let b = 10.0;
let c = "10";
console.log(a!=b); // false
console.log(a!==b); // false
console.log(a!=c); // false
console.log(a!==c); // true
三、大于或小于(>,>=,<,<=)
let a = 10;
let b = 20;
let c = 20;
console.log(a>b); // false
console.log(b>=c); // true
console.log(b<c); // false
console.log(b<=c); // true
四、三元运算符
var e = 10;
var f = 5;
var g = e>5?e:f; //如果 ? 前的条件正确,即 e>5 为真,
//那么 g 的值是:前的值 e,否则 g 的值是:后的值 f
逻辑运算符
包括 !,&&,||
一、逻辑与(&&)
let a = 10;
let b = 3;
console.log(a&&b); // 3,逻辑与会短路
二、逻辑或(||)
let a = 10;
let b = 3;
console.log(a||b); // 10,逻辑非也会短路
三、非运算符(!)
能把一个布尔值的值取反,其他数据类型会自动换化为布尔
var b1 = true;
var b2 = !b1; //则b2的值是false
var b3 = !!"abc"; //非空字符串都是true
var b4 = !!""; //空字符串是false
var b5 = !!6; //非0,非NaN 的数字类型都是true
var b6 = !!0; //0是false
var b7 = !!NaN; //NaN是false
var b8 = !!null ; //null类型是false
var b9 = !!undefined; //undefined类型也是false
位运算符
位运算符工作于32位的数字上。任何数字操作都将转换为32位。结果会转换为 JavaScript 数字。
运算符 | 描述 | 例子 | 类似于 | 结果 | 十进制 |
---|---|---|---|---|---|
& | AND | x = 5 & 1 | 0101 & 0001 | 0001 | 1 |
| | OR | x = 5 | 1 | 0101 | 0001 | 0101 | 5 |
~ | 取反 | x = ~ 5 | ~0101 | 1010 | -6 |
^ | 异或 | x = 5 ^ 1 | 0101 ^ 0001 | 0100 | 4 |
<< | 左移 | x = 5 << 1 | 0101 << 1 | 1010 | 10 |
>> | 右移 | x = 5 >> 1 | 0101 >> 1 | 0010 | 2 |
位运算符在执行算法时很常用,比如交换2个变量的值
let a = 10;
let b = 20;
a=a^b;
b=a^b;
a=a^b;
console.log(a); // 20
console.log(b); // 10
类型转换
不同的数据类型能够进行转换
自动转换
在JavaScript进行某些操作时,会自动对数据类型进行修正。
下表展示了使用不同的数值转换为数字(Number), 字符串(String), 布尔值(Boolean):
原始值 | 转换为数字(算术运算) | 转换为字符串(+) | 转换为布尔值(条件判断) |
---|---|---|---|
false | 0 | “false” | false |
true | 1 | “true” | true |
0 | 0 | “0” | false |
1 | 1 | “1” | true |
“0” | 0 | “0” | true |
“000” | 0 | “000” | true |
“1” | 1 | “1” | true |
NaN | NaN | “NaN” | false |
Infinity | Infinity | “Infinity” | true |
-Infinity | -Infinity | “-Infinity” | true |
“” | 0 | “” | false |
“20” | 20 | “20” | true |
“abc” | NaN | “abc” | true |
[ ] | 0 | “” | true |
[20] | 20 | “20” | true |
[10,20] | NaN | “10,20” | true |
[“1”] | NaN | “1” | true |
[“1″,”2”] | NaN | “1,2” | true |
function(){} | NaN | “function(){}” | true |
{ } | NaN | “[object Object]” | true |
null | 0 | “null” | false |
undefined | NaN | “undefined” | false |
当加号“+”作为二元操作符(binary)并且其中一个操作数为字符串类型时,另一个操作数将会被无条件转为字符串类型:
// 基础类型
var foo = 3 + ''; // "3"
var foo = true + ''; // "true"
var foo = undefined + ''; // "undefined"
var foo = null + ''; // "null"
// 复合类型
var foo = [1, 2, 3] + ''; // "1,2,3"
var foo = {} + ''; // "[object Object]"
// 重写valueOf()和toString()
var o = {
valueOf: function() {
return 3;
},
toString: function() {
return 5;
}
};
foo = o + ''; // "3"
o = {
toString: function() {
return 5;
}
};
foo = o + ''; // "5"
对于基础类型,会直接转为与字面量相一致的字符串类型,而对于复合类型,会先试图调用对象的valueOf()方法,如果此方法返回值是引用类型,则接着再调用其toString()方法,最后将返回值转为字符串类型。上面我们定义了一个对象,包含valueOf()和toString()方法,然后和一个空字符串进行运算,可以看得出来,它是调用了valueOf()方法,然后我们重写此对象,将valueOf()移除,也就是不重写object的valueOf()方法,从最后的结果来看,它最终是调用了toString()方法,然后将返回的数字类型5与空字符串进行运算,最终得到一个字符串类型的值。
手动转换
constructor 属性返回所有 JavaScript 变量的构造函数。
"John".constructor // 返回函数 String() { [native code] }
(3.14).constructor // 返回函数 Number() { [native code] }
false.constructor // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor // 返回函数 Array() { [native code] }
{name:'John', age:34}.constructor // 返回函数 Object() { [native code] }
new Date().constructor // 返回函数 Date() { [native code] }
function () {}.constructor // 返回函数 Function(){ [native code] }
如果对象是 JavaScript Array 或 JavaScript Date ,我们就无法通过 typeof 来判断他们的类型,因为都是 返回 object。
你可以使用 constructor 属性来查看对象是否为数组 (包含字符串 “Array”):
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}
你可以使用 constructor 属性来查看对象是否为日期 (包含字符串 “Date”):
function isDate(myDate) {
return myDate.constructor.toString().indexOf("Date") > -1;
}
一、数字转换为字符串
x.toString()
(123).toString()
(100 + 23).toString()
方法 | 描述 |
---|---|
toExponential() | 把对象的值转换为指数计数法。 |
toFixed() | 把数字转换为字符串,结果的小数点后有指定位数的数字。 |
toPrecision() | 把数字格式化为指定的长度。 |
二、将布尔值转为字符串
全局方法 String() 可以将布尔值转换为字符串。
String(false) // 返回 "false"
String(true) // 返回 "true"
Boolean 方法 toString() 也有相同的效果。
false.toString() // 返回 "false"
true.toString() // 返回 "true"
三、将日期转换为字符串
Date() 返回字符串。
Date() // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
全局方法 String() 可以将日期对象转换为字符串。
String(new Date()) // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
Date 方法 toString() 也有相同的效果。
obj = new Date()
obj.toString() // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
方法 | 描述 |
---|---|
getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
getFullYear() | 从 Date 对象以四位数字返回年份。 |
getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 |
getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
getTime() | 返回 1970 年 1 月 1 日至今的毫秒数。 |
四、将字符串转换为数字
全局方法 Number() 可以将字符串转换为数字。
字符串包含数字(如 “3.14”) 转换为数字 (如 3.14).
空字符串转换为 0。
其他的字符串会转换为 NaN (不是个数字)。
Number("3.14") // 返回 3.14
Number(" ") // 返回 0
Number("") // 返回 0
Number("99 88") // 返回 NaN
方法 | 描述 |
---|---|
parseFloat() | 解析一个字符串,并返回一个浮点数。 |
parseInt() | 解析一个字符串,并返回一个整数。 |
Operator + 可用于将变量转换为数字:
var y = "5"; // y 是一个字符串
var x = + y; // x 是一个数字
如果变量不能转换,它仍然会是一个数字,但值为 NaN (不是一个数字):
var y = "John"; // y 是一个字符串
var x = + y; // x 是一个数字 (NaN)
五、将布尔值转换为数字
全局方法 Number() 可将布尔值转换为数字。
Number(false) // 返回 0
Number(true) // 返回 1
六、将日期转换为数字
全局方法 Number() 可将日期转换为数字。
d = new Date();
Number(d) // 返回 1404568027739
日期方法 getTime() 也有相同的效果。
d = new Date();
d.getTime() // 返回 1404568027739
函数使用
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试实例</title>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="myFunction()">点我</button>
</body>
</html>
函数就是包裹在花括号中的代码块,前面使用了关键词 function:
function functionname() { // 执行代码 }
当调用该函数时,会执行函数内的代码。
可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。
JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。
携带参数
JavaScript中函数可以传递参数,函数不可以重载,并且实际参数可以和形式参数不一一对应
<p>点击这个按钮,来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter',1)">点击这里</button>
<script>
function myFunction(name,job,sal){
alert("Welcome " + name + ", the " + job+ ",sal " + sal);
}
</script>
如果实际参数缺少,默认传递undefined
,如果参数过多也不会报错。
携带返回值
有时,我们会希望函数将值返回调用它的地方。
通过使用 return 语句就可以实现。
在使用 return 语句时,函数会停止执行,并返回指定的值。
function myFunction()
{
var x=5;
return x;
}
return在分支中只能使用一次,在您仅仅希望退出函数时 ,也可使用 return 语句。返回值是可选的:
function myFunction(a,b)
{
if (a>b)
{
return;
}
x=a+b
}
函数中的变量使用let声明时,将作为局部变量,生命周期仅在函数内部中。
如果未使用var、let、const等关键字,非严格模式下给未声明变量赋值创建的全局变量,是全局对象的可配置属性,可以删除。
var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明,可配置全局属性
console.log(this.var1); // 1
console.log(window.var1); // 1
console.log(window.var2); // 2
delete var1; // false 无法删除
console.log(var1); //1
delete var2;
console.log(delete var2); // true
console.log(var2); // 已经删除 报错变量未定义
流程控制
流程控制主要由流程控制语句实现,包括分支(if…else…)(switch…case…)、循环(while)(do…while…)(for)(for…in…)等
if…else…
if…else…语句是经典的分支语句,它有多种使用形式
一、单句if
仅有if,而没有else,如果条件满足则执行else后的语句体,仅有一条语句时可以不使用{}
if (time<20)
{
x="Good day";
}
二、简单的if…else…
单层次的if与else配合,条件不成立时执行else中的内容
if(a>b)
{
console.log(a);
}else
{
console.log(b);
}
三、嵌套的if…else…
if与else可以嵌套使用
if(a>b)
{
if(a>c)
{
console.log("max:"+a);
}
}else
{
if(a<c)
{
console.log("min:"+a);
}
}
四、if…else if…else
这个语句实质仍是嵌套的if…else,我们可以看作是if…else{ if… else},只是为了更好看少了个{}
if (time<10)
{
document.write("<b>早上好</b>");
}
else if (time>=10 && time<20)
{
document.write("<b>今天好</b>");
}
else
{
document.write("<b>晚上好!</b>");
}
switch…case…
此语句用于取代if…else if…else在判断定值时的不灵活之处。
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
与 case 1 和 case 2 不同时执行的代码
}
工作原理:首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
var d=new Date().getDay();
switch (d)
{
case 0:x="今天是星期日";
break;
case 1:x="今天是星期一";
break;
case 2:x="今天是星期二";
break;
case 3:x="今天是星期三";
break;
case 4:x="今天是星期四";
break;
case 5:x="今天是星期五";
break;
case 6:x="今天是星期六";
break;
}
请使用 default 关键词来规定匹配不存在时做的事情:
var d=new Date().getDay();
switch (d)
{
case 6:x="今天是星期六";
break;
case 0:x="今天是星期日";
break;
default:
x="期待周末";
}
document.getElementById("demo").innerHTML=x;
default不一定要放在最后,它首先会匹配case中的内容,然后才会判断default,但此时的default应该使用break,否则将继续往下执行。
for循环
for 循环是您在希望创建循环时常会用到的工具。
下面是 for 循环的语法:
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
语句 1 (代码块)开始前执行
语句 2 定义运行循环(代码块)的条件
语句 3 在循环(代码块)已被执行之后执行
for (var i=0; i<5; i++)
{
x=x + "该数字为 " + i + "<br>";
}
for…in…循环
JavaScript for/in 语句循环遍历对象的属性:
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person) // x 为属性名
{
txt=txt + person[x];
}
此语句可以用于数组,JavaScript的数组也是对象。
var arr=[1,2,3,4,5];
for (x in arr) // x 为下标
{
txt=txt + arr[x];
}
while循环
只要指定条件为 true,循环就可以一直执行代码块。
while (条件) { 需要执行的代码 }
本例中的循环将继续运行,只要变量 i 小于 5:
while (i<5)
{
x=x + "The number is " + i + "<br>";
i++;
}
do-while语句
do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块,然后如果条件为真的话,就会重复这个循环。
do { 需要执行的代码 } while (条件);
下面的例子使用 do/while 循环。该循环至少会执行一次,即使条件为 false 它也会执行一次,因为代码块会在条件被测试前执行:
do
{
x=x + "The number is " + i + "<br>";
i++;
}
while (i<5);
break与continue
我们已经在本教程之前的章节中见到过 break 语句。它用于跳出 switch() 语句。
break 语句可用于跳出循环。
break 语句跳出循环后,会继续执行该循环之后的代码(如果有的话):
for (i=0;i<10;i++)
{
if (i==3)
{
break;
}
x=x + "The number is " + i + "<br>";
}
continue 语句中断循环中的迭代,如果出现了指定的条件,然后继续循环中的下一个迭代。 该例子跳过了值 3:
for (i=0;i<=10;i++)
{
if (i==3) continue;
x=x + "The number is " + i + "<br>";
}
JavaScript标号
标号的用途非常广泛,可以用于任意流程控制语句,或任意代码块中,
语法:
标号名称:
例如用于退出多层循环的外层循环
let text = "";
flag:for(let i=0;i<10;i++){
for(let j=0;j<10;j++){
text += j;
if(i===3) break flag;
}
}
console.log(text);
或者用于代码块
let x = 10;
list:{
x += 10;
break list;
x += 10;
}
console.log(x);
异常处理
try 语句测试代码块的异常。
catch 语句处理异常。
throw 语句创建自定义异常。
finally 语句在 try 和 catch 语句之后,无论是否有触发异常,该语句都会执行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>异常实例</title>
<script>
var txt="";
function message(){
try {
adddlert("Welcome guest!");
}
catch(err) {
txt="本页有一个错误。\n\n";
txt+="错误描述:" + err.message + "\n\n";
txt+="点击确定继续。\n\n";
alert(txt);
}
}
</script>
</head>
<body>
<input type="button" value="查看消息" onclick="message()" />
</body>
</html>
JS选择器
JavaScript选择器,这里指的是选择DOM元素的方法
获取元素方法均是document对象的方法
方法 | 描述 |
---|---|
getElementById() | 通过ID获取 |
getElementsByClassName() | 通过ClassName获取 |
getElementsByName() | 通过name属性获取 |
getElementsByTagName() | 通过标签名获取 |
getElementsByTagNameNS() | 适用于xml,且不常用 |
上述为html5之前的方法,上述方法均得到动态HTMLCollection,一旦html对象改变,HTMLCollection会自动变化数据。
在html5之后,document对象增加了2个静态HTMLCollection方法,可使用CSS选择器匹配,分别是:
方法 | 描述 |
---|---|
querySelector() | 获取第一个符合元素 |
querySelectorAll() | 获取所有符合条件元素 |
CSS选择器很多很强大,请参阅有关CSS选择器内容,这里不再赘述。
面向对象
面向对象是常用的开发技术,JavaScript支持面向对象。
ECMA-262 把对象(object)定义为“属性的无序集合,每个属性存放一个原始值、对象或函数”。严格来说,这意味着对象是无特定顺序的值的数组。
创建对象
JavaScript有多种创建对象方式。
一、new Object
Object是基础对象之一。通过new Object得到一个对象
<script>
let obj = new Object()
obj.name = '张三'
obj.age = 18
console.log(obj) // {name: '张三', age: 18}
</script>
二、简化方式
类似创建空数组时使用 [ ],对象使用 { } 即可得到一个对象
<script>
let obj = {}
obj.name = '李四'
obj.age = 22
console.log(obj) // {name: '李四', age: 22}
</script>
这种简化方式,实际是一种json格式,它可以直接快速指定属性和方法
<script>
var person ={
name: "lisi",
age: 21,
family: ["lida","lier","wangwu"],
say: function(){ // es5语法
console.log(this.name);
},
speak(){ // es6语法
console.log(this.family)
}
};
person.say(); // lisi
person.speak(); // ['lida', 'lier', 'wangwu']
</script>
动态赋值
这里的动态赋值,指的是动态绑定属性和方法。
实例1:使用对象实现“关联数组”
<script>
let obj = {}
obj['name'] = "王五"
obj.age = 33
console.log(obj) // {name: '王五', age: 33}
console.log(obj['age']) // 33
</script>
提示:对象的属性可以使用 . 调用,也可以使用[ ]调用,使用后者时就很数组的下标相似,相当于下标是一个string的键名,在php中它叫做“关联数组”。
实例2:使用 . 和使用 [ ] 的区别
<script>
let obj = {}
let obj2 = {}
for(let i=0; i<5;i++){
let key = "a"+i;
let value = i;
obj[key] = value;
obj2.key = value;
}
console.log(obj) // {a0: 0, a1: 1, a2: 2, a3: 3, a4: 4}
console.log(obj2) // {key: 4}
</script>
实例3:动态绑定方法
<script>
let obj = {}
obj.sleep = function(food){
console.log("吃"+food+"...");
}
obj.sleep('饭') // 吃饭...
</script>
在js中,方法和属性都可以动态添加。
类与构造器
前面我们是先创建一个空对象,再去添加属性和方法,如果需要大量的对象,是难以操作的。
在JavaScript中对类没有明确定义,但通常我们认为类是对象的模板,用于快速创建具有指定属性和方法的对象。
实例一:
<script>
// 创建一个带有属性和方法的类
// 注意类名首字母大写
function Obj(name, age){
this.name = name;
this.age = age;
this.sayHello = function(){
console.log(this.name+","+this.age)
}
}
let obj1 = new Obj('张三', 18);
let obj2 = new Obj("李四", 22)
obj1.sayHello(); // 张三,18
obj2.sayHello(); // 李四,22
</script>
提示:类名推荐首字母大写,否则某些低版本的浏览器可能不识别。
二、原型模式
每一个对象都一个原型对象prototype(它本身也有一个原型对象prototype,不过比较特殊为null),我们可以初步看作prototype是一个父类。
如果给一个类的prototype绑定了属性和方法,那么当该类对象中不存在此属性和方法时默认会向上寻找并最终得到给ptototype绑定的属性和方法。而如果该类也存在该属性和方法时优先使用子类,此时父类的该同名属性方法就失效,这非常灵活。
<script>
function Person() {
}
Person.prototype.name = "lisi";
Person.prototype.age = 21;
Person.prototype.family = ["lida","lier","wangwu"];
Person.prototype.say = function(){
alert(this.name);
};
console.log(Person.prototype); //Object{name: 'lisi', age: 21, family: Array[3]}
var person1 = new Person(); //创建一个实例person1
console.log(person1.name); //lisi
var person2 = new Person(); //创建实例person2
person2.name = "wangwu";
person2.family = ["lida","lier","lisi"];
console.log(person2); //Person {name: "wangwu", family: Array[3]}
console.log(person2.prototype); //undefined
console.log(person2.age); //21
</script>
提示:子类对象不可以直接 .prototype,仅可以被类名 . 调用。
JSON
JSON全称是:JavaScript Object Notation。原本是表示 javascript 对象的一种方法,现在是用于存储于交换文本信息通用方式,比 XML 更快,更小,更易于解析。
- JSON 文件的文件类型是 .json
- JSON 文本的 MIME 类型是 application/json
基本语法规则
1.数据存储在 “名称/值” 的键值对中,数据都是由键值对构成的
2.键名,可以使用 “单引号”, “双引号”, 或者不使用引号
3.值的类型有如下 6 种:
- 数字(整数或浮点数,且必须是十进制)
- 字符串(在双引号中)
- 逻辑值(true 或 false)
- 数组(在方括号中) {“persons”:[{},{}]}
- 对象(在花括号中) {“address”:{“province”:”陕西”….}}
- null
4.数据由逗号分隔:多个键值对由逗号分隔(数组,对象 最后一个成员无逗号)
5.花括号保存对象:使用{}定义json 格式
6.方括号保存数组:[]
( json 最外层要么是 {} ,要么是 [] ,而 {} 和 [] 可以互相嵌套)
Json实例一:基础的json对象
<script>
var person = {"name": "张三", age: 23, 'gender': true};
alert(person);
</script>
json实例二:json数组嵌套json对象
<script>
var ps = [{"name": "张三", "age": 23, "gender": true},
{"name": "李四", "age": 24, "gender": true},
{"name": "王五", "age": 25, "gender": false}];
alert(ps);
</script>
json实例三:json对象中嵌套json数组
<script>
var persons = {
"persons": [
{"name": "张三", "age": 23, "gender": true},
{"name": "李四", "age": 24, "gender": true},
{"name": "王五", "age": 25, "gender": false}
]
};
alert(persons);
</script>
json对象与字符串
json对象可以方便的与字符串进行转换。
一、json对象转字符串
<script>
var person = {"name": "张三", age: 23, 'gender': true};
document.writeln(typeof person) // object
var text = JSON.stringify(person)
document.writeln(typeof text) // string
</script>
二、json字符串转json对象
json字符串是指符合json格式的字符串,否则转换会失败
<script>
var text = '{"name":"张三","age":23,"gender":true}';
document.writeln(typeof text) // string
var jsonObj = JSON.parse(text)
document.writeln(typeof jsonObj) // obj
</script>
json存取数据
json对象只有属性,没有方法,在属性的存存取值方式上和普通的对象并没有区别。
可以使用 . 操作属性,或者 [ ] 操作属性,如果是json数组,那么只可以使用 [ ]
一、属性取值
<script>
//这是一个 json 对象嵌套了 json 数组的 json
var persons = {
"persons": [
{"name": "张三", "age": 23, "gender": true},
{"name": "李四", "age": 24, "gender": true},
{"name": "王五", "age": 25, "gender": false}
]
};
//使用 json对象.json数组[索引].键名
var name = persons.persons[2].name;
document.writeln(name); // 王五
//使用 json对象[键名]json数组[索引][键名]
var age = persons["persons"][2]["age"]
document.writeln(age); // 25
</script>
二、属性赋值
<script>
var person = {"name": "张三", age: 23, 'gender': true};
person.name = "newName"
document.write(JSON.stringify(person)) //{"name":"newName","age":23,"gender":true}
</script>
提示:Json数组可以使用js数组的所有方法,请参阅内置对象Array。
json遍历
前面讲过,for in 循环可以便利对象、数组,这些规则json对象、数组仍然适用。
这里给出几个json遍历实例:
一、遍历普通json对象
<script>
var person = {"name": "张三", age: 23, 'gender': true};
for(var key in person){
document.writeln(key+":"+person[key]+"<br>");
}
</script>
二、使用for遍历数组
<script>
var ps = [{"name": "张三", "age": 23, "gender": true},
{"name": "李四", "age": 24, "gender": true},
{"name": "王五", "age": 25, "gender": false}];
for (var i = 0; i < ps.length; i++) {
var p = ps[i];
for(var key in p){
document.writeln(key+":"+p[key]+"<br>");
}
}
</script>
三、使用for in遍历数组
<script>
var ps = [{"name": "张三", "age": 23, "gender": true},
{"name": "李四", "age": 24, "gender": true},
{"name": "王五", "age": 25, "gender": false}];
for (i in ps){
for(j in ps[i]){
document.writeln(j +":" + ps[i][j] + "<br>");
}
}
</script>
内置对象
JavaScript 提供多个内建对象,比如 Function、String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。
Function对象
Function表示函数对象,在Js中函数作为第一等公民,一等公民可以作为函数参数,可以作为函数返回值,也可以赋值给变量。
创建函数
构造函数创建函数对象
var fun = new Function(形式参数列表,方法体);
var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);
构造函数方式并不常用,或者说几乎不使用
一般来说使用以下2种创建方式:①函数声明式,②函数表达式
myFunction(4,3); // 调用函数声明式
//函数声明式
function myFunction(a, b) {
console.log('函数调用');
return a * b;
}
//函数表达式
var greeting = function(){
console.log("hello world");
}
greeting(); // 调用函数表达式
函数声明式可以在函数声明前调用(代码前面),函数表达式的函数只能在声明之后调用。
函数声明整体会被提升到当前作用域的顶部,函数表达式也提升到顶部但是只有其变量名提升,也就是说函数表达式实际上是一个 匿名函数 (函数没有名称)。
如果函数表达式声明的函数有函数名,那么这个函数名就相当于这个函数的一个局部变量,只能在函数内部调用,举个栗子:
var f = function fact(x) {
if (x <= 1)
return 1;
else
return x*fact(x-1);
};
alert(fact()); // Uncaught ReferenceError: fact is not defined
fact()在函数内部可以调用,在函数外部调用就会报错:fact未定义.
函数是一个对象,如果定义名称相同的方法,会覆盖。
函数表达式可以 “自调用”。
如果表达式后面紧跟 () ,则会自动调用。
(function () {
var x = "Hello!!"; // 我将调用自己
})();
参数属性
Funtion对象有一个内置对象arguments表示参数,通过它的length获取形参的个数。
function myFunction(a, b) {
return arguments.length;
}
由于 arguments 是存储参数数组,那么还可以用此特性完成一些调用,比如求和
x = sumAll(1, 123, 500, 115, 44, 88);
function sumAll() {
var i, sum = 0;
for (i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
箭头函数
ES6 新增了箭头函数。
箭头函数表达式的语法比普通函数表达式更简洁。
标准语法:
(参数列表) -> {一些语句}
基本实例:
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => {return x * y};
箭头函数都没有自己的 this。 不适合定义一个 对象的方法。
当我们使用箭头函数的时候,箭头函数会默认帮我们绑定外层 this 的值,所以在箭头函数中 this 的值和外层的 this 是一样的。
箭头函数是不能提升的,所以需要在使用之前定义。
使用 const 比使用 var 更安全,因为函数表达式始终是一个常量。
函数闭包
一个函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包(closure)。
一、返回方法本身
返回方法本身和python的返回方法计算代码相似,比如对数组求和我们可以这么做
function sum(arr) {
return arr.reduce(function (x, y) {
return x + y;
});
}
sum([1, 2, 3, 4, 5]); // 15
但是,如果不需要立刻求和,而是在后面的代码中,根据需要再计算怎么办?可以不返回求和的结果,而是返回求和的函数!
function lazy_sum(arr) {
function sum() {
return arr.reduce(function (x, y) {
return x + y;
});
}
return sum;
}
当我们调用lazy_sum()
时,返回的并不是求和结果,而是求和函数
调用函数f
时,才真正计算求和的结果:
var f = lazy_sum([1, 2, 3, 4, 5]); // function sum()
f(); // 15
二、模拟局部变量
JavaScript中局部变量通常使用let在方法内部定义,这些变量生命周期仅在方法内。而全局变量则存在容易污染的情况。
闭包可以让一个全局变量,模拟为局部变量的情形,主要可以避免污染。
function create_counter(initial) {
var x = initial || 0;
return {
inc: function () {
x += 1;
return x;
}
}
}
var c1 = create_counter();
console.log(c1.inc()) // 1
console.log(c1.inc()) // 2
console.log(c1.inc()) // 3
var c2 = create_counter(10);
console.log(c2.inc()) // 11
console.log(c2.inc()) // 12
console.log(c2.inc()) // 13
console.log(c1.inc()) // 4
但从这个例子来看,闭包模拟局部变量作用并不大,它是一种不完全的面向对象实体类的写法。
闭包可以隐藏局部变量x的状态,但目前来说意义并不大,使用场景非常窄。
Array对象
Array是数组对象,数组是存储一系列数组的容器。
创建数组
数组有3种创建方式
// 第一种
var arr1 = new Array(默认长度);
// 第二种
var arr2 = new Array(元素列表);
// 第三种
var arr3 = [元素列表];
通过数组的 constructor 属性即可判断该对象是否为数组。
// 第一种
var arr1 = new Array(2); // 仅一个值且为数字时,表示数组长度而不是内容为2
// 第二种
var arr2 = new Array(1,2,3);
// 第三种
var arr3 = [1,2,3];
console.log(arr1.constructor); // Array()
console.log(arr2.constructor); // Array()
console.log(arr3.constructor); // Array()
遍历数组
数组对象有一个length属性,保存了元素的长度。通过下标进行取值或设置值,以及对数组进行遍历
let arr = [1,3,4,9];
let num1 = arr[0]; // 取值
arr[1] = 2; // 设置值
// 遍历数组
for(x in arr){
console.log(arr[x]); // 1 2 4 9
}
// 遍历方式2
for(let i=0;i<arr.length;i++){
console.log(arr[i]);
}
prototype属性
prototype是每个对象的原型,为Array原型添加方法,那么每个Array都会增加自定义方法
<p id="demo">单击按钮创建一个数组,调用 ucase()方法, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<script>
Array.prototype.myUcase=function(){
for (i=0;i<this.length;i++){
this[i]=this[i].toUpperCase();
}
}
function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.myUcase();
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
push方法
push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
注意: 新元素将添加在数组的末尾。
注意: 此方法改变数组的长度。
提示: 在数组起始位置添加元素请使用 unshift() 方法。
array.push(item1, item2, ..., itemX)
实例:为数组从末尾插入元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi","Lemon","Pineapple")
pop方法
pop() 方法用于删除数组的最后一个元素并返回删除的元素。
注意:此方法改变数组的长度!
提示: 移除数组第一个元素,请使用 shift() 方法。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
let flud = fruits.pop(); // 返回删除的元素 Mango
unshift方法
unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
注意: 该方法将改变数组的数目。
提示: 将新项添加到数组末尾,请使用 push() 方法。
所有主要浏览器都支持unshift()方法,Internet Explorer 8及更早IE版本不支持。
注意: unshift() 方法在Internet Explorer 8及更早IE版本返回undefined。
array.unshift(item1,item2, ..., itemX)
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
shift方法
shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。
注意: 此方法改变数组的长度!
提示: 移除数组末尾的元素可以使用 pop() 方法。
array.shift()
var fruits = ["Banana", "Orange", "Apple", "Mango"];
let flud = fruits.shift(); // Banana
concat方法
concat() 方法用于连接两个或多个数组。
该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
array1.concat(array2,array3,...,arrayX)
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai); // Cecilie,Lone,Emil,Tobias,Linus,Robin
使用此方法时,对原数组是引用方式,任何改变都会影响原数组。
slice方法
slice() 方法可从已有的数组中返回选定的元素。
slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
注意: slice() 方法不会改变原始数组。(对于数组中引用类型仍为浅拷贝,会影响)
array.slice(start, end)
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
使用负数参数:
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var myBest = fruits.slice(-3,-1); // 截取倒数第三个(包含)到倒数第一个(不包含)的两个元素
var myBest = fruits.slice(-3); // 截取最后三个元素
sort方法
sort() 方法用于对数组的元素进行排序。
排序顺序可以是字母或数字,并按升序或降序。
默认排序顺序为按字母升序。(字母规则和数字规则不同)
注意:当数字是按字母顺序排列时”40″将排在”5″前面。
使用数字排序,你必须通过一个函数作为参数来调用。
函数指定数字是按照升序还是降序排列。
这些说起来可能很难理解,你可以通过以下实例进一步了解它。
注意: 这种方法会改变原始数组!。
array.sort(sortfunction)
数字排序(数字、升序):
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});
数字排序(数字、降序):
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return b-a});
数字排序 (字母、降序):
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort(function(a,b) { return b.localeCompare(a)});
// 另一种更方便的方式 fruits.reverse();
字母使用reverse方法即可实现降序。
join方法
join() 方法用于把数组中的所有元素转换一个字符串。
元素是通过指定的分隔符进行分隔的
语法:
array.join(separator)
无参数实例:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join(); // Banana,Orange,Apple,Mango
使用不同的分隔符:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join(" and "); // Banana and Orange and Apple and Mango
一般用来拼接url请求参数,例如:
var data = [];
data.push("sKeyword="+sKeyword);
data.push("cityid="+cityid);
data.push("start="+start);
data.push("end="+end);
data.push("source="+leimutype);
data.push("type="+shouru);
data.push("pagestep=200000");
data.push("page=1");
$(this).attr('href', '?dopost=getList&do=export&'+data.join('&'));
reduce方法
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
reduce() 可以作为一个高阶函数,用于函数的 compose。
注意: reduce() 对于空数组是不会执行回调函数的。
语法:
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
参数 | 描述 |
---|---|
function(total,currentValue, index,arr) | 必需。用于执行每个数组元素的函数。 函数参数: 参数描述total必需。初始值, 或者计算结束后的返回值。 currentValue必需。当前元素 currentIndex可选。当前元素的索引 arr可选。当前元素所属的数组对象。 |
initialValue | 可选。传递给函数的初始值 |
计算数组的和:
<p>点击按钮计算数组元素相加后的总和。</p>
<button onclick="myFunction()">点我</button>
<p>数组元素总和: <span id="demo"></span></p>
<script>
var numbers = [65, 44, 12, 4];
function getSum(total, num) {
return total + num;
}
function myFunction(item) {
document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}
</script>
四舍五入后计算数组元素的总和:
<p>点击按钮后对数组元素进行四舍五入并计算总和。</p>
<button onclick="myFunction()">点我</button>
<p>数组元素之和: <span id="demo"></span></p>
<script>
var numbers = [15.5, 2.3, 1.1, 4.7];
function getSum(total, num) {
return total + Math.round(num);
}
function myFunction(item) {
document.getElementById("demo").innerHTML = numbers.reduce(getSum, 0);
}
</script>
reduceRight方法
reduceRight() 方法的功能和 reduce() 功能是一样的,不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。
注意: reduce() 对于空数组是不会执行回调函数的。
语法:
array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)
参数 | 描述 |
---|---|
function(total,currentValue, index,arr) | 必需。用于执行每个数组元素的函数。 函数参数:参数描述 total必需。初始值, 或者计算结束后的返回值。 currentValue必需。当前元素 currentIndex可选。当前元素的索引 arr可选。当前元素所属的数组对象。 |
initialValue | 可选。传递给函数的初始值 |
计算数组元素相加后的总和:
<p>点击按钮计算数组元素的总和。</p>
<button onclick="myFunction()">点我</button>
<p>数组元素总和: <span id="demo"></span></p>
<script>
var numbers = [65, 44, 12, 4];
function getSum(total, num) {
return total + num;
}
function myFunction(item) {
document.getElementById("demo").innerHTML = numbers.reduceRight(getSum);
}
</script>
fill方法
fill() 方法用于将一个固定值替换数组的元素。
语法:
array.fill(value, start, end)
参数 | 描述 |
---|---|
value | 必需。填充的值。 |
start | 可选。开始填充位置。 |
end | 可选。停止填充位置 (默认为 array.length) |
填充 ” abc ” 到数组的最后两个元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("abc", 2, 4); // Banana,Orange,abc,abc
forEach方法
forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。
注意: forEach() 对于空数组是不会执行回调函数的。
语法:
array.forEach(function(currentValue, index, arr), thisValue)
参数 | 描述 |
---|---|
function(currentValue, index, arr) | 必需。 数组中每个元素需要调用的函数。 函数参数:参数描述 currentValue必需。当前元素 index可选。当前元素的索引值。 arr可选。当前元素所属的数组对象。 |
thisValue | 可选。传递给函数的值一般用 “this” 值。 如果这个参数为空, “undefined” 会传递给 “this” 值 |
实例:遍历数组
<p>点击按钮列出数组的每个元素。</p>
<button onclick="numbers.forEach(myFunction)">点我</button>
<p id="demo"></p>
<script>
demoP = document.getElementById("demo");
var numbers = [4, 9, 16, 25];
function myFunction(item, index) {
demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + item + "<br>";
}
</script>
forEach虽然是遍历,但不支持直接break和continue
实现break实例:
try {
var array = ["first","second","third","fourth"]; // 执行到第3次,结束循环
array.forEach(function(item,index){
if (item == "third") {
throw new Error("EndIterative");
}
alert(item);// first,sencond
});
} catch(e) {
if(e.message!="EndIterative") throw e;
};
实现 continue:
var arr = [1,2,3,4,5];
var num = 3;
arr.some(function(v){
if(v == num) {
return; //
}
console.log(v);
});
indexOf方法
indexOf() 方法可返回数组中某个指定的元素位置。
该方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时)。如果找到一个 item,则返回 item 的第一次出现的位置。开始位置的索引为 0。
如果在数组中没找到指定元素则返回 -1。
提示如果你想查找字符串最后出现的位置,请使用 lastIndexOf() 方法。
参数 | 描述 |
---|---|
item | 必须。查找的元素。 |
start | 可选的整数参数。规定在数组中开始检索的位置。 它的合法取值是 0 到 stringObject.length – 1。 如省略该参数,则将从字符串的首字符开始检索。 |
查找数组中的 “Apple” 元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple"); // 2
lastIndexOf方法
lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置,从该字符串的后面向前查找。
如果要检索的元素没有出现,则该方法返回 -1。
该方法将从尾到头地检索数组中指定元素 item。开始检索的位置在数组的 start 处或数组的结尾(没有指定 start 参数时)。如果找到一个 item,则返回 item 从尾向前检索第一个次出现在数组的位置。数组的索引开始位置是从 0 开始的。
如果在数组中没找到指定元素则返回 -1。
提示: 如果你想查找数组首次出现的位置,请使用 indexOf() 方法。
语法:
array.lastIndexOf(item,start)
参数 | 描述 |
---|---|
item | 必需。规定需检索的字符串值。 |
start | 可选的整数参数。规定在字符串中开始检索的位置。 它的合法取值是 0 到 stringObject.length – 1。 如省略该参数,则将从字符串的最后一个字符处开始检索。 |
从数组中的第四个位置查找字符串 “Apple”出现的位置:
var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.lastIndexOf("Apple",4); // 2
isArray方法
isArray() 方法用于判断一个对象是否为数组。
如果对象是数组返回 true,否则返回 false。
<p>点击按钮检测 "fruits" 变量是否为一个数组。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = document.getElementById("demo");
x.innerHTML = Array.isArray(fruits);
}
</script>
reverse方法
reverse() 方法用于颠倒数组中元素的顺序。
语法:
array.reverse()
颠倒数组中元素的顺序:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse(); // Mango,Apple,Orange,Banana
findIndex方法
findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。
findIndex() 方法为数组中的每个元素都调用一次函数执行:
- 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。
- 如果没有符合条件的元素返回 -1
注意: findIndex() 对于空数组,函数是不会执行的。
注意: findIndex() 并没有改变数组的原始值。
提示:findIndex()比indexOf更适合复杂的查询条件
array.findIndex(function(currentValue, index, arr), thisValue)
参数 | 描述 |
---|---|
function(currentValue, index,arr) | 必须。数组每个元素需要执行的函数。 函数参数:参数描述 currentValue必需。当前元素 index可选。当前元素的索引 arr可选。当前元素所属的数组对象 |
thisValue | 可选。 传递给函数的值一般用 “this” 值。 如果这个参数为空, “undefined” 会传递给 “this” 值 |
获取数组中年龄大于等于 18 的第一个元素索引位置:
var ages = [3, 10, 18, 20];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.findIndex(checkAdult); // 2
}
find方法
find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。
find() 方法为数组中的每个元素都调用一次函数执行:
- 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
- 如果没有符合条件的元素返回 undefined
注意: find() 对于空数组,函数是不会执行的。
注意: find() 并没有改变数组的原始值。
提示:find返回的是元素,而findIndex返回的是下标
语法:
array.find(function(currentValue, index, arr),thisValue)
参数 | 描述 |
---|---|
function(currentValue, index,arr) | 必需。数组每个元素需要执行的函数。 函数参数:参数描述 currentValue必需。当前元素 index可选。当前元素的索引值 arr可选。当前元素所属的数组对象 |
thisValue | 可选。 传递给函数的值一般用 “this” 值。 如果这个参数为空, “undefined” 会传递给 “this” 值 |
<p>点击按钮获取数组中年龄大于 18 的第一个元素。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<p><strong>注意:</strong> IE 11 及更早版本不支持 find() 方法。</p>
<script>
var ages = [3, 10, 18, 20];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.find(checkAdult);
}
</script>
filter方法
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意: filter() 不会对空数组进行检测。
注意: filter() 不会改变原始数组。
语法:
array.filter(function(currentValue,index,arr), thisValue)
参数 | 描述 |
---|---|
function(currentValue, index,arr) | 必须。函数,数组中的每个元素都会执行这个函数 函数参数: 参数描述 currentValue必须。当前元素的值 index可选。当前元素的索引值 arr可选。当前元素属于的数组对象 |
thisValue | 可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。 如果省略了 thisValue ,”this” 的值为 “undefined” |
返回数组 ages 中所有元素都大于 18 的元素:
var ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.filter(checkAdult); // 32,33,40
}
利用 filter 进行数组去重:
function unique(arr) {
return arr.filter(function(item, index, arr) {
//当前元素,在原始数组中的第一个索引==当前索引值,否则返回当前元素
return arr.indexOf(item, 0) === index;
});
}
var arr = [1,1,'abc','abc',true,true,15];
console.log(unique(arr))
// [1, "abc", true, 15]
every方法
every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。
every() 方法使用指定函数检测数组中的所有元素:
- 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
- 如果所有元素都满足条件,则返回 true。
注意: every() 不会对空数组进行检测。
注意: every() 不会改变原始数组。
语法:
array.every(function(currentValue,index,arr), thisValue)
参数 | 描述 |
---|---|
function(currentValue, index,arr) | 必须。函数,数组中的每个元素都会执行这个函数 函数参数: 参数描述 currentValue必须。当前元素的值 index可选。当前元素的索引值 arr可选。当前元素属于的数组对象 |
thisValue | 可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。 如果省略了 thisValue ,”this” 的值为 “undefined” |
<p>点击按钮检测数组的所有元素是否都大于 18 :</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
var ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.every(checkAdult); // false
}
</script>
some方法
some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。
some() 方法会依次执行数组的每个元素:
- 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
- 如果没有满足条件的元素,则返回false。
注意: some() 不会对空数组进行检测。
注意: some() 不会改变原始数组。
语法:
array.some(function(currentValue,index,arr),thisValue)
参数 | 描述 |
---|---|
function(currentValue, index,arr) | 必须。函数,数组中的每个元素都会执行这个函数 函数参数: 参数描述 currentValue必须。当前元素的值 index可选。当前元素的索引值 arr可选。当前元素属于的数组对象 |
thisValue | 可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。 如果省略了 thisValue ,”this” 的值为 “undefined” |
检测数组中是否有元素大于 18:
<p>点击按钮检测数组中是否有元素大于 18。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
var ages = [3, 10, 18, 20];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.some(checkAdult); // true
}
</script>
includes方法
includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。
语法:
arr.includes(searchElement) arr.includes(searchElement, fromIndex)
参数 | 描述 |
---|---|
searchElement | 必须。需要查找的元素值。 |
fromIndex | 可选。从该索引处开始查找 searchElement。 如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。 |
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true
当给定的索引小于0时,相当于0,那么会从整个数组中搜索。
splice方法
splice() 方法用于添加或删除数组中的元素。
注意:这种方法会改变原始数组。
语法:
array.splice(index,howmany,item1,.....,itemX)
参数 | 描述 |
---|---|
index | 必需。规定从何处添加/删除元素。 该参数是开始插入和(或)删除的数组元素的下标,必须是数字。 |
howmany | 可选。规定应该删除多少元素。必须是数字,但可以是 “0”。 如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。 |
item1, …, itemX | 可选。要添加到数组的新元素 |
移除数组的第三个元素,并在数组第三个位置添加新元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi"); // Banana,Orange,Lemon,Kiwi,Mango
from方法
from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。
如果对象是数组返回 true,否则返回 false。
语法:
Array.from(object, mapFunction, thisValue)
参数 | 描述 |
object | 必需,要转换为数组的对象。 |
mapFunction | 可选,数组中每个元素要调用的函数。 |
thisValue | 可选,映射函数(mapFunction)中的 this 对象。 |
字符串生成字符数组:
<h1>Array.from()</h1>
<p>从字符串中生成一个数组:</p>
<p id="demo"></p>
<p><strong>注意:</strong> IE11 及其更早的浏览器版本不支持 from 方法。</p>
<script>
var myArr = Array.from("hello");
if(myArr instanceof Array) {
document.getElementById("demo").innerHTML = myArr[0];
} else {
document.getElementById("demo").innerHTML = "该对象不是数组!";
}
</script>
下面的实例演示如何使用箭头语法和映射函数更改元素的值。
var arr = Array.from([1, 2, 3], x => x * 10);
// arr[0] == 10;
// arr[1] == 20;
// arr[2] == 30;
from 实现数组去重:
let arr = Array.from(new Set([1, 2, 1, 2]))
console.log(arr) //[1, 2]
map方法
map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意: map() 不会对空数组进行检测。
注意: map() 不会改变原始数组。
语法:
array.map(function(currentValue,index,arr), thisValue)
参数 | 描述 |
---|---|
function(currentValue, index,arr) | 必须。函数,数组中的每个元素都会执行这个函数 函数参数: 参数描述 currentValue必须。当前元素的值 index可选。当前元素的索引值 arr可选。当前元素属于的数组对象 |
thisValue | 可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。 如果省略了 thisValue,或者传入 null、undefined,那么回调函数的 this 为全局对象。 |
数组中的每个元素乘于输入框指定的值,并返回新数组:
<p>点击按钮将数组中的每个元素乘于输入框指定的值,并返回新数组。</p>
<p>最小年龄: <input type="number" id="multiplyWith" value="10"></p>
<button onclick="myFunction()">点我</button>
<p>新数组: <span id="demo"></span></p>
<script>
var numbers = [65, 44, 12, 4];
function multiplyArrayElement(num) {
return num * document.getElementById("multiplyWith").value;
}
function myFunction() {
document.getElementById("demo").innerHTML = numbers.map(multiplyArrayElement);
}
</script>
keys方法
keys() 方法用于从数组创建一个包含数组键的可迭代对象。
如果对象是数组返回 true,否则返回 false。
语法:
array.keys()
<h1>Array keys()</h1>
<p>从数组中创建一个可迭代的对象,该对象包含数组的键。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p><strong>注意:</strong> IE11 及其更早的浏览器版本不支持 keys 方法。</p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.keys();
document.getElementById("demo1").innerHTML = x.next().value;
document.getElementById("demo2").innerHTML = x.next().value;
document.getElementById("demo3").innerHTML = x.next().value;
</script>
entries方法
entries() 方法返回一个数组的迭代对象,该对象包含数组的键值对 (key/value)。
迭代对象中数组的索引值作为 key, 数组元素作为 value。
语法:
array.entries()
<h1>Array entries()</h1>
<p>从数组中创建一个可迭代的对象。</p>
<p>迭代对象的每个实体来自数组对应的元素。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p><strong>注意:</strong> IE11 及其更早的浏览器版本不支持 entries 方法。</p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.entries();
document.getElementById("demo1").innerHTML = x.next().value;
document.getElementById("demo2").innerHTML = x.next().value;
document.getElementById("demo3").innerHTML = x.next().value;
</script>
copyWithin方法
copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中。
语法:
array.copyWithin(target, start, end)
参数 | 描述 |
---|---|
target | 必需。复制到指定目标索引位置。 |
start | 可选。元素复制的起始位置。 |
end | 可选。停止复制的索引位置 (默认为 array.length)。如果为负值,表示倒数。 |
复制数组的前面两个元素到第三和第四个位置上:
var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
fruits.copyWithin(2, 0, 2); // Banana,Orange,Banana,Orange,Kiwi,Papaya
toString方法
toString() 方法可把数组转换为字符串,并返回结果。
注意: 数组中的元素之间用逗号分隔。
语法:
array.toString()
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.toString(); // Banana,Orange,Apple,Mango
valueOf方法
valueOf() 方法返回 Array 对象的原始值。
该原始值由 Array 对象派生的所有对象继承。
valueOf() 方法通常由 JavaScript 在后台自动调用,并不显式地出现在代码中。
注意: valueOf() 方法不会改变原数组。
语法:
array.valueOf()
valueOf() 是数组对象的默认方法。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var v=fruits.valueOf(); // Banana,Orange,Apple,Mango
fruits.valueOf()与 fruits返回值一样。
在这里toString和valueOf看似相同,实际原理却不相同,调用fruits时自动调用valueOf,检测到得到引用对象([“Banana”, “Orange”, “Apple”, “Mango”]),接着自动调用toString方法。
Boolean对象
Boolean 对象用于转换一个不是 Boolean 类型的值转换为 Boolean 类型值 (true 或者false).
Boolean对象的属性和方法都是基础属性和方法。需要掌握的是boolean与其他对象的转换。
Boolean 对象属性
属性 | 描述 |
---|---|
constructor | 返回对创建此对象的 Boolean 函数的引用 |
prototype | 使您有能力向对象添加属性和方法。 |
Boolean 对象方法
方法 | 描述 |
---|---|
toString() | 把布尔值转换为字符串,并返回结果。 |
valueOf() | 返回 Boolean 对象的原始值。 |
Date对象
Date 对象用于处理日期和时间。
创建Date对象
可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象:
有四种方式初始化日期:
new Date();
new Date(value);
new Date(dateString);
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);
上面的参数大多数都是可选的,在不指定的情况下,默认参数是0。
实例化一个日期的一些例子:
var today = new Date()
var d1 = new Date("October 13, 1975 11:13:00")
var d2 = new Date(79,5,24)
var d3 = new Date(79,5,24,11,33,0)
获取时间
获取时间的常用方法
方法 | 描述 |
---|---|
getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
getFullYear() | 从 Date 对象以四位数字返回年份。 |
getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 |
getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
getTime() | 返回 1970 年 1 月 1 日至今的毫秒数。 |
getTimezoneOffset() | 返回本地时间与格林威治标准时间 (GMT) 的分钟差。 |
getUTCDate() | 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。 |
getUTCDay() | 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。 |
getUTCFullYear() | 根据世界时从 Date 对象返回四位数的年份。 |
getUTCHours() | 根据世界时返回 Date 对象的小时 (0 ~ 23)。 |
getUTCMilliseconds() | 根据世界时返回 Date 对象的毫秒(0 ~ 999)。 |
getUTCMinutes() | 根据世界时返回 Date 对象的分钟 (0 ~ 59)。 |
getUTCMonth() | 根据世界时从 Date 对象返回月份 (0 ~ 11)。 |
getUTCSeconds() | 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。 |
getYear() | 已废弃。 请使用 getFullYear() 方法代替。 |
以下为获取时间实例:
console.log( new Date().getDate() ); // 取得一月中当前日期数(1-31)
console.log( new Date().getDay() ); // 星期中的当前日期数(0-6),周日为0
console.log( new Date().getFullYear() ); // 4位数年份,如2021
console.log( new Date().getHours() ); // 当天的小时数(0-23)
console.log( new Date().getMilliseconds() ); // 一秒中的毫秒数(0-999)
console.log( new Date().getMinutes() ); // 当前小时的分钟数(0-59)
console.log( new Date().getMonth() ); // 当前年份的月(0-11)
console.log( new Date().getSeconds() ); // 当前分钟的秒数(0-59)
console.log( new Date().getTime() ); // 日期转毫秒值
console.log( new Date().getTimezoneOffset() ); // 取得本地时间与格林威治(GMT)时间的分钟差。
// 提示:GMT时间和世界时间(UTC)一致。
设置时间
设置时间的常用方法
方法 | 描述 |
---|---|
setDate() | 设置 Date 对象中月的某一天 (1 ~ 31)。 |
setFullYear() | 设置 Date 对象中的年份(四位数字)。 |
setHours() | 设置 Date 对象中的小时 (0 ~ 23)。 |
setMilliseconds() | 设置 Date 对象中的毫秒 (0 ~ 999)。 |
setMinutes() | 设置 Date 对象中的分钟 (0 ~ 59)。 |
setMonth() | 设置 Date 对象中月份 (0 ~ 11)。 |
setSeconds() | 设置 Date 对象中的秒钟 (0 ~ 59)。 |
setTime() | setTime() 方法以毫秒设置 Date 对象。 |
setUTCDate() | 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。 |
setUTCFullYear() | 根据世界时设置 Date 对象中的年份(四位数字)。 |
setUTCHours() | 根据世界时设置 Date 对象中的小时 (0 ~ 23)。 |
setUTCMilliseconds() | 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。 |
setUTCMinutes() | 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。 |
setUTCMonth() | 根据世界时设置 Date 对象中的月份 (0 ~ 11)。 |
setUTCSeconds() | setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。 |
setYear() | 已废弃。请使用 setFullYear() 方法代替。 |
日期时间格式化
以下为JS自带的日期时间格式化相关方法:
方法 | 描述 |
---|---|
parse() | 返回1970年1月1日午夜到指定日期(字符串)的毫秒数。 |
toDateString() | 把 Date 对象的日期部分转换为字符串。 |
toGMTString() | 已废弃。请使用 toUTCString() 方法代替。 |
toISOString() | 使用 ISO 标准返回字符串的日期格式。 |
toJSON() | 以 JSON 数据格式返回日期字符串。 |
toLocaleDateString() | 根据本地时间格式,把 Date 对象的日期部分转换为字符串。 |
toLocaleTimeString() | 根据本地时间格式,把 Date 对象的时间部分转换为字符串。 |
toLocaleString() | 根据本地时间格式,把 Date 对象转换为字符串。 |
toString() | 把 Date 对象转换为字符串。 |
toTimeString() | 把 Date 对象的时间部分转换为字符串。 |
toUTCString() | 根据世界时,把 Date 对象转换为字符串。 实例: var today = new Date(); var UTCstring = today.toUTCString(); |
UTC() | 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。 |
以下为日期时间格式化实例:
console.log( Date.parse("March 21, 2012") ); // 1332259200000
console.log( new Date().toDateString() ); // Sat Nov 13 2021
console.log( new Date().toISOString() ); // 2021-11-13T07:06:01.454Z
console.log( new Date().toJSON() ); // 2021-11-13T07:06:01.454Z
console.log( new Date().toLocaleDateString() ); // 2021/11/13
console.log( new Date().toLocaleTimeString() ); // 下午3:00:19
console.log( new Date().toLocaleString() ); // 2021/11/13 下午3:01:17
console.log( new Date().toString() ); // Sat Nov 13 2021 15:02:37 GMT+0800 (中国标准时间)
console.log( new Date().toTimeString() ); // 15:03:19 GMT+0800 (中国标准时间)
console.log( new Date().toUTCString() ); // Sat, 13 Nov 2021 07:03:59 GMT
console.log( Date.UTC(2012,02,30) ); // 1333065600000
由JS提供的内置格式化方法,并不灵活,只适用于一般使用场景。如果希望自定义高度格式化方式,可为prototype属性绑定方法
Date.prototype.format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
// 获取年份
if (/(y+)/i.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp("(" + k + ")", "i").test(fmt)) {
fmt = fmt.replace(
RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
}
}
return fmt;
}
var now = new Date();
var nowStr = now.format("YYYY-MM-DD"); // 2021-11-13
console.log(nowStr);
Math对象
Math(算数)对象的作用是:执行常见的算数任务。
一般来说,你不需要创建Math对象的实例,只需要直接调用其属性、方法即可。比如:Math.PI
Math属性
属性 | 描述 |
---|---|
E | 返回算术常量 e,即自然对数的底数(约等于2.718)。 |
LN2 | 返回 2 的自然对数(约等于0.693)。 |
LN10 | 返回 10 的自然对数(约等于2.302)。 |
LOG2E | 返回以 2 为底的 e 的对数(约等于 1.4426950408889634)。 |
LOG10E | 返回以 10 为底的 e 的对数(约等于0.434)。 |
PI | 返回圆周率(约等于3.14159)。 |
SQRT1_2 | 返回 2 的平方根的倒数(约等于 0.707)。 |
SQRT2 | 返回 2 的平方根(约等于 1.414)。 |
Math方法
方法 | 描述 |
---|---|
abs(x) | 返回 x 的绝对值。 |
acos(x) | 返回 x 的反余弦值。 |
asin(x) | 返回 x 的反正弦值。 |
atan(x) | 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。 |
atan2(y,x) | 返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间)。 |
ceil(x) | 对数进行上舍入。 |
cos(x) | 返回数的余弦。 |
exp(x) | 返回 Ex 的指数。 |
floor(x) | 对 x 进行下舍入。 |
log(x) | 返回数的自然对数(底为e)。 |
max(x,y,z,…,n) | 返回 x,y,z,…,n 中的最高值。 |
min(x,y,z,…,n) | 返回 x,y,z,…,n中的最低值。 |
pow(x,y) | 返回 x 的 y 次幂。 |
random() | 返回 0 ~ 1 之间的随机数。 |
round(x) | 四舍五入。 |
sin(x) | 返回数的正弦。 |
sqrt(x) | 返回数的平方根。 |
tan(x) | 返回角的正切。 |
Number对象
Number表示数字对象(number)的包装类
Number属性
属性 | 描述 |
---|---|
constructor | 返回对创建此对象的 Number 函数的引用。 |
MAX_VALUE | 可表示的最大的数。 |
MIN_VALUE | 可表示的最小的数。 |
NEGATIVE_INFINITY | 负无穷大,溢出时返回该值。 |
NaN | 非数字值。 |
POSITIVE_INFINITY | 正无穷大,溢出时返回该值。 |
prototype | 允许您可以向对象添加属性和方法。 |
EPSILON | 表示 1 和比最接近 1 且大于 1 的最小 Number 之间的差别 |
MIN_SAFE_INTEGER | 表示在 JavaScript中最小的安全的 integer 型数字 (-(253 - 1) )。 |
MAX_SAFE_INTEGER | 表示在 JavaScript 中最大的安全整数(253 - 1 )。 |
Number方法
方法 | 描述 |
---|---|
isFinite | 检测指定参数是否为无穷大。 |
toExponential(x) | 把对象的值转换为指数计数法。 |
toFixed(x) | 把数字转换为字符串,结果的小数点后有指定位数的数字。 (四舍五入) |
toPrecision(x) | 把数字格式化为指定的长度。(四舍五入) |
toString() | 把数字转换为字符串,使用指定的基数。 |
valueOf() | 返回一个 Number 对象的基本数字值。 |
isInteger | 用来判断给定的参数是否为整数。 |
isSafeInteger | 判断传入的参数值是否是一个”安全整数”。 |
以下为Number对象方法实例:
var num = 5.56789;
var exponential=num.toExponential(); // 5.56789e+0
var fixed=num.toFixed(2); // 5.57
var precision = num.toPrecision(3); // 5.57
String对象
String 对象用于处理文本(字符串)。
String 对象创建方法: new String()。
var txt = new String("string");
//或者更简单方式:
var txt = "string";
es6模板字符串
在JavaScript中,单引号”,双引号””都是字符串,在es6之后,支持第三种字符串“(英文状态下键盘左上角按键),也称为es6模板字符串。
模板字符串可以便捷的拼接变量、表达式、函数,类似jquery那样的${}语法,例如:
<script>
let data = 123;
let str = `<h2 id="tip">${data+1}</h2>`; // 输出h2,内容为124
document.write(str);
</script>
length属性
length 属性返回字符串的长度(字符数)。
string.length
<script>
var txt = "Hello World!";
document.write(txt.length); //12
</script>
charAt方法
charAt() 方法可返回指定位置的字符。
第一个字符位置为 0, 第二个字符位置为 1,以此类推.
var str = "HELLO WORLD";
var n = str.charAt(2) // L
charCodeAt方法
charCodeAt() 方法可返回指定位置的字符的 Unicode 编码,返回值是 0 – 65535 之间的整数,表示给定索引处的 UTF-16 代码单元。
字符串中第一个字符的位置为 0, 第二个字符位置为 1,以此类推。
var str = "HELLO WORLD";
var n = str.charCodeAt(0); // 72
concat方法
concat() 方法用于连接两个或多个字符串。
该方法没有改变原有字符串,但是会返回连接两个或多个字符串新字符串。
语法:
string.concat(string1, string2, ..., stringX)
var str1 = "Hello ";
var str2 = "world!";
var n = str1.concat(str2); // Hello world!
endWith方法
endsWith() 方法用来判断当前字符串是否是以指定的子字符串结尾的(区分大小写)。
如果传入的子字符串在搜索字符串的末尾则返回 true,否则将返回 false。
语法:
string.endsWith(searchvalue, length)
var str = "To be, or not to be, that is the question.";
str.endsWith("question."); // true
str.endsWith("to be"); // false
str.endsWith("o be", 5); // true
fromCharCode方法
fromCharCode() 可接受一个指定的 Unicode 值,然后返回一个字符串。
注意:该方法是 String 的静态方法,字符串中的每个字符都由单独的 Unicode 数字编码指定。使用语法: String.fromCharCode()。
语法:
String.fromCharCode(n1, n2, ..., nX)
var n = String.fromCharCode(72,69,76,76,79);
console.log(n); // HELLO
indexOf方法
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
如果没有找到匹配的字符串则返回 -1。
注意: indexOf() 方法区分大小写。
提示: 同样你可以查看类似方法 lastIndexOf() 。
语法:
string.indexOf(searchvalue,start)
参数 | 描述 |
---|---|
searchvalue | 必需。规定需检索的字符串值。 |
start | 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 string Object.length – 1。如省略该参数,则将从字符串的首字符开始检索。 |
var str="Hello world, welcome to the universe.";
var n1=str.indexOf("e"); // 1
var n2=str.indexOf("welcome"); // 13
lastIndexOf 方法
lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,如果指定第二个参数 start,则在一个字符串中的指定位置从后向前搜索。
注意: 该方法将从后向前检索字符串,但返回是从起始位置 (0) 开始计算子字符串最后出现的位置。 看它是否含有字符串。
开始检索的位置在字符串的 start 处或字符串的结尾(没有指定 start 时)。
如果没有找到匹配字符串则返回 -1 。
注意:lastIndexOf() 方法是区分大小写的!
提示: 你也可以参照类似方法 indexOf() 。
注意: includes() 方法区分大小写。
语法:
string.lastIndexOf(searchvalue,start)
参数 | 描述 |
---|---|
searchvalue | 必需。规定需检索的字符串值。 |
start | 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length – 1。如省略该参数,则将从字符串的最后一个字符处开始检索。 |
var str="Hello world, welcome to the universe.";
var n1=str.lastIndexOf("e"); // 35
var n2=str.lastIndexOf("welcome"); // 13
includes方法
includes() 方法用于判断字符串是否包含指定的子字符串。
如果找到匹配的字符串则返回 true,否则返回 false。
注意: includes() 方法区分大小写。
语法:
string.includes(searchvalue, start)
var str = "Hello world, welcome to 52dixiaowo。";
var n = str.includes("world"); // true
match方法
match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。
注意: match() 方法将检索字符串 String Object,以找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。如果 regexp 没有标志 g,那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本, match() 将返回 null。否则,它将返回一个数组,其中存放了与它找到的匹配文本有关的信息。
语法:
string.match(regexp)
var str="The rain in SPAIN stays mainly in the plain";
var n=str.match(/ain/g); // ain,ain,ain
repeat方法
repeat() 方法字符串复制指定次数。
var str = "Hello";
str.repeat(2); // HelloHello
replace方法
replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
该方法不会改变原始字符串。
语法:
string.replace(searchvalue,newvalue)
参数 | 描述 |
---|---|
searchvalue | 必须。规定子字符串或要替换的模式的 RegExp 对象。 请注意,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp 对象。 |
newvalue | 必需。一个字符串值。规定了替换文本或生成替换文本的函数。 |
尝试进行一次替换:
var str="Visit Microsoft! Visit Microsoft!";
var n=str.replace("Microsoft","Windows"); // Visit Windows! Visit Microsoft!
全部替换:
var str="Mr Blue has a blue house and a blue car";
var n=str.replace(/blue/g,"red"); // 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"); // Mr red has a red house and a red car
replaceAll方法
replaceAll() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串,该函数会替换所有匹配到的子字符串。
该方法不会改变原始字符串。
语法:
const newStr = str.replaceAll(regexp|substr, newSubstr|function)
参数 | 描述 |
---|---|
regexp|substr | 必须。规定子字符串或要替换的模式的 RegExp 对象。 请注意,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp 对象。当使用一个 regex 时,您必须设置全局(”g”)标志, 否则,它将引发 TypeError:”必须使用全局 RegExp 调用 replaceAll”。 |
newSubstr|function | 必需。一个字符串值。规定了替换文本或生成替换文本的函数。 |
执行一个全局替换:
var str="Mr Blue has a blue house and a blue car";
var n=str.replaceAll(/blue/ig,"red"); // Mr red has a red house and a red car
search方法
search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。
如果没有找到任何匹配的子串,则返回 -1。
语法:
string.search(searchvalue)
执行一次对大小写敏感的查找:
var str="Mr. Blue has a blue house";
document.write(str.search("blue")); // 15
执行一次忽略大小写的检索:
var str="Mr. Blue has a blue house";
document.write(str.search(/blue/i)); // 4
slice方法
slice(start, end) 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
使用 start(包含) 和 end(不包含) 参数来指定字符串提取的部分。
start 参数字符串中第一个字符位置为 0, 第二个字符位置为 1, 以此类推,如果是负数表示从尾部截取多少个字符串,slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)。
end 参数如果为负数,-1 指字符串的最后一个字符的位置,-2 指倒数第二个字符,以此类推。
语法:
string.slice(start,end)
参数 | 描述 |
---|---|
start | 必须。 要抽取的片断的起始下标,第一个字符位置为 0。如果为负数,则从尾部开始截取。 |
end | 可选。 紧接着要截取的片段结尾的下标。 若未指定此参数,则要提取的子串包括 start 到原字符串结尾的字符串。 如果该参数是负数,那么它规定的是从字符串的尾部开始算起的位置。 slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)。 |
提取字符串的片断:
var str="Hello world!";
var n=str.slice(1,5); // ello
从字符串的第3个位置提取字符串片段:
var str="Hello world!";
var n=str.slice(3); // lo world!
提取最后一个字符和最后两个字符:
var str="Hello world!";
var n2=str.slice(-2); // d!
split方法
split() 方法用于把一个字符串分割成字符串数组。
提示: 如果把空字符串 (“”) 用作 separator,那么 stringObject 中的每个字符之间都会被分割。
注意: split() 方法不改变原始字符串。
语法:
string.split(separator,limit)
参数 | 描述 |
---|---|
separator | 可选。字符串或正则表达式,从该参数指定的地方分割 string Object。 |
limit | 可选。该参数可指定返回的数组的最大长度。如果设置了该参数,返回的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度。 |
把一个字符串分割成字符串数组:
var str="How are you doing today?";
var n=str.split(" "); // [How, are, you, doing, today]
使用 limit 参数:
var str="How are you doing today?";
var n=str.split(" ",3); // [How, are, you]
startsWith方法
startsWith() 方法用于检测字符串是否以指定的子字符串开始。
如果是以指定的子字符串开头返回 true,否则 false。
startsWith() 方法对大小写敏感。
语法:
string.startsWith(searchvalue, start)
查看字符串是否为 “Hello” 开头:
var str = "Hello world, welcome to the Runoob.";
var n = str.startsWith("Hello"); // true
查看从第 6 个索引位置是否以 “world” 开头:
var str = "Hello world, welcome to the Runoob.";
var n = str.startsWith("world", 6); // true
substr方法
substr() 方法可在字符串中抽取从 开始 下标开始的指定数目的字符。
提示: substr() 的参数指定的是子串的开始位置和长度,因此它可以替代 substring() 和 slice() 来使用。
在 IE 4 中,参数 start 的值无效。在这个 BUG 中,start 规定的是第 0 个字符的位置。在之后的版本中,此 BUG 已被修正。
ECMAscript 没有对该方法进行标准化,因此反对使用它。
注意: substr() 方法不会改变源字符串。
语法:
string.substr(start,length)
参数 | 描述 |
---|---|
start | 必需。要抽取的子串的起始下标。必须是数值。如果是负数,那么该参数声明从字符串的尾部开始算起的位置。也就是说,-1 指字符串中最后一个字符,-2 指倒数第二个字符,以此类推。 |
length | 可选。子串中的字符数。必须是数值。如果省略了该参数,那么返回从 stringObject 的开始位置到结尾的字串。 |
截取第二个字符后的子串:
var str="Hello world!";
var n=str.substr(2) // llo world!
从第二个字符串开始,截取3个长度字符:
var str="Hello world!";
var n=str.substr(2,3) // llo
substring方法
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
substring() 方法返回的子串包括 开始 处的字符,但不包括 结束 处的字符。
语法:
string.substring(from, to)
参数 | 描述 |
---|---|
from | 必需。一个非负的整数,规定要提取的子串的第一个字符在 string Object 中的位置。 |
to | 可选。一个非负的整数,比要提取的子串的最后一个字符在 string Object 中的位置多 1。 如果省略该参数,那么返回的子串会一直到字符串的结尾。 |
在本例中,我们将使用 substring() 从字符串中提取一些字符:
<script>
var str="Hello world!";
document.write(str.substring(3)+"<br>"); // lo world!
document.write(str.substring(3,7)); // lo w
</script>
提示:substring是在两个下标中截取,而substr是指定开始下标以及截取长度。
toLowerCase方法
toLowerCase() 方法用于把字符串转换为小写。
var str="Hello";
document.write(str.toLowerCase()); // hello
toUpperCase方法
toUpperCase() 方法用于把字符串转换为大写。
var str="hello";
document.write(str.toUpperCase()); // HELLO
trim方法
trim() 方法用于删除字符串的头尾空白符,空白符包括:空格、制表符 tab、换行符等其他空白符等。
trim() 方法不会改变原始字符串。
trim() 方法不适用于 null, undefined, Number 类型。
去除字符串的头尾空格:
var str = " Hello ";
alert(str.trim()); // "Hello"
toLocaleLowerCase方法
toLocaleLowerCase() 方法根据本地主机的语言环境把字符串转换为小写。
本地是根据浏览器的语言设置来判断的。
通常,该方法与 toLowerCase() 方法返回的结果相同,只有几种语言(如土耳其语)具有地方特有的大小写映射。
注意: toLocaleLowerCase() 方法没有改变原始字符串。
提示: 使用 toLocaleUpperCase() 方法根据本地主机的语言将字符串转换为大写。
var str="Hello";
document.write(str.toLocaleLowerCase()); // hello
toLocaleUpperCase方法
toLocaleUpperCase() 方法根据本地主机的语言环境把字符串转换为大写。
本地是根据浏览器的语言设置来判断的。
通常,该方法与 toUpperCase() 方法返回的结果相同,只有几种语言(如土耳其语)具有地方特有的大小写映射。
注意: toLocaleUpperCase() 方法没有改变原始字符串。
提示: 使用 toLocaleLowerCase() 方法根据本地主机的语言将字符串转换为小写。
var str = "hello";
var res = str.toLocaleUpperCase(); // Hello
HTML包装方法
HTML 返回包含在相对应的 HTML 标签中的内容。
以下方法并非标准方法,所以可能在某些浏览器下不支持。
方法 | 描述 |
---|---|
anchor() | 创建 HTML 锚。 |
big() | 用大号字体显示字符串。 |
blink() | 显示闪动字符串。 |
bold() | 使用粗体显示字符串。 |
fixed() | 以打字机文本显示字符串。 |
fontcolor() | 使用指定的颜色来显示字符串。 |
fontsize() | 使用指定的尺寸来显示字符串。 |
italics() | 使用斜体显示字符串。 |
link() | 将字符串显示为链接。 |
small() | 使用小字号来显示字符串。 |
strike() | 用于显示加删除线的字符串。 |
sub() | 把字符串显示为下标。 |
sup() | 把字符串显示为上标。 |
HTML包装实例
<script>
var txt = "Hello World!";
console.log( txt.anchor("hello") ); // <a name="hello">Hello World!</a>
console.log( txt.big() ); // <big>Hello World!</big>
console.log( txt.blink() ); // <blink>Hello World!</blink>
console.log( txt.bold() ); // <b>Hello World!</b>
console.log( txt.fixed() ); // <tt>Hello World!</tt>
console.log( txt.fontcolor() ); // <font color="undefined">Hello World!</font>
console.log( txt.fontsize(24) ); // <font size="24">Hello World!</font>
console.log( txt.italics() ); // <i>Hello World!</i>
console.log( txt.link("hello") ); // <a href="hello">Hello World!</a>
console.log( txt.small() ); // <small>Hello World!</small>
console.log( txt.strike() ); // <strike>Hello World!</strike>
console.log( txt.sub() ); // <sub>Hello World!</sub>
console.log( txt.sup() ); // <sup>Hello World!</sup>
</script>
RegExp对象
正则表达式是描述字符模式的对象。
正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具。
创建正则对象
可以使用构造函数创建,或简化方式
var patt=new RegExp(pattern,modifiers);
或者更简单的方式:
var patt=/pattern/modifiers;
- pattern(模式) 描述了表达式的模式
- modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配
注意:当使用构造函数创造正则对象时,需要常规的字符转义规则(在前面加反斜杠 \)。比如,以下是等价的:
var re = new RegExp("\\w+"); // \w表示匹配:(数字、字母及下划线)。 而 + 表示:(一个或多个)
var re = /\w+/;
接着,使用最简单的test方法判断字符串是否符合规则:
var str="Hello world!";
//查找"Hello"
var patt=/Hello/;
var result=patt.test(str); // true
document.writeln(result)
patt=/world/;
result=patt.test(str); // true
document.writeln(result)
patt=/haha/;
result=patt.test(str); // false
document.writeln(result)
匹配单字符
元字符(Metacharacter)是拥有特殊含义的字符:
元字符 | 描述 |
---|---|
. | 匹配任意单个字符,除了\n |
[ ] | 匹配[ ] 中列举的字符 |
\w | 匹配单词字符,即a-z、A-Z、0-9、_ |
\W | 匹配非单词字符。 |
\d | 匹配数字 |
\D | 匹配非数字 |
\s | 匹配空白,即空格,tab键 |
\S | 匹配非空白字符 |
\b | 匹配单词边界。 |
\B | 匹配非单词边界。 |
\0 | 匹配NULL 字符。 |
\n | 匹配换行符。 |
\f | 匹配换页符。 |
\r | 匹配回车符。 |
\t | 匹配制表符。 |
\v | 匹配垂直制表符。 |
\xxx | 匹配以八进制数 xxx 规定的字符。 |
\xdd | 匹配以十六进制数 dd 规定的字符。 |
\uxxxx | 匹配以十六进制数 xxxx 规定的 Unicode 字符。 |
提示:可使用转移字符把元字符变为普通字符,如匹配 . 时,可使用 \. 进行匹配。
以下为匹配单字符的实例:
var txt = "Hello World!";
// 匹配 .
console.log( /H.l/.test(txt) ); // true
console.log( /H.e/.test(txt) ); // false
// 匹配 [ ]
console.log( /[a3]/.test(txt) ); // false
console.log( /[ad]/.test(txt) ); // true
console.log( /[a-z]/.test(txt) ); // true
console.log( /[0-9]/.test(txt) ); // false
console.log( /[^abc]/.test() ); // true (^表示相反,是否存在abc外的字符)
// 匹配 \w 与 \W
console.log( /\w/.test(txt) ); // true
console.log( /\W/.test(txt) ); // true
// 匹配 \d 与 \D
console.log( /\d/.test(txt) ); // false
console.log( /\D/.test(txt) ); // true
// 匹配 \b 与 \B
console.log( /\bWo/.test(txt) ); // true (\b在前匹配单词头)
console.log( /\blo/.test(txt) ); // false
console.log( /Wo\b/.test(txt) ); // false
console.log( /lo\b/.test(txt) ); // true
console.log( /\Bello/.test(txt) ); // true (\B在前匹配词尾)
console.log( /\BHell/.test(txt) ); // false
匹配多字符
匹配多字符,在匹配单字符的基础上进行多次匹配
量词 | 描述 |
---|---|
n+ | 匹配任何包含至少一个 n 的字符串。 |
n* | 匹配任何包含零个或多个 n 的字符串。 |
n? | 匹配任何包含零个或一个 n 的字符串。 |
n{X} | 匹配包含 X 个 n 的序列的字符串。 |
n{X,} | X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。 |
n{X,Y} | X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次,至多 Y 次时匹配。 |
n$ | 匹配任何结尾为 n 的字符串。 |
^n | 匹配任何开头为 n 的字符串。 |
(?=n) | 匹配任何其后紧接指定字符串 n 的字符串。 |
(?!n) | 匹配任何其后没有紧接指定字符串 n 的字符串。 |
以下为匹配多字符的实例:
var txt = "Hello World!";
// 匹配 +
console.log( /l+/.test(txt) ); // true
// 匹配 *
console.log( /a*/.test(txt) ); // true
// 匹配 ?
console.log( /o?/.test(txt) ); // true
// 匹配 {x}
console.log( /l{2}/.test(txt) ); // true
// 匹配 {x,}
console.log( /d{2,}/.test(txt) ); // false
// 匹配 {x,y}
console.log( /d{1,3}/.test(txt) ); // true
// 匹配 n$
console.log( /d$/.test(txt) ); // false
// 匹配 ^n
console.log( /^H/.test(txt) ); // true
// 匹配 (?=n)
console.log( /He(?=llo)/.test(txt) ); // true
// 匹配 (?!n)
console.log( /o(?!r)/.test(txt) ); // true
匹配模式
修饰符用于执行区分大小写和全局匹配:
修饰符 | 描述 |
---|---|
i | 执行对大小写不敏感的匹配。 |
g | 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。 |
m | 执行多行匹配。 |
以下为匹配模式实例:
var txt = "Hello World!";
// 匹配 i
console.log( /hello/i.test(txt) ); // true
// 匹配 g
console.log( /o/g.test(txt) ); // true
// 匹配 m
console.log( /d/g.test(txt) ); // true
字符串匹配方法
支持正则表达式的 String 对象的方法:
方法 | 描述 | FF | IE |
---|---|---|---|
search | 检索与正则表达式相匹配的值。 | 1 | 4 |
match | 找到一个或多个正则表达式的匹配。 | 1 | 4 |
replace | 替换与正则表达式匹配的子串。 | 1 | 4 |
split | 把字符串分割为字符串数组。 | 1 | 4 |
以下为字符串匹配正则实例:
var str="Mr. Blue has a blue house";
document.writeln(str.search(/blue/i)); // 4
document.write("<br>");
var str="The rain in SPAIN stays mainly in the plain";
document.writeln(str.match(/ain/g)); // ain,ain,ain
document.write("<br>");
var str="Mr Blue has a blue house and a blue car";
document.writeln(str.replace(/blue/gi, "red")); // Mr red has a red house and a red car
document.write("<br>");
var str="How are you 123 doing today?";
document.writeln(str.split(/\d+/)); // How are you , doing today?
匹配分组
语法 | 描述 |
---|---|
( ) | 捕获型分组,将括号中字符作为一个分组 |
| | 匹配左右任意一个表达式 |
\num | 引用分组num匹配到的字符串 |
RegExp.$num | 保存上一次分组匹配到的数据 |
(?:) | 非捕获型分组,不保存临时数据 |
(?=) | 前瞻非捕获型,非捕获型基础上指定前方内容 |
(?!) | 反前瞻非捕获型,前方数据不是指定的内容 |
以下为正则分组实例:
// 正则 () 与 | 连用,并获取临时匹配内容
var s = "abD,qeD";
let re = s.match(/(ab|qe)D/g);
console.log(re); // ['abD', 'qeD']
console.log(RegExp.$1); // qe
document.write(re);
document.write("<br>");
// 正则 () 与 \num 连用,并获取临时匹配内容
var str="abc<h2>Hello,World</h2>abc";
let result = str.match(/<(h[123456])>(.*)<\/\1>/g);
console.log(result); // <h2>Hello,World</h2>
console.log(RegExp.$1); // h2
document.writeln(result);
document.write("<br>");
// 非捕获
var c = "hello, my name is (?:haha)";
console.log(c.match(/haha/));
console.log("分组1的捕获的内容是"+RegExp.$1); // 没有取到haha
// 非捕获,与前瞻型的区别
var f = "hello, abc";
f.match(/(hello, (?:abc))/);
console.log(RegExp.$1); // hello, abc
f.match(/(hello, (?=abc))/); // hello,
console.log(RegExp.$1);
非捕获型,仍会被外层捕获,而前瞻型则连外层也无法捕获。
正则对象方法
方法 | 描述 |
---|---|
compile | 在 1.5 版本中已废弃。 编译正则表达式。 |
exec | 检索字符串中指定的值。返回找到的值,并确定其位置。 |
test | 检索字符串中指定的值。返回 true 或 false。 |
toString | 返回正则表达式的字符串。 |
exec() 方法用于检索字符串中的正则表达式的匹配。
如果字符串中有匹配的值返回该匹配值,否则返回 null。
exec方法,和字符串的match方法相似,但仅返回一个结果,同时保留下次开始位置,可以接着上次的位置继续匹配
var str="Hello world!";
//查找"Hello"
var patt=/o/g;
var result=patt.exec(str);
console.log(result); // ['o', index: 4, input: 'Hello world!', groups: undefined]
正则对象属性
属性 | 描述 |
---|---|
constructor | 返回一个函数,该函数是一个创建 RegExp 对象的原型。 |
global | 判断是否设置了 “g” 修饰符 |
ignoreCase | 判断是否设置了 “i” 修饰符 |
lastIndex | 用于规定下次匹配的起始位置 |
multiline | 判断是否设置了 “m” 修饰符 |
source | 返回正则表达式的匹配模式 |
正则对象属性实例:
var str="Hello world!";
//查找"Hello"
var patt=/o/g;
var result=patt.exec(str);
console.log( patt.global ); // true
console.log( patt.ignoreCase ); // false
console.log( patt.lastIndex ); // 5
console.log( patt.multiline ); // false
console.log( patt.source ); // o
Global对象
Global对象是指全局对象,JavaScript 全局属性和方法可在全局调用。
全局属性
属性 | 描述 |
---|---|
Infinity | 代表正的无穷大的数值。 |
NaN | 指示某个值是不是数字值。 |
undefined | 指示未定义的值。 |
Infinity 属性用于存放表示正无穷大的数值。
负无穷大是表示负无穷大一个数字值。
在Javascript中,超出 1.7976931348623157E+103088 的数值即为Infinity,小于 -1.7976931348623157E+103088 的数值为无穷小。
var x=1.7976931348623157E+10308;
document.write(x + "<br>"); // Infinity
var y=-1.7976931348623157E+10308;
document.write(y); // -Infinity
NaN 即非数值(Not a Number),NaN 属性用于引用特殊的非数字值,该属性指定的并不是不合法的数字。
NaN 属性 与 Number.Nan 属性相同。
提示: 请使用 isNaN() 来判断一个值是否是数字。原因是 NaN 与所有值都不相等,包括它自己。
undefined 属性用于存放 JavaScript 中未定义的值。
var t1="";
var t2;
if (t1===undefined)
{
alert("t1 is undefined"); // 不输出
}
if (t2===undefined)
{
alert("t2 is undefined"); // 输出
}
escape方法
escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。
该方法不会对 ASCII 字母和数字进行编码,也不会对下面这些 ASCII 标点符号进行编码: * @ – _ + . / 。其他所有的字符都会被转义序列替换。
提示: 使用 unescape() 方法对字符串进行解码。
escape(string)
注意: escape()函数不能用于编码 URIs(通用资源标识符(UniformResourceIdentifier,简称”URI”)). 可以使用函数 encodeURI() 取代。
<script>
document.write(escape("Need tips? Visit 52dixiaowo!"));
// Need%20tips%3F%20Visit%2052dixiaowo%21
</script>
unescape方法
unescape() 函数可对通过 escape() 编码的字符串进行解码。
提示: 使用函数escape() 对字符串进行编码。
unescape(string)
注意: unescape()不能使用于对 URI(通用资源标识符:UniformResourceIdentifier,简称”URI”)精选解码. 解码 URI 请使用 decodeURI() 方法。
<script>
let es = escape("Need tips? Visit 52dixiaowo!");
document.write(es);
document.write("<br>");
let unes = unescape(es);
document.write(unes); // Need tips? Visit 52dixiaowo!
</script>
encodeURI方法
encodeURI() 函数可把字符串作为 URI 进行编码。
对以下在 URI 中具有特殊含义的 ASCII 标点符号,encodeURI() 函数是不会进行转义的: , / ? : @ & = + $ # (可以使用 encodeURIComponent() 方法分别对特殊含义的 ASCII 标点符号进行编码。).
提示:使用 decodeURI() 方法可以解码URI(通用资源标识符:UniformResourceIdentifier,简称”URI”)。
encodeURI(uri)
使用 encodeURI() 对 URI 进行编码:
var uri="my test.php?name=ståle&car=saab";
document.write(encodeURI(uri)+ "<br>"); // my%20test.php?name=st%C3%A5le&car=saab
decodeURI方法
decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。
提示: 使用 encodeURI() 函数可以对 URI 进行编码。
decodeURI(uri)
使用 decodeURI() 对一个编码后的 URI 进行解码:
<script>
var uri="my test.asp?name=ståle&car=saab";
document.write(encodeURI(uri)+ "<br>"); // my%20test.php?name=st%C3%A5le&car=saab
document.write(decodeURI(uri)); // my test.asp?name=ståle&car=saab
</script>
encodeURIComponent方法
encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。
encodeURIComponent(uri)
使用 encodeURIComponent() 对 URI 进行编码:
<script>
var uri="http://w3cschool.cc/my test.php?name=ståle&car=saab";
document.write(encodeURIComponent(uri));
// http%3A%2F%2Fw3cschool.cc%2Fmy%20test.php%3Fname%3Dst%C3%A5le%26car%3Dsaab
</script>
decodeURIComponent方法
decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。
提示:使用 encodeURIComponent() 方法可以对 URI 进行编码。
decodeURIComponent(uri)
使用 decodeURIComponent() 对编码后的 URI 进行解码:
<script>
var uri="http://www.52dixiaowo.com/my test.php?name=ståle&car=saab";
var uri_encode=encodeURIComponent(uri);
document.write(uri_encode);
// http%3A%2F%2Fwww.52dixiaowo.com%2Fmy%20test.php%3Fname%3Dst%C3%A5le%26car%3Dsaab
document.write("<br>");
document.write(decodeURIComponent(uri_encode));
// http://www.52dixiaowo.com/my test.php?name=ståle&car=saab
</script>
eval方法
eval() 函数计算 JavaScript 字符串,并把它作为脚本代码来执行。
如果参数是一个表达式,eval() 函数将执行表达式。如果参数是Javascript语句,eval()将执行 Javascript 语句。
eval(string)
执行JavaScript代码或表达式:
eval("x=10;y=20;document.write(x*y)"); // 200
document.write("<br>" + eval("2+2")); // 4
document.write("<br>" + eval(x+17)); // 27
// 妙用eval,可以使用此函数实现“可变变量”
let name = "abc";
let key = "name";
let $$key = eval(key);
console.log($$key);
isFinite方法
isFinite() 函数用于检查其参数是否为一个有限数值(finite number)。
提示: 如果参数是 NaN,正无穷大或者负无穷大,会返回 false,其他返回 true。
isFinite(value)
使用 isFinite() 检测有限数:
document.write(isFinite(123)+ "<br>"); // true
document.write(isFinite(-1.23)+ "<br>"); // true
document.write(isFinite(5-2)+ "<br>"); // true
document.write(isFinite(0)+ "<br>"); // true
document.write(isFinite("Hello")+ "<br>"); // false
document.write(isFinite("2005/12/12")+ "<br>"); // false
isNaN方法
isNaN() 函数用于检查其参数是否是非数字值。
如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false。
isNaN(value)
检查数字是否非法:
document.write(isNaN(123)+ "<br>"); // false
document.write(isNaN(-1.23)+ "<br>"); // false
document.write(isNaN(5-2)+ "<br>"); // false
document.write(isNaN(0)+ "<br>"); // false
document.write(isNaN("Hello")+ "<br>"); // true
document.write(isNaN("2005/12/12")+ "<br>"); // true
Number方法
Number() 函数把对象的值转换为数字。
如果对象的值无法转换为数字,那么 Number() 函数返回 NaN。
Number(object)
注意:如果参数是 Date 对象,Number() 返回从 1970 年 1 月 1 日至今的毫秒数。
var test1= new Boolean(true);
var test2= new Boolean(false);
var test3= new Date();
var test4= new String("999");
var test5= new String("999 888");
document.write(Number(test1)+ "<br>"); // 1
document.write(Number(test2)+ "<br>"); // 0
document.write(Number(test3)+ "<br>"); // 1636970105928
document.write(Number(test4)+ "<br>"); // 999
document.write(Number(test5)+ "<br>"); // NaN
String方法
String() 函数把对象的值转换为字符串。
注意: String() 函数返回与字符串对象的toString()方法值一样。
var test1 = new Boolean(1);
var test2 = new Boolean(0);
var test3 = new Boolean(true);
var test4 = new Boolean(false);
var test5 = new Date();
var test6 = new String("999 888");
var test7 = 12345;
document.write(String(test1)+ "<br>"); // true
document.write(String(test2)+ "<br>"); // false
document.write(String(test3)+ "<br>"); // true
document.write(String(test4)+ "<br>"); // false
document.write(String(test5)+ "<br>"); // Mon Nov 15 2021 17:58:14 GMT+0800 (中国标准时间)
document.write(String(test6)+ "<br>"); // 999 888
document.write(String(test7)+ "<br>"); // 12345
parseInt方法
parseInt() 函数可解析一个字符串,并返回一个整数。
当参数 radix 的值为 0,或没有设置该参数时,parseInt() 会根据 string 来判断数字的基数。
当忽略参数 radix , JavaScript 默认数字的基数如下:
- 如果 string 以 “0x” 开头,parseInt() 会把 string 的其余部分解析为十六进制的整数。
- 如果 string 以 0 开头,那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。
- 如果 string 以 1 ~ 9 的数字开头,parseInt() 将把它解析为十进制的整数。
parseInt(string, radix)
参数 | 描述 |
---|---|
string | 必需。要被解析的字符串。 |
radix | 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。 |
注意: 只有字符串中的第一个数字会被返回。
注意: 开头和结尾的空格是允许的。
注意:如果字符串的第一个字符不能被转换为数字,那么 parseInt() 会返回 NaN。
注意:在字符串以”0″为开始时旧的浏览器默认使用八进制基数。ECMAScript 5,默认的是十进制的基数。
document.write(parseInt("10") + "<br>"); // 10
document.write(parseInt("10.33") + "<br>"); // 10
document.write(parseInt("34 45 66") + "<br>"); 34
document.write(parseInt(" 60 ") + "<br>"); // 60
document.write(parseInt("40 years") + "<br>"); // 40
document.write(parseInt("He was 40") + "<br>"); // NaN
parseFloat方法
parseFloat() 函数可解析一个字符串,并返回一个浮点数。
该函数指定字符串中的首个字符是否是数字。如果是,则对字符串进行解析,直到到达数字的末端为止,然后以数字返回该数字,而不是作为字符串。
parseFloat(string)
注意: 字符串中只返回第一个数字。
注意: 开头和结尾的空格是允许的。
注意: 如果字符串的第一个字符不能被转换为数字,那么 parseFloat() 会返回 NaN。
document.write(parseFloat("10") + "<br>"); // 10
document.write(parseFloat("10.33") + "<br>"); // 10.33
document.write(parseFloat("34 45 66") + "<br>"); // 34
document.write(parseFloat(" 60 ") + "<br>"); // 60
document.write(parseFloat("40 years") + "<br>"); // 40
document.write(parseFloat("He was 40") + "<br>"); // NaN
Error对象
Error 对象在错误发生时提供了错误的提示信息。
属性 | 描述 |
---|---|
name | 设置或返回一个错误名 |
message | 设置或返回一个错误信息(字符串) |
以下实例中 try 语句块包含了未定义的函数 “adddlert” ,执行它会产生错误,catch 语句块会输出该错误的信息:
<h2>JavaScript Error 对象</h2>
<p>以下实例中 try 语句块包含了未定义的函数 "adddlert" ,执行它会产生错误,catch 语句块会输出该错误的信息。</p>
<p id="demo" style="color:red"></p>
<script>
try {
adddlert("Welcome guest!");
}
catch(err) {
document.getElementById("demo").innerHTML =
err.name + "<br>" + err.message;
}
</script>
Map与Set对象
Map与Set是ES6引入的新的内置对象
Map对象
Map对象是键值对形式,其中它的key,value都是任意数据类型的
每个key对应一个value,组成一个entry,它仅有一个size属性描述Entries的数量。
属性 | 描述 |
---|---|
size | Entries的数量 |
Map对象的内置方法如下:
方法 | 描述 |
---|---|
set(key, value) | 存入entry |
get(key) | 读取key对应的value 如果未找到,则返回undefined |
delete(key) | 删除某个key,返回一个布尔值 |
has(key) | 检测是否存在指定的key |
clear() | 清空Map集合 |
keys() | 获取所有的key |
values() | 获取所有的value |
entries() | 返回所有entry的遍历器 |
forEach() | 遍历每个entry |
实例:利用Map存储键值对
<script>
let str = "ename=zhangsan; password=123"
let kvs = str.split(";")
let map = new Map();
for (const key in kvs) {
kvs[key] = kvs[key].trim();
let kv = kvs[key].split("=")
map.set(kv[0],kv[1]);
}
console.log(map.get("ename"))
console.log(map.get("password"))
</script>
Set对象
它和数组相似,Map不相似,但是成员的值都是唯一的,没有重复的值。
注意:它的结构不是key,value。也没有数组访问下标的结构。
属性 | 描述 |
---|---|
size | 值的数量 |
它不可以直接通过键名取值,它的key也是value
方法 | 描述 |
---|---|
add(value) | 存入一个值 |
delete(value) | 删除某个value,返回一个布尔值 |
has(value) | 检测是否存在指定的value |
clear() | 清空Set集合 |
keys() | 获取所有的key |
values() | 获取所有的value |
entries() | 返回所有entry的遍历器 |
forEach() | 遍历每个entry |
实例:往set中存入一些数据
<script>
let str = "ename=zhangsan; password=123"
let kvs = str.split(";")
let set = new Set();
for (const key in kvs) {
kvs[key] = kvs[key].trim();
let kv = kvs[key].split("=")
set.add(kv[1]);
}
console.log(set.keys())
console.log(set.values())
set.forEach(x=> console.log(x));
</script>
WeakMap对象
首先,WeakMap只接受对象作为键名(null除外),不接受其他类型的值作为键名。
其次,WeakSet 中的对象都是弱引用,即垃圾回收机制不考虑WeakSet对该对象的引用,也就是说,如果其他对象都不再引用该对象,那么垃圾回收机制会自动回收该对象所占用的内存。
- 没有Size属性
- WeakMap 结构的实例有以下操作方法:
- get(key)
- set(key, value)
- has(value)
- delete(value)
- 不可遍历
WeakSet对象
首先,WeakSet 的成员只能是对象,而不能是其他类型的值。
其次,WeakSet 中的对象都是弱引用,即垃圾回收机制不考虑WeakSet对该对象的引用,也就是说,如果其他对象都不再引用该对象,那么垃圾回收机制会自动回收该对象所占用的内存。(WeakMap同)
- 没有Size属性
- 操作方法:
- add(value):向 WeakSet 实例添加一个新成员。
- delete(value):清除 WeakSet 实例的指定成员。
- has(value):返回一个布尔值,表示某个值是否在。
- 不可遍历
BOM对象
浏览器对象模型 BOM (Browser Object Model) 使 JavaScript 有能力与浏览器”对话”。BOM 将浏览器的各个组成部分封装成对象。
浏览器对象模型(Browser Object Model (BOM))尚无正式标准。
由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性。
Window对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一:
window.document.getElementById("header");
//等效于
document.getElementById("header");
例如,使用window实现可变变量
var a = 10; // 必须是var,如果是let则取不到,此时应该使用eval
var b = "a";
let $$b = window[b]; // 10
console.log($$b);
窗口尺寸
有三种方法能够确定浏览器窗口的尺寸。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
- window.innerHeight – 浏览器窗口的内部高度(包括滚动条)
- window.innerWidth – 浏览器窗口的内部宽度(包括滚动条)
对于 Internet Explorer 8、7、6、5:
- document.documentElement.clientHeight
- document.documentElement.clientWidth
或者
- document.body.clientHeight
- document.body.clientWidth
实用的 JavaScript 方案(涵盖所有浏览器,包含 IE8 及以下版本的浏览器):
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
window属性
这里列出的属性去除了不被众多浏览器支持的属性
属性 | 描述 |
---|---|
closed | 返回窗口是否已被关闭。 |
document | 对 Document 对象的只读引用。(请参阅对象) |
frames | 返回窗口中所有命名的框架。该集合是 Window 对象的数组,每个 Window 对象在窗口中含有一个框架。 |
history | 对 History 对象的只读引用。请参数 History 对象。 |
innerHeight | 返回窗口的文档显示区的高度。 |
innerWidth | 返回窗口的文档显示区的宽度。 |
localStorage | 在浏览器中存储 key/value 对。没有过期时间。 |
length | 设置或返回窗口中的框架数量。 |
location | 用于窗口或框架的 Location 对象。请参阅 Location 对象。 |
name | 设置或返回窗口的名称。 |
navigator | 对 Navigator 对象的只读引用。请参数 Navigator 对象。 |
opener | 返回对创建此窗口的窗口的引用。 |
outerHeight | 返回窗口的外部高度,包含工具条与滚动条。 |
outerWidth | 返回窗口的外部宽度,包含工具条与滚动条。 |
pageXOffset | 设置或返回当前页面相对于窗口显示区左上角的 X 位置。 |
pageYOffset | 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。 |
parent | 返回父窗口。 |
screen | 对 Screen 对象的只读引用。请参数 Screen 对象。 |
screenLeft | 返回相对于屏幕窗口的x坐标 |
screenTop | 返回相对于屏幕窗口的y坐标 |
screenX | 返回相对于屏幕窗口的x坐标 |
sessionStorage | 在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。 |
screenY | 返回相对于屏幕窗口的y坐标 |
self | 返回对当前窗口的引用。等价于 Window 属性。 |
top | 返回最顶层的父窗口。 |
<script>
console.log(window.closed)
console.log(window.document)
console.log(window.frames)
console.log(window.history)
console.log(window.innerHeight)
console.log(window.innerWidth)
console.log(window.localStorage)
console.log(window.length)
console.log(window.location)
console.log(window.name) // 此值默认为空,一个窗口固有一个name,可用于窗口传值
console.log(window.navigator)
console.log(window.opener) // 获取父窗口对象的引用(指弹出本页面的父页面)
console.log(window.outerHeight)
console.log(window.outerWidth)
console.log(window.pageXOffset)
console.log(window.pageYOffset)
console.log(window.parent) // 常用于iframe嵌套的parent
console.log(window.screenLeft)
console.log(window.screenTop)
console.log(window.screenX)
console.log(window.sessionStorage)
console.log(window.screenY)
console.log(window.self)
console.log(window.top)
</script>
alert方法
window.alert是警告框,前面已经有了详细的介绍
<input type="button" onclick="myFunction()" value="显示警告框" />
<script>
function myFunction(){
alert("你好,\n我是一个警告框!");
}
</script>
btoa方法
btoa() 方法用于创建一个 base-64 编码的字符串。
该方法使用 “A-Z”, “a-z”, “0-9”, “+”, “/” 和 “=” 字符来编码字符串。
base-64 解码使用方法是 atob() 。
<script>
let str = "JavaScript";
document.write("原始字符串:"+str+"<br>");
document.write("编码字符串:"+btoa(str))
</script>
atob方法
此方法是对base-64字符串解码,此方法参数为base-64编码后字符串
提示:编码请使用btoa()方法
<script>
let str = "SmF2YVNjcmlwdA==";
document.write("原始字符串:"+str+"<br>");
document.write("解码字符串:"+atob(str))
</script>
close方法
用于关闭某个窗口
<input type="button" value="打开我的窗口" onclick="openWin()" />
<input type="button" value="关闭我的窗口" onclick="closeWin()" />
<script>
function openWin(){
myWindow=window.open("","","width=200,height=100");
myWindow.document.write("<p>这是'我的窗口'</p>");
}
function closeWin(){
myWindow.close();
}
</script>
confirm方法
这是选择框,弹出窗口,让用户选择确认或取消。返回值是true/false
<p>点击按钮,显示确认框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var r=confirm("按下按钮!");
if (r==true){
x="你按下了\"确定\"按钮!";
}
else{
x="你按下了\"取消\"按钮!";
}
document.getElementById("demo").innerHTML=x;
}
</script>
open方法
open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。
语法:
window.open(URL,name,specs,replace)
参数 | 说明 | ||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
URL | 可选。打开指定的页面的URL。如果没有指定URL,打开一个新的空白窗口 | ||||||||||||||||||||||||||||
name | 可选。指定target属性或窗口的名称。支持以下值:
|
||||||||||||||||||||||||||||
specs | 可选。一个逗号分隔的项目列表。支持以下值:
|
||||||||||||||||||||||||||||
replace | Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。支持下面的值:
|
打开一个空网页:
<input type="button" value="打开窗口" onclick="openWin()" />
<script>
function openWin(){
myWindow=window.open('','','width=200,height=100');
myWindow.document.write("<p>这是'我的窗口'</p>");
myWindow.focus();
}
</script>
setTimeout方法
该方法用于在指定的毫秒数后调用函数或计算表达式。
语法:
setTimeout(要执行的代码, 等待的毫秒数)
提示:第一个参数是字符串,所以如果往函数传数据推荐使用es6模板字符串
<script>
let str = "Hello,JavaScript"
setTimeout(`alert('${str}')`, 3000 )
</script>
clearInterval 方法
用于清除由setInterval设置的定时器
<p>显示当前时间:</p>
<p id="demo"></p>
<button onclick="myStopFunction()">停止时间</button>
<script>
var myVar = setInterval(function(){ myTimer() }, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
function myStopFunction() {
clearInterval(myVar);
}
</script>
clearTimout方法
阻止 setTimeout() 方法执行函数 :
<p>点击按钮,等待 3 秒后弹出 "Hello" 。</p>
<p>点击第二个按钮来阻止弹出函数 myFunction 的执行。 (你必须在 3 秒前点击)</p>
<button onclick="myFunction()">先点我</button>
<button onclick="myStopFunction()">阻止弹出</button>
<script>
var myVar;
function myFunction() {
myVar = setTimeout(function(){ alert("Hello") }, 3000);
}
function myStopFunction() {
clearTimeout(myVar);
}
</script>
createPopup方法
createPopup()方法用来创建一个弹出窗口。
提示:仅适用于IE
<button onclick="show_popup()">显示弹出!</button>
<p><b>注意:</b> createPopup()方法只适用在IE ! </p>
<script>
function show_popup(){
var p=window.createPopup();
var pbody=p.document.body;
pbody.style.backgroundColor="lime";
pbody.style.border="solid black 1px";
pbody.innerHTML="这是一个弹出!单击弹框外部关闭。";
p.show(150,150,200,50,document.body);
}
</script>
setInterval方法
设置一个定时器,每隔n毫秒后执行一次
<p>点击按钮,等待 3 秒会弹出 "Hello"。</p>
<p>在弹出的对话框中点击 “确定”, 3 秒后会继续弹出。如此循环下去...</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
setInterval('alert("Hello");', 3000);
}
</script>
print方法
print() 方法用于打印当前窗口的内容。
<input type="button" value="打印此页面" onclick="printpage()" />
<script>
function printpage(){
window.print();
}
</script>
prompt 方法
prompt()方法用于显示可提示用户进行输入的对话框,并获得输入的字符串
<p>点击按钮查看输入的对话框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var person=prompt("请输入你的名字","Harry Potter");
if (person!=null && person!=""){
x="你好 " + person + "! 今天感觉如何?";
document.getElementById("demo").innerHTML=x;
}
}
</script>
getSelection 方法
getSelection() 方法表示用户选择的文本范围或光标的当前位置。
<p>选择我这边内容</p>
<input type="button" value="选中上面内容后点我" onclick="foo()" />
<script>
function foo() {
let selObj = window.getSelection();
alert(selObj.toString());
}
</script>
getComputedStyle 方法
getComputedStyle() 方法用于获取指定元素的 CSS 样式。
获取的样式是元素在浏览器中最终渲染效果的样式。
语法:
window.getComputedStyle(element, pseudoElement)
参数说明:
- element: 必需,要获取样式的元素。
- pseudoElement: 可选,伪类元素,当不查询伪类元素的时候可以忽略或者传入 null。
<p>点击按钮计算 DIV 的背景颜色。</p>
<p><button onclick="myFunction()">点我</button></p>
<div id="test" style="height: 50px;background-color: rgb(178, 116, 230);">测试 DIV</div>
<p>计算值为: <span id="demo"></span></p>
<script>
function myFunction(){
var elem = document.getElementById("test");
var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("background-color");
document.getElementById("demo").innerHTML = theCSSprop;
}
</script>
scrollTo 方法
scrollTo() 方法可把内容滚动到指定的坐标。
语法:
scrollTo(xpos,ypos)
参数:
- xpos:x坐标,单位px
- ypos:y坐标,单位px
<body>
<input type="button" onclick="scrollWindow()" value="滚动条" />
<style>
body{
height: 1000px;
width: 1000px;
}
</style>
<script>
function scrollWindow(){
window.scrollTo(100,500);
}
</script>
</body>
window其他方法
方法 | 描述 |
---|---|
matchMedia() | 该方法用来检查 media query 语句,它返回一个 MediaQueryList对象。 |
moveBy() | 可相对窗口的当前坐标把它移动指定的像素。 |
moveTo() | 把窗口的左上角移动到一个指定的坐标。 |
resizeBy() | 按照指定的像素调整窗口的大小。 |
resizeTo() | 把窗口的大小调整到指定的宽度和高度。 |
scrollBy() | 按照指定的像素值来滚动内容。 |
stop() | 停止页面载入。 |
postMessage() | 安全地实现跨源通信。 |
Screen对象
window.screen 对象包含有关用户屏幕的信息。
window.screen对象在编写时可以不使用 window 这个前缀。
一些属性:
- screen.availWidth – 可用的屏幕宽度
- screen.availHeight – 可用的屏幕高度
<h3>你的屏幕:</h3>
<script>
document.write("总宽度/高度: ");
document.write(screen.width + "*" + screen.height);
document.write("<br>");
document.write("可用宽度/高度: ");
document.write(screen.availWidth + "*" + screen.availHeight);
document.write("<br>");
document.write("色彩深度: ");
document.write(screen.colorDepth);
document.write("<br>");
document.write("色彩分辨率: ");
document.write(screen.pixelDepth);
</script>
Location对象
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
window.location 对象在编写时可不使用 window 这个前缀。 一些例子:
一些实例:
- location.hostname 返回 web 主机的域名
- location.pathname 返回当前页面的路径和文件名
- location.port 返回 web 主机的端口 (80 或 443)
- location.protocol 返回所使用的 web 协议(http: 或 https:)
location对象属性
属性 | 描述 |
---|---|
hash | 返回一个URL的锚部分 |
host | 返回一个URL的主机名和端口 |
hostname | 返回URL的主机名 |
href | 返回完整的URL |
pathname | 返回的URL路径名。 |
port | 返回一个URL服务器使用的端口号 |
protocol | 返回一个URL协议 |
search | 返回一个URL的查询部分 |
location对象方法
方法 | 说明 |
---|---|
assign() | 载入一个新的文档 |
reload() | 重新载入当前文档 |
replace() | 用新的文档替换当前文档 |
Navigator对象
Navigator 对象包含有关浏览器的信息。
注意: 没有应用于 navigator 对象的公开标准,不过所有浏览器都支持该对象。
navigator对象属性
属性 | 说明 |
---|---|
appCodeName | 返回浏览器的代码名 |
appName | 返回浏览器的名称 |
appVersion | 返回浏览器的平台和版本信息 |
cookieEnabled | 返回指明浏览器中是否启用 cookie 的布尔值 |
platform | 返回运行浏览器的操作系统平台 |
userAgent | 返回由客户机发送服务器的user-agent 头部的值 |
navigator对象方法
方法 | 描述 |
---|---|
javaEnabled() | 指定是否在浏览器中启用Java |
taintEnabled() | 规定浏览器是否启用数据污点(data tainting) |
History 对象
History 对象包含用户(在浏览器窗口中)访问过的 URL。
History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。
注意: 没有应用于History对象的公开标准,不过所有浏览器都支持该对象。
History属性
History 对象属性
属性 | 说明 |
---|---|
length | 返回历史列表中的网址数 |
length属性记录当前窗口的历史记录数
<script>
document.write("历史列表中URL的数量: " + history.length);
</script>
提示:url每次改变均会添加到History中,包括hash以及search参数等
back方法
back() 方法可加载历史列表中的前一个 URL(如果存在)。
调用该方法的效果等价于点击后退按钮或调用 history.go(-1)。
<input type="button" value="返回" onclick="goBack()">
<p>注意,点击后退按钮在这里不会导致任何行动,因为以前的历史列表中没有该URL</p>
<script>
function goBack(){
window.history.back()
}
</script>
forward方法
forward() 方法可加载历史列表中的下一个 URL。
调用该方法的效果等价于点击前进按钮或调用 history.go(1)。
<input type="button" value="前进" onclick="goForward()">
<p>注意,点击这里的前进按钮不会导致任何行动,因为历史列表中没有下一个URL。</p>
<script>
function goForward(){
window.history.forward()
}
</script>
go方法
go() 方法可加载历史列表中的某个具体的页面。
该参数可以是数字,使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。(-1上一个页面,1前进一个页面)。或一个字符串,字符串必须是局部或完整的URL,该函数会去匹配字符串的第一个URL。
<input type="button" value="后退2页" onclick="goBack()">
<p>注意,点击“后退2页”按钮将不会导致任何行动,因为以前的历史列表中没有URL。</p>
<script>
function goBack(){
window.history.go(-2)
}
</script>
pushState方法
pushState方法用于向浏览器添加一个地址到地址栏
语法:
history.pushState(stae,title,url)
参数:
- state:一个与指定网址相关的状态对象,popstate事件触发时,该对象会传入回调函数。如果不需要这个对象,此处可以填null。
- title:新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填null。
- url:新的网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
<script>
let href = location.href
href += "?test=abc"
history.pushState(null, "", href);
</script>
存储对象
Web 存储 API 提供了 sessionStorage (会话存储) 和 localStorage(本地存储)两个存储对象来对网页的数据进行添加、删除、修改、查询操作。
- localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。
- sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
存储对象属性
属性 | 描述 |
---|---|
length | 返回存储对象中包含多少条数据。 |
存储对象方法
方法 | 描述 |
---|---|
key(n) | 返回存储对象中第 n 个键的名称 |
getItem(keyname) | 返回指定键的值 |
setItem(keyname, value) | 添加键和值,如果对应的值存在,则更新该键对应的值。 |
removeItem(keyname) | 移除键 |
clear() | 清除存储对象中所有的键 |
Web 存储 API
属性 | 描述 |
---|---|
window.localStorage | 在浏览器中存储 key/value 对。没有过期时间。 |
window.sessionStorage | 在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。 |
localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
本地存储比cookie的存储量要大,一般cookie只有4KB,而本地存储对于不同浏览器实现不同,一般为5MB左右。而且可以更灵活的存储,可以设置无期限或者sesion模式。
<script>
localStorage.setItem("username", "zhangsan")
sessionStorage.setItem("password","lisi");
</script>
DOM对象
通过 HTML DOM(文档对象模型),可访问 JavaScript HTML 文档的所有元素。
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的树:

通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
Document对象
属性 / 方法 | 描述 |
---|---|
document.activeElement | 返回当前获取焦点元素 |
document.addEventListener() | 向文档添加句柄 |
document.adoptNode(node) | 从另外一个文档返回 adapded 节点到当前文档。 |
document.anchors | 返回对文档中所有 Anchor 对象的引用。 |
document.applets | 返回对文档中所有 Applet 对象的引用。注意: HTML5 已不支持 <applet> 元素。 |
document.baseURI | 返回文档的绝对基础 URI |
document.body | 返回文档的body元素 |
document.close() | 关闭用 document.open() 方法打开的输出流,并显示选定的数据。 |
document.cookie | 设置或返回与当前文档有关的所有 cookie。 |
document.createAttribute() | 创建一个属性节点 |
document.createComment() | createComment() 方法可创建注释节点。 |
document.createDocumentFragment() | 创建空的 DocumentFragment 对象,并返回此对象。 |
document.createElement() | 创建元素节点。 |
document.createTextNode() | 创建文本节点。 |
document.doctype | 返回与文档相关的文档类型声明 (DTD)。 |
document.documentElement | 返回文档的根节点 |
document.documentMode | 返回用于通过浏览器渲染文档的模式 |
document.documentURI | 设置或返回文档的位置 |
document.domain | 返回当前文档的域名。 |
document.domConfig | 已废弃。返回 normalizeDocument() 被调用时所使用的配置。 |
document.embeds | 返回文档中所有嵌入的内容(embed)集合 |
document.forms | 返回对文档中所有 Form 对象引用。 |
document.getElementsByClassName() | 返回文档中所有指定类名的元素集合,作为 NodeList 对象。 |
document.getElementById() | 返回对拥有指定 id 的第一个对象的引用。 |
document.getElementsByName() | 返回带有指定名称的对象集合。 |
document.getElementsByTagName() | 返回带有指定标签名的对象集合。 |
document.images | 返回对文档中所有 Image 对象引用。 |
document.implementation | 返回处理该文档的 DOMImplementation 对象。 |
document.importNode() | 把一个节点从另一个文档复制到该文档以便应用。 |
document.inputEncoding | 返回用于文档的编码方式(在解析时)。 |
document.lastModified | 返回文档被最后修改的日期和时间。 |
document.links | 返回对文档中所有 Area 和 Link 对象引用。 |
document.normalize() | 删除空文本节点,并连接相邻节点 |
document.normalizeDocument() | 删除空文本节点,并连接相邻节点的 |
document.open() | 打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。 |
document.querySelector() | 返回文档中匹配指定的CSS选择器的第一元素 |
document.querySelectorAll() | document.querySelectorAll() 是 HTML5中引入的新方法,返回文档中匹配的CSS选择器的所有元素节点列表 |
document.readyState | 返回文档状态 (载入中……) |
document.referrer | 返回载入当前文档的文档的 URL。 |
document.removeEventListener() | 移除文档中的事件句柄(由 addEventListener() 方法添加) |
document.renameNode() | 重命名元素或者属性节点。 |
document.scripts | 返回页面中所有脚本的集合。 |
document.strictErrorChecking | 设置或返回是否强制进行错误检查。 |
document.title | 返回当前文档的标题。 |
document.URL | 返回文档完整的URL |
document.write() | 向文档写 HTML 表达式 或 JavaScript 代码。 |
document.writeln() | 等同于 write() 方法,不同的是在每个表达式之后写一个换行符。 |
在 W3C DOM核心,文档对象 继承节点对象的所有属性和方法。
很多属性和方法在文档中是没有意义的。
HTML 文档对象可以避免使用这些节点对象和属性:
属性 / 方法 | 避免的原因 |
---|---|
document.attributes | 文档没有该属性 |
document.hasAttributes() | 文档没有该属性 |
document.nextSibling | 文档没有下一节点 |
document.nodeName | 这个通常是 #document |
document.nodeType | 这个通常是 9(DOCUMENT_NODE) |
document.nodeValue | 文档没有一个节点值 |
document.ownerDocument | 文档没有主文档 |
document.ownerElement | 文档没有自己的节点 |
document.parentNode | 文档没有父节点 |
document.previousSibling | 文档没有兄弟节点 |
document.textContent | 文档没有文本节点 |
元素对象
在 HTML DOM 中, 元素对象代表着一个 HTML 元素。
元素对象 的 子节点可以是, 可以是元素节点,文本节点,注释节点。
NodeList 对象 代表了节点列表,类似于 HTML元素的子节点集合。
元素可以有属性。属性属于属性节点。
以上属性和方法可适用于所有 HTML 元素:
属性 / 方法 | 描述 |
---|---|
element.accessKey | 设置或返回accesskey一个元素 |
element.addEventListener() | 向指定元素添加事件句柄 |
element.appendChild() | 为元素添加一个新的子元素 |
element.attributes | 返回一个元素的属性数组 |
element.childNodes | 返回元素的一个子节点的数组 |
element.children | 返回元素的子元素的集合 |
element.classList | 返回元素的类名,作为 DOMTokenList 对象。 |
element.className | 设置或返回元素的class属性 |
element.clientTop | 表示一个元素的顶部边框的宽度,以像素表示。 |
element.clientLeft | 表示一个元素的左边框的宽度,以像素表示。 |
element.clientHeight | 在页面上返回内容的可视高度(高度包含内边距(padding),不包含边框(border),外边距(margin)和滚动条) |
element.clientWidth | 在页面上返回内容的可视宽度(宽度包含内边距(padding),不包含边框(border),外边距(margin)和滚动条) |
element.cloneNode() | 克隆某个元素 |
element.compareDocumentPosition() | 比较两个元素的文档位置。 |
element.contentEditable | 设置或返回元素的内容是否可编辑 |
element.dir | 设置或返回一个元素中的文本方向 |
element.firstChild | 返回元素的第一个子节点 |
element.focus() | 设置文档或元素获取焦点 |
element.getAttribute() | 返回指定元素的属性值 |
element.getAttributeNode() | 返回指定属性节点 |
element.getElementsByTagName() | 返回指定标签名的所有子元素集合。 |
element. getElementsByClassName() | 返回文档中所有指定类名的元素集合,作为 NodeList 对象。 |
element.getFeature() | 返回指定特征的执行APIs对象。 |
element.getUserData() | 返回一个元素中关联键值的对象。 |
element.hasAttribute() | 如果元素中存在指定的属性返回 true,否则返回false。 |
element.hasAttributes() | 如果元素有任何属性返回true,否则返回false。 |
element.hasChildNodes() | 返回一个元素是否具有任何子元素 |
element.hasFocus() | 返回布尔值,检测文档或元素是否获取焦点 |
element.id | 设置或者返回元素的 id。 |
element.innerHTML | 设置或者返回元素的内容。 |
element.insertBefore() | 现有的子元素之前插入一个新的子元素 |
element.isContentEditable | 如果元素内容可编辑返回 true,否则返回false |
element.isDefaultNamespace() | 如果指定了namespaceURI 返回 true,否则返回 false。 |
element.isEqualNode() | 检查两个元素是否相等 |
element.isSameNode() | 检查两个元素所有有相同节点。 |
element.isSupported() | 如果在元素中支持指定特征返回 true。 |
element.lang | 设置或者返回一个元素的语言。 |
element.lastChild | 返回的最后一个子节点 |
element.namespaceURI | 返回命名空间的 URI。 |
element.nextSibling | 返回该元素紧跟的一个节点 |
element.nextElementSibling | 返回指定元素之后的下一个兄弟元素(相同节点树层中的下一个元素节点)。 |
element.nodeName | 返回元素的标记名(大写) |
element.nodeType | 返回元素的节点类型 |
element.nodeValue | 返回元素的节点值 |
element.normalize() | 使得此成为一个”normal”的形式,其中只有结构(如元素,注释,处理指令,CDATA节和实体引用)隔开Text节点,即元素(包括属性)下面的所有文本节点,既没有相邻的文本节点也没有空的文本节点 |
element.offsetHeight | 返回任何一个元素的高度包括边框(border)和内边距(padding),但不包含外边距(margin) |
element.offsetWidth | 返回元素的宽度,包括边框(border)和内边距(padding),但不包含外边距(margin) |
element.offsetLeft | 返回当前元素的相对水平偏移位置的偏移容器 |
element.offsetParent | 返回元素的偏移容器 |
element.offsetTop | 返回当前元素的相对垂直偏移位置的偏移容器 |
element.ownerDocument | 返回元素的根元素(文档对象) |
element.parentNode | 返回元素的父节点 |
element.previousSibling | 返回某个元素紧接之前元素 |
element.previousElementSibling | 返回指定元素的前一个兄弟元素(相同节点树层中的前一个元素节点)。 |
element.querySelector() | 返回匹配指定 CSS 选择器元素的第一个子元素 |
document.querySelectorAll() | 返回匹配指定 CSS 选择器元素的所有子元素节点列表 |
element.removeAttribute() | 从元素中删除指定的属性 |
element.removeAttributeNode() | 删除指定属性节点并返回移除后的节点。 |
element.removeChild() | 删除一个子元素 |
element.removeEventListener() | 移除由 addEventListener() 方法添加的事件句柄 |
element.replaceChild() | 替换一个子元素 |
element.scrollHeight | 返回整个元素的高度(包括带滚动条的隐蔽的地方) |
element.scrollLeft | 返回当前视图中的实际元素的左边缘和左边缘之间的距离 |
element.scrollTop | 返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离 |
element.scrollWidth | 返回元素的整个宽度(包括带滚动条的隐蔽的地方) |
element.setAttribute() | 设置或者改变指定属性并指定值。 |
element.setAttributeNode() | 设置或者改变指定属性节点。 |
element.setIdAttribute() | |
element.setIdAttributeNode() | |
element.setUserData() | 在元素中为指定键值关联对象。 |
element.style | 设置或返回元素的样式属性 |
element.tabIndex | 设置或返回元素的标签顺序。 |
element.tagName | 作为一个字符串返回某个元素的标记名(大写) |
element.textContent | 设置或返回一个节点和它的文本内容 |
element.title | 设置或返回元素的title属性 |
element.toString() | 一个元素转换成字符串 |
nodelist.item() | 返回某个元素基于文档树的索引 |
nodelist.length | 返回节点列表的节点数目。 |
属性对象
在 HTML DOM 中, Attr 对象 代表一个 HTML 属性。
HTML属性总是属于HTML元素。
属性 / 方法 | 描述 |
---|---|
attr.isId | 如果属性是 ID 类型,则 isId 属性返回 true,否则返回 false。 |
attr.name | 返回属性名称 |
attr.value | 设置或者返回属性值 |
attr.specified | 如果属性被指定返回 true ,否则返回 false |
nodemap.getNamedItem() | 从节点列表中返回的指定属性节点。 |
nodemap.item() | 返回节点列表中处于指定索引号的节点。 |
nodemap.length | 返回节点列表的节点数目。 |
nodemap.removeNamedItem() | 删除指定属性节点 |
nodemap.setNamedItem() | 设置指定属性节点(通过名称) |
事件对象
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。
事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户点击按钮)。
提示: 在 W3C 2 级 DOM 事件中规范了事件模型。
常量
静态变量 | 描述 | DOM |
---|---|---|
CAPTURING-PHASE | 当前事件阶段为捕获阶段(1) | 1 |
AT-TARGET | 当前事件是目标阶段,在评估目标事件(1) | 2 |
BUBBLING-PHASE | 当前的事件为冒泡阶段 (3) | 3 |
属性
属性 | 描述 | DOM |
---|---|---|
bubbles | 返回布尔值,指示事件是否是起泡事件类型。 | 2 |
cancelable | 返回布尔值,指示事件是否可拥可取消的默认动作。 | 2 |
currentTarget | 返回其事件监听器触发该事件的元素。 | 2 |
eventPhase | 返回事件传播的当前阶段。 | 2 |
target | 返回触发此事件的元素(事件的目标节点)。 | 2 |
timeStamp | 返回事件生成的日期和时间。 | 2 |
type | 返回当前 Event 对象表示的事件的名称。 | 2 |
方法
方法 | 描述 | DOM |
---|---|---|
initEvent() | 初始化新创建的 Event 对象的属性。 | 2 |
preventDefault() | 通知浏览器不要执行与事件关联的默认动作。 | 2 |
stopPropagation() | 不再派发事件。 | 2 |
鼠标事件
属性 | 描述 | DOM |
---|---|---|
onclick | 当用户点击某个对象时调用的事件句柄。 | 2 |
oncontextmenu | 在用户点击鼠标右键打开上下文菜单时触发 | |
ondblclick | 当用户双击某个对象时调用的事件句柄。 | 2 |
onmousedown | 鼠标按钮被按下。 | 2 |
onmouseenter | 当鼠标指针移动到元素上时触发。 | 2 |
onmouseleave | 当鼠标指针移出元素时触发 | 2 |
onmousemove | 鼠标被移动。 | 2 |
onmouseover | 鼠标移到某元素之上。 | 2 |
onmouseout | 鼠标从某元素移开。 | 2 |
onmouseup | 鼠标按键被松开。 | 2 |
键盘事件
属性 | 描述 | DOM |
---|---|---|
onkeydown | 某个键盘按键被按下。 | 2 |
onkeypress | 某个键盘按键被按下并松开。 | 2 |
onkeyup | 某个键盘按键被松开。 | 2 |
框架/对象事件
属性 | 描述 | DOM |
---|---|---|
onabort | 图像的加载被中断。 ( <object>) | 2 |
onbeforeunload | 该事件在即将离开页面(刷新或关闭)时触发 | 2 |
onerror | 在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>) | |
onhashchange | 该事件在当前 URL 的锚部分发生修改时触发。 | |
onload | 一张页面或一幅图像完成加载。 | 2 |
onpageshow | 该事件在用户访问页面时触发 | |
onpagehide | 该事件在用户离开当前网页跳转到另外一个页面时触发 | |
onresize | 窗口或框架被重新调整大小。 | 2 |
onscroll | 当文档被滚动时发生的事件。 | 2 |
onunload | 用户退出页面。 ( <body> 和 <frameset>) | 2 |
表单事件
属性 | 描述 | DOM |
---|---|---|
onblur | 元素失去焦点时触发 | 2 |
onchange | 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) | 2 |
onfocus | 元素获取焦点时触发 | 2 |
onfocusin | 元素即将获取焦点时触发 | 2 |
onfocusout | 元素即将失去焦点时触发 | 2 |
oninput | 元素获取用户输入时触发 | 3 |
onreset | 表单重置时触发 | 2 |
onsearch | 用户向搜索域输入文本时触发 ( <input=”search”>) | |
onselect | 用户选取文本时触发 ( <input> 和 <textarea>) | 2 |
onsubmit | 表单提交时触发 | 2 |
剪贴板事件
属性 | 描述 | DOM |
---|---|---|
oncopy | 该事件在用户拷贝元素内容时触发 | |
oncut | 该事件在用户剪切元素内容时触发 | |
onpaste | 该事件在用户粘贴元素内容时触发 |
打印事件
属性 | 描述 | DOM |
---|---|---|
onafterprint | 该事件在页面已经开始打印,或者打印窗口已经关闭时触发 | |
onbeforeprint | 该事件在页面即将开始打印时触发 |
拖动事件
事件 | 描述 | DOM |
---|---|---|
ondrag | 该事件在元素正在拖动时触发 | |
ondragend | 该事件在用户完成元素的拖动时触发 | |
ondragenter | 该事件在拖动的元素进入放置目标时触发 | |
ondragleave | 该事件在拖动元素离开放置目标时触发 | |
ondragover | 该事件在拖动元素在放置目标上时触发 | |
ondragstart | 该事件在用户开始拖动元素时触发 | |
ondrop | 该事件在拖动元素放置在目标区域时触发 |
多媒体事件
事件 | 描述 | DOM |
---|---|---|
onabort | 事件在视频/音频(audio/video)终止加载时触发。 | |
oncanplay | 事件在用户可以开始播放视频/音频(audio/video)时触发。 | |
oncanplaythrough | 事件在视频/音频(audio/video)可以正常播放且无需停顿和缓冲时触发。 | |
ondurationchange | 事件在视频/音频(audio/video)的时长发生变化时触发。 | |
onemptied | 当期播放列表为空时触发 | |
onended | 事件在视频/音频(audio/video)播放结束时触发。 | |
onerror | 事件在视频/音频(audio/video)数据加载期间发生错误时触发。 | |
onloadeddata | 事件在浏览器加载视频/音频(audio/video)当前帧时触发触发。 | |
onloadedmetadata | 事件在指定视频/音频(audio/video)的元数据加载后触发。 | |
onloadstart | 事件在浏览器开始寻找指定视频/音频(audio/video)触发。 | |
onpause | 事件在视频/音频(audio/video)暂停时触发。 | |
onplay | 事件在视频/音频(audio/video)开始播放时触发。 | |
onplaying | 事件在视频/音频(audio/video)暂停或者在缓冲后准备重新开始播放时触发。 | |
onprogress | 事件在浏览器下载指定的视频/音频(audio/video)时触发。 | |
onratechange | 事件在视频/音频(audio/video)的播放速度发送改变时触发。 | |
onseeked | 事件在用户重新定位视频/音频(audio/video)的播放位置后触发。 | |
onseeking | 事件在用户开始重新定位视频/音频(audio/video)时触发。 | |
onstalled | 事件在浏览器获取媒体数据,但媒体数据不可用时触发。 | |
onsuspend | 事件在浏览器读取媒体数据中止时触发。 | |
ontimeupdate | 事件在当前的播放位置发送改变时触发。 | |
onvolumechange | 事件在音量发生改变时触发。 | |
onwaiting | 事件在视频由于要播放下一帧而需要缓冲时触发。 |
动画事件
事件 | 描述 | DOM |
---|---|---|
animationend | 该事件在 CSS 动画结束播放时触发 | |
animationiteration | 该事件在 CSS 动画重复播放时触发 | |
animationstart | 该事件在 CSS 动画开始播放时触发 |
过渡事件
事件 | 描述 | DOM |
---|---|---|
transitionend | 该事件在 CSS 完成过渡后触发。 |
其他事件
事件 | 描述 | DOM |
---|---|---|
onmessage | 该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发 | |
onmousewheel | 已废弃。 使用 onwheel 事件替代 | |
ononline | 该事件在浏览器开始在线工作时触发。 | |
onoffline | 该事件在浏览器开始离线工作时触发。 | |
onpopstate | 该事件在窗口的浏览历史(history 对象)发生改变时触发。 | |
onshow | 该事件当 <menu> 元素在上下文菜单显示时触发 | |
onstorage | 该事件在 Web Storage(HTML 5 Web 存储)更新时触发 | |
ontoggle | 该事件在用户打开或关闭 <details> 元素时触发 | |
onwheel | 该事件在鼠标滚轮在元素上下滚动时触发 |
目标事件对象
方法 | 描述 | DOM |
---|---|---|
addEventListener() | 允许在目标事件中注册监听事件(IE8 = attachEvent()) | 2 |
dispatchEvent() | 允许发送事件到监听器上 (IE8 = fireEvent()) | 2 |
removeEventListener() | 运行一次注册在事件目标上的监听事件(IE8 = detachEvent()) | 2 |
事件监听对象
方法 | 描述 | DOM |
---|---|---|
handleEvent() | 把任意对象注册为事件处理程序 | 2 |
文档事件对象
方法 | 描述 | DOM |
---|---|---|
createEvent() | 2 |
鼠标/键盘事件对象
属性 | 描述 | DOM |
---|---|---|
altKey | 返回当事件被触发时,”ALT” 是否被按下。 | 2 |
button | 返回当事件被触发时,哪个鼠标按钮被点击。 | 2 |
clientX | 返回当事件被触发时,鼠标指针的水平坐标。 | 2 |
clientY | 返回当事件被触发时,鼠标指针的垂直坐标。 | 2 |
ctrlKey | 返回当事件被触发时,”CTRL” 键是否被按下。 | 2 |
Location | 返回按键在设备上的位置 | 3 |
charCode | 返回onkeypress事件触发键值的字母代码。 | 2 |
key | 在按下按键时返回按键的标识符。 | 3 |
keyCode | 返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。 | 2 |
which | 返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。 | 2 |
metaKey | 返回当事件被触发时,”meta” 键是否被按下。 | 2 |
relatedTarget | 返回与事件的目标节点相关的节点。 | 2 |
screenX | 返回当某个事件被触发时,鼠标指针的水平坐标。 | 2 |
screenY | 返回当某个事件被触发时,鼠标指针的垂直坐标。 | 2 |
shiftKey | 返回当事件被触发时,”SHIFT” 键是否被按下。 | 2 |
方法
方法 | 描述 | W3C |
---|---|---|
initMouseEvent() | 初始化鼠标事件对象的值 | 2 |
initKeyboardEvent() | 初始化键盘事件对象的值 | 3 |
Console对象
Console 对象提供了访问浏览器调试模式的信息到控制台。
方法 | 描述 |
---|---|
assert() | 如果断言为 false,则在信息到控制台输出错误信息。 |
clear() | 清除控制台上的信息。 |
count() | 记录 count() 调用次数,一般用于计数。 |
error() | 输出错误信息到控制台 |
group() | 在控制台创建一个信息分组。 一个完整的信息分组以 console.group() 开始,console.groupEnd() 结束 |
groupCollapsed() | 在控制台创建一个信息分组。 类似 console.group() ,但它默认是折叠的。 |
groupEnd() | 设置当前信息分组结束 |
info() | 控制台输出一条信息 |
log() | 控制台输出一条信息 |
table() | 以表格形式显示数据 |
time() | 计时器,开始计时间,与 timeEnd() 联合使用,用于算出一个操作所花费的准确时间。 |
timeEnd() | 计时结束 |
trace() | 显示当前执行的代码在堆栈中的调用路径。 |
warn() | 输出警告信息,信息最前面加一个黄色三角,表示警告 |
CSSStyleDeclaration对象
CSSStyleDeclaration 对象表示一个 CSS 属性-值(property-value)对的集合。
CSSStyleDeclaration 对象属性
属性 | 描述 |
---|---|
cssText | 设置或返回样式声明文本,cssText 对应的是 HTML 元素的 style 属性。 |
length | 返回样式中包含多少条声明。 |
parentRule | 返回包含当前规则的规则。 |
CSSStyleDeclaration 对象方法
方法 | 描述 |
---|---|
getPropertyPriority() | 返回指定的 CSS 属性是否设置了 “important!” 属性。 |
getPropertyValue() | 返回指定的 CSS 属性值。 |
item() | 通过索引方式返回 CSS 声明中的 CSS 属性名。 |
removeProperty() | 移除 CSS 声明中的 CSS 属性。 |
setProperty() | 在 CSS 声明块中新建或者修改 CSS 属性。 |
HTMLCollection对象
HTMLCollection 是 HTML 元素的集合。
HTMLCollection 对象类似一个包含 HTML 元素的数组列表。
getElementsByTagName() 方法返回的就是一个 HTMLCollection 对象。
属性和方法
下表列出了 HTMLCollection 对象中的属性和方法:
属性 / 方法 | 描述 |
---|---|
item() | 返回 HTMLCollection 中指定索引的元素。 |
length | 返回 HTMLCollection 中元素的数量。 |
namedItem() | 返回 HTMLCollection 中指定 ID 或 name 属性的元素。 |
返回所有 p 元素的集合,该集合是一个 HTMLCollection 对象:
var x = document.getElementsByTagName("p");
计算文档中 p 元素的数量:
var x = document.getElementsByTagName("P");
document.write(x.length);
循环输出 HTMLCollection 对象中的所有元素:
var x = document.getElementsByTagName("P");
document.write(x.length);
HTML对象
HTML对象是指html元素对应的dom元素对象
Anchor 对象
Anchor 对象表示 HTML 超链接。
在 HTML 文档中 <a> 标签每出现一次,就会创建 Anchor 对象。
锚可用于创建指向另一个文档的链接(通过 href 属性),或者创建文档内的书签(通过 name 属性)。
您可以通过搜索 Document 对象中的 anchors[] 数组来访问锚,或者使用 document.getElementById()。
W3C: W3C 标准。
属性 | 描述 | W3C |
---|---|---|
charset | 设置或返回被链接资源的字符集。 | Yes |
href | 设置或返回被链接资源的 URL。 | Yes |
hreflang | 设置或返回被链接资源的语言代码。 | Yes |
name | 设置或返回一个链接的名称。 | Yes |
rel | 设置或返回当前文档与目标 URL 之间的关系。 | Yes |
rev | 设置或返回目标 URL 与之间当前文档的关系。 | Yes |
target | 设置或返回在何处打开链接。 | Yes |
type | 设置或返回被链接资源的 MIME 类型。 | Yes |
Area 对象
Area 对象代表图像映射的一个区域(图像映射指的是带有可点击区域的图像)
在 HTML 文档中 <area> 标签每出现一次,就会创建一个 Area 对象。
W3C: W3C 标准:
属性 | 描述 | W3C |
---|---|---|
alt | 设置或返回当浏览器无法显示某个区域时的替换文字。 | Yes |
coords | 设置或返回图像映射中可点击区域的坐标。 | Yes |
hash | 设置或返回某个区域中 URL 的锚部分。 | Yes |
host | 设置或返回某个区域中 URL 的主机名和端口。 | Yes |
hostname | 设置或返回href属性值得主机部分。 | Yes |
href | 设置或返回某个区域中href属性值 | Yes |
noHref | 设置或者返回某个区域的 nohref 属性值。 | Yes |
pathname | 设置或者返回某个区域 href 属性值的路径名部分。 | Yes |
port | 设置或者返回某个区域 href 属性值的端口部分。 | Yes |
protocol | 设置或者返回某个区域 href 属性值的协议部分。 | Yes |
search | 设置或者返回某个区域 href 属性值的查询字符串部分。 | Yes |
shape | 设置或者返回某个区域 shape属性值。 | Yes |
target | 设置或者返回某个区域 target 属性值。 | Yes |
Audio 对象
Audio 对象HTML5中新增的。。
Audio 对象代表着 HTML <audio> 元素。
Audio 对象属性
属性 | 描述 |
---|---|
audioTracks | 返回表示可用音频轨道的 AudioTrackList 对象 |
autoplay | 设置或返回是否在加载完成后随即播放音频 |
buffered | 返回表示音频已缓冲部分的 TimeRanges 对象 |
controller | 返回表示音频当前媒体控制器的 MediaController 对象 |
controls | 设置或返回音频是否显示控件(比如播放/暂停等) |
crossOrigin | 设置或返回音频的 CORS 设置 |
currentSrc | 回当前音频的 URL |
currentTime | 设置或返回音频中的当前播放位置(以秒计) |
defaultMuted | 设置或返回音频默认是否静音 |
defaultPlaybackRate | 设置或返回音频的默认播放速度 |
duration | 返回当前音频的长度(以秒计) |
ended | 返回音频的播放是否已结束 |
error | 返回表示音频错误状态的 MediaError 对象 |
loop | 设置或返回音频是否应在结束时重新播放 |
mediaGroup | 设置或返回音频所属的组合(用于连接多个音频元素) |
muted | 设置或返回音频是否静音 |
networkState | 返回音频的当前网络状态 |
paused | 设置或返回音频是否暂停 |
playbackRate | 设置或返回音频播放的速度 |
played | 返回表示音频已播放部分的 TimeRanges 对象 |
preload | 设置或返回音频是否应该在页面加载后进行加载 |
readyState | 返回音频当前的就绪状态 |
seekable | 返回表示音频可寻址部分的 TimeRanges 对象 |
seeking | 返回用户是否正在音频中进行查找 |
src | 设置或返回音频元素的当前来源 |
textTracks | 返回表示可用文本轨道的 TextTrackList 对象 |
volume | 设置或返回音频的音量 |
Audio 对象方法
方法 | 描述 |
---|---|
addTextTrack() | 在音频中添加一个新的文本轨道 |
canPlayType() | 检查浏览器是否可以播放指定的音频类型 |
fastSeek() | 在音频播放器中指定播放时间。 |
getStartDate() | 返回一个新的Date对象,表示当前时间轴偏移量 |
load() | 重新加载音频元素 |
play() | 开始播放音频 |
pause() | 暂停当前播放的音频 |
Base 对象
Base 对象代表 HTML 的 base 元素。
base 元素适用页面中于指定的默认地址或者所有链接的目标地址。
在 HTML 文档中 <base> 每出现一次,Base 对象就会被创建。
W3C: W3C 标准。
属性 | 描述 | W3C |
---|---|---|
href | 设置或返回针对页面中所有链接的基准 URL。 | Yes |
target | 设置或返回针对页面中所有链接的默认目标框架。 | Yes |
Blockquote 对象
Blockquote 对象代表着一个 HTML 引用(blockquote)块元素。
<blockquote> 标签定义摘自另一个源的块引用。
一个 <blockquote> 元素的内容通常展现为一个左、右两边进行缩进的段落。
在 HTML 文档中的每一个 <blockquote> 标签创建时,都会创建一个 Blockquote 对象。
属性 | 描述 |
---|---|
cite | 设置或返回一个引用的cite属性值 |
Body 对象
Body 对象代表了 HTML body 元素。
Body 对象代表文档的主体 (HTML body) 。
body 元素包含了所有的 HTML 文档,如文本,超级链接,图片,表格,列表,等等。
W3C: W3C 标准。
属性 | 描述 | W3C |
---|---|---|
aLink | 设置或者返回主体元素的 alink 属性。 | Yes |
background | 设置或者返回body元素的 background 属性。 | Yes |
bgColor | 设置或者返回body元素的 bgColor 属性。 | Yes |
link | 设置或者返回主体元素的 link 属性。 | Yes |
text | 设置或者返回主体元素的 text 属性。 | Yes |
vLink | 设置或者返回主体元素的 vLink 属性。 | Yes |
事件 | 描述 | W3C |
---|---|---|
onload | 脚本在页面完全载入后会被立即执行。 | Yes |
Button 对象
Button 对象代表一个按钮。
在 HTML 文档中 <button> 标签每出现一次,Button 对象就会被创建。
在 HTML button 元素中你可以添加内容,如文本或者图片,这是与input 按钮(button) 类型的不同之处。
属性 | 描述 | W3C |
---|---|---|
disabled | 设置或返回是否禁用按钮。 | Yes |
form | 返回对包含按钮的表单的引用。 | Yes |
name | 设置或返回按钮的名称。 | Yes |
type | 返回按钮的表单类型。 | Yes |
value | 设置或返回显示在按钮上的文本。 | Yes |
Canvas 对象
Canvas 对象是 HTML5 中新增的。
HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript)。
属性 | 描述 |
---|---|
fillStyle | 设置或返回用于填充绘画的颜色、渐变或模式。 |
strokeStyle | 设置或返回用于笔触的颜色、渐变或模式。 |
shadowColor | 设置或返回用于阴影的颜色。 |
shadowBlur | 设置或返回用于阴影的模糊级别。 |
shadowOffsetX | 设置或返回阴影与形状的水平距离。 |
shadowOffsetY | 设置或返回阴影与形状的垂直距离。 |
方法 | 描述 |
---|---|
createLinearGradient() | 创建线性渐变(用在画布内容上)。 |
createPattern() | 在指定的方向上重复指定的元素。 |
createRadialGradient() | 创建放射状/环形的渐变(用在画布内容上)。 |
addColorStop() | 规定渐变对象中的颜色和停止位置。 |
线条样式
属性 | 描述 |
---|---|
lineCap | 设置或返回线条的结束端点样式。 |
lineJoin | 设置或返回两条线相交时,所创建的拐角类型。 |
lineWidth | 设置或返回当前的线条宽度。 |
miterLimit | 设置或返回最大斜接长度。 |
矩形
方法 | 描述 |
---|---|
rect() | 创建矩形。 |
fillRect() | 绘制”被填充”的矩形。 |
strokeRect() | 绘制矩形(无填充)。 |
clearRect() | 在给定的矩形内清除指定的像素。 |
路径
方法 | 描述 |
---|---|
fill() | 填充当前绘图(路径)。 |
stroke() | 绘制已定义的路径。 |
beginPath() | 起始一条路径,或重置当前路径。 |
moveTo() | 把路径移动到画布中的指定点,不创建线条。 |
closePath() | 创建从当前点回到起始点的路径。 |
lineTo() | 添加一个新点,然后在画布中创建从该点到最后指定点的线条。 |
clip() | 从原始画布剪切任意形状和尺寸的区域。 |
quadraticCurveTo() | 创建二次贝塞尔曲线。 |
bezierCurveTo() | 创建三次贝塞尔曲线。 |
arc() | 创建弧/曲线(用于创建圆形或部分圆)。 |
arcTo() | 创建两切线之间的弧/曲线。 |
isPointInPath() | 如果指定的点位于当前路径中,则返回 true,否则返回 false。 |
转换
方法 | 描述 |
---|---|
scale() | 缩放当前绘图至更大或更小。 |
rotate() | 旋转当前绘图。 |
translate() | 重新映射画布上的 (0,0) 位置。 |
transform() | 替换绘图的当前转换矩阵。 |
setTransform() | 将当前转换重置为单位矩阵。然后运行 transform()。 |
文本
属性 | 描述 |
---|---|
font | 设置或返回文本内容的当前字体属性。 |
textAlign | 设置或返回文本内容的当前对齐方式。 |
textBaseline | 设置或返回在绘制文本时使用的当前文本基线。 |
方法 | 描述 |
---|---|
fillText() | 在画布上绘制”被填充的”文本。 |
strokeText() | 在画布上绘制文本(无填充)。 |
measureText() | 返回包含指定文本宽度的对象。 |
绘制图像
方法 | 描述 |
---|---|
drawImage() | 向画布上绘制图像、画布或视频。 |
像素操作
width | 返回 ImageData 对象的宽度。 |
height | 返回 ImageData 对象的高度。 |
data | 返回一个对象,其包含指定的 ImageData 对象的图像数据。 |
方法 | 描述 |
---|---|
createImageData() | 创建新的、空白的 ImageData 对象。 |
getImageData() | 返回 ImageData 对象,该对象为画布上指定的矩形复制像素数据。 |
putImageData() | 把图像数据(从指定的 ImageData 对象)放回画布上。 |
合成
属性 | 描述 |
---|---|
globalAlpha | 设置或返回绘图的当前 alpha 或透明值。 |
globalCompositeOperation | 设置或返回新图像如何绘制到已有的图像上。 |
其他
方法 | 描述 |
---|---|
save() | 保存当前环境的状态。 |
restore() | 返回之前保存过的路径状态和属性。 |
createEvent() | |
getContext() | |
toDataURL() |
Column 对象
Column 对象是HTML table(表格)中的列。
在每个HTML文档的 <col> 标签中,都可以创建Column对象。
<col> 元素描述了在 <colgroup> 元素中的每个列属性。
如需对全部列应用样式,<col> 标签很有用,这样就不需要对各个单元和各行重复应用样式了。
属性 | 描述 |
---|---|
span | 设置或者返回列中span属性的值。 |
Columngroup 对象
Columngroup 对象代表着HTML表格(table)的一组列。
在HTML文档中每个 <colgroup> 标签,都会创建一个 Columngroup 对象。
如需对全部列应用样式,<colgroup> 标签很有用,这样就不需要对各个单元和各行重复应用样式了。<colgroup> 标签只能在 table 元素中使用。
属性 | 描述 |
---|---|
span | 设置或者返回列组中span属性的值。 |
Datalist 对象
The Datalist 对象是HTML5新增的。
Datalist 对象代表 HTML <datalist> 元素。
集合 | 描述 |
---|---|
options | 返回 datalist 中所有选项的集合 |
del 对象
del 对象代表了HTML文档中已被删除的文本。
<del> 元素定义文档中已被删除的文本。
<del> 元素经常与 <ins> 元素一起使用,来展示不同风格的旧内容与新内容。 浏览器上会在两个标签上的内容加上横线及下划线来区别内容。
在 HTML 文档中每个 <del> 标签都能创建 del 对象。
属性 | 描述 |
---|---|
cite | 设置或者返回删除文本的cite属性值 |
dateTime | 设置或者返回删除文本的dateTime属性值 |
Details 对象
Details 对象表示一个 HTML <details> 元素。
属性 | 描述 |
---|---|
open | 设置或者返回 details 标签内的描述信息是否显示。 |
Dialog 对象
Dialog 对象是HTML5新增的。
Dialog 对象表示 HTML <dialog> 元素。
属性 | 描述 |
---|---|
open | 设置或者返回对话窗口是否打开 |
returnValue | 设置或者返回 dialog 的返回值 |
方法 | 描述 |
---|---|
close() | 关闭对话窗口 |
show() | 显示的对话框 |
showModal() | 显示对话框,并使其成为最顶层的对话框 |
Embed 对象
Embed 对象是 HTML5 中新增的。
Embed 对象代表一个 HTML <embed> 元素。
Property | 描述 |
---|---|
height | 设置或者返回嵌入文件的高度(height属性值) |
src | 设置或者返回 embed 元素的 src 属性值(嵌入文件地址) |
type | 设置或者返回 embed 元素的 type 属性值(嵌入文件类型) |
width | 设置或者返回嵌入文件的宽度(width属性值) |
Fieldset 对象
Fieldset 对象表示一个 HTML <fieldset> 元素。
属性 | 描述 |
---|---|
disabled | 设置或返回是否禁用 fieldset。 |
form | 返回一个包含 fieldset 的表单的引用。 |
name | 设置或返回 fieldset 的 name 属性的值。 |
type | 返回 fieldset 是哪一个类型的表单元素。 |
Form 对象
Form 对象代表一个 HTML 表单。
在 HTML 文档中 <form> 每出现一次,Form 对象就会被创建。
表单用户通常用于收集用户数据,包含了 input 元素如:文本字段,复选框,单选框,提交按钮等待。表单也可以说选项菜单, textarea, fieldset, legend, 和 label 元素。
表单用于向服务端发送数据。
集合 | 描述 | W3C |
---|---|---|
elements[] | 包含表单中所有元素的数组。 | Yes |
属性 | 描述 | W3C |
---|---|---|
acceptCharset | 服务器可接受的字符集。 | Yes |
action | 设置或返回表单的 action 属性。 | Yes |
enctype | 设置或返回表单用来编码内容的 MIME 类型。 | Yes |
length | 返回表单中的元素数目。 | Yes |
method | 设置或返回将数据发送到服务器的 HTTP 方法。 | Yes |
name | 设置或返回表单的名称。 | Yes |
target | 设置或返回表单提交结果的 Frame 或 Window 名。 | Yes |
方法 | 描述 | W3C |
---|---|---|
reset() | 重置一个表单 | Yes |
submit() | 提交一个表单 | Yes |
Frame,IFrame对象
Frame 对象代表一个 HTML 框架。
<frame>标签定义了在框架中一个特定的窗口(框架)。
在 HTML 文档中 <frame> 每出现一次,就会创建一个 Frame对象。
IFrame 对象代表一个 HTML 的内联框架。
<iframe> 标签定义了包含另外一个文档的内联框架。
在 HTML 文档中 <iframe> 每出现一次,一个 IFrame 对象就会被创建。
属性 | 描述 | W3C |
---|---|---|
align | 根据周围的文字排列 iframe。 | Yes |
contentDocument | 容纳框架的内容的文档。返回 frame/iframe 生成的文档对象。 | Yes |
contentWindow | 返回 frame/iframe 生成的 window 对象。 | No |
frameBorder | 设置或返回是否显示框架周围的边框。 | Yes |
height | 设置或返回 iframe 的高度。 | Yes |
longDesc | 设置或返回指向包含框架内容描述文档的 URL。 | Yes |
marginHeight | 设置或返回 iframe 的顶部和底部的页空白。 | Yes |
marginWidth | 设置或返回 frame/iframe 的左侧和右侧的页空白。 | Yes |
name | 设置或返回 frame/iframe 的名称。 | Yes |
noResize | 设置或返回框架是否可调整大小。 | Yes |
scrolling | 设置或返回框架是否可拥有滚动条。 | Yes |
src | 设置或返回应被加载到框架中的文档的 URL。 | Yes |
width | 设置或返回 iframe 的宽度。 | Yes |
件 | 描述 | W3C |
---|---|---|
onload | 在页面载入完成后立即执行脚本。 | Yes |
Frameset 对象
Frameset 对象代表 HTML 框架集。
HTML frameset 元素拥有两个或者更多的 frame 元素。每个frame 元素拥有一个单独的文件。/p>
HTML frameset 元素规定框架集只有几行或列会。
属性 | 描述 | W3C |
---|---|---|
cols | 设置或返回框架集中列的数目。 | Yes |
rows | 设置或返回框架集中行的数目。 | Yes |
事件 | 描述 | W3C |
---|---|---|
onload | 在页面载入完成后立即执行脚本。 | Yes |
Image 对象
Image 对象代表嵌入的图像。
<img> 标签每出现一次,一个 Image 对象就会被创建。
属性 | 描述 | W3C |
---|---|---|
align | 设置或返回与内联内容的对齐方式。 | Yes |
alt | 设置或返回无法显示图像时的替代文本。 | Yes |
border | 设置或返回图像周围的边框。 | Yes |
complete | 返回浏览器是否已完成对图像的加载。 | No |
height | 设置或返回图像的高度。 | Yes |
hspace | 设置或返回图像左侧和右侧的空白。 | Yes |
longDesc | 设置或返回指向包含图像描述的文档的 URL。 | Yes |
lowsrc | 设置或返回指向图像的低分辨率版本的 URL。 | No |
name | 设置或返回图像的名称。 | Yes |
src | 设置或返回图像的 URL。 | Yes |
useMap | 设置或返回客户端图像映射的 usemap 属性的值。 | Yes |
vspace | 设置或返回图像的顶部和底部的空白。 | Yes |
width | 设置或返回图像的宽度。 | Yes |
事件 | 描述 | W3C |
---|---|---|
onabort | 当用户放弃图像的装载时调用的事件句柄。 | Yes |
onerror | 在装载图像的过程中发生错误时调用的事件句柄。 | Yes |
onload | 当图像装载完毕时调用的事件句柄。 | Yes |
ins 对象
ins 对象代表了一个已经被插入HTML文档中的文本。
<ins> 元素定义已经被插入文档中的文本。
提示:<del> 和 <ins> 一起使用,描述文档中的更新和修正。浏览器通常会在已删除文本上添加一条删除线,在新插入文本下添加一条下划线。
在HTML文档中每个 <ins> 标签都能创建 ins 对象。
属性 | 描述 |
---|---|
cite | 设置或者返回插入文本的cite属性值。 |
dateTime | 设置或者返回删除文本的插入属性值 |
inputButton对象
Button 对象代表 HTML 文档中的一个按钮。
该元素没有默认的行为,但是必须有一个 onclick 事件句柄以便使用。
在 HTML 文档中 <input type=”button”> 标签每出现一次,一个 Button 对象 就会被创建。
您可以通过遍历表单的 elements[] 数组来访问某个按钮,或者通过使用 document.getElementById()。
属性 | 描述 | W3C |
---|---|---|
disabled | 设置或返回是否禁用按钮。 | Yes |
form | 返回对包含该按钮的表单对象的引用。 | Yes |
name | 设置或返回按钮的名称。 | Yes |
type | 返回按钮的表单元素类型。 | Yes |
value | 设置或返回在按钮上显示的文本。 | Yes |
Checkbox 对象
Checkbox 对象代表一个 HTML 表单中的 一个选择框。
在 HTML 文档中 <input type=”checkbox”> 每出现一次,Checkbox 对象就会被创建。
您可以通过遍历表单的 elements[] 数组来访问某个选择框,或者通过使用 document.getElementById() 。
属性 | 描述 | W3C |
---|---|---|
disabled | 设置或返回 checkbox 是否应被禁用。 | Yes |
checked | 设置或返回 checkbox 是否应被选中。 | Yes |
defaultChecked | 返回 checked 属性的默认值。 | Yes |
form | 返回对包含 checkbox 的表单的引用。 | Yes |
name | 设置或返回 checkbox 的名称。 | Yes |
type | 返回 checkbox 的表单元素类型。 | Yes |
value | 设置或返回 checkbox 的 value 属性的值 | Yes |
Input Color 对象
Input Color 对象是 HTML5 新增的。
Input Color 对象代表了使用 type=”color”属性的 HTML <input> 元素 。
注意: Internet Explorer 或 Safari浏览器不支持 <input> 元素使用 type=”color” 属性。
属性 | 描述 |
---|---|
autocomplete | 设置或者返回拾色器的 autocomplete 属性值。 |
autofocus | 设置或者返回在页面加载时拾色器是否获取焦点。 |
defaultValue | 设置或返回拾色器默认的值。 |
disabled | 设置或返回拾色器是否可用。 |
form | 返回包含拾色器的 form 表单引用。 |
list | 返回包含拾色器的 datalist 引用。 |
name | 设置或者返回拾色器 name 属性值。 |
type | 返回拾色器的表单元素类型。 |
value | 设置或者返回拾色器的 value 属性值。 |
Input Date 对象
Input Date 对象是 HTML5 新增的。
Input Date 对象表示使用了 type=”date” 属性的 HTML <input> 元素 。
注意:IE11 及其更早的版本不支持用 type=”date” 属性的 <input> 元素。
Property | 描述 |
---|---|
autocomplete | 设置或返回日期字段的 autocomplete 属性值 |
autofocus | 设置或返回日期字段在页面加载后是否自动获取焦点 |
defaultValue | 设置或返回日期字段默认的值 |
disabled | 设置或返回日期字段是否可用 |
form | 返回使用日期字段的表单引用 |
list | 返回包含了日期字段的 datalist 引用 |
max | 设置或返回日期字段的 max 属性值 |
min | 设置或返回日期字段的 min 属性值 |
name | 设置或返回日期字段的 name 属性值 |
readOnly | 设置或返回日期字段是否只读 |
required | 设置或返回日期字段在表单中是否为必填字段 |
step | 设置或返回日期字段的 step 属性值 |
type | 返回日期字段的表单类型 |
value | 设置或返回日期字段的 value 属性值 |
Input Datetime 对象
Input Datetime 对象是 HTML5 新增的。
Input Datetime 对象表示使用 type=”datetime” 属性的HTML <input> 元素。
注意: Internet Explorer, Firefox, Opera 15 (及更高版本) 或 Chrome 支持 <input> 元素使用 type=”datetime”。
Property | 描述 |
---|---|
autocomplete | 设置或返回 datetime 字段的 autocomplete 属性值 |
autofocus | 设置或返回 datetime 字段在页面加载后是否自动获取焦点 |
defaultValue | 设置或返回 datetime 字段默认的值 |
disabled | 设置或返回 datetime 字段是否被禁用 |
form | 返回使用 datetime 字段的表单引用 |
list | 返回包含了 datetime 字段的 datalist 引用 |
max | 设置或返回 datetime 字段的 max 属性值 |
min | 设置或返回 datetime 字段的 min 属性值 |
name | 设置或返回 datetime 字段的 name 属性值 |
readOnly | 设置或返回 datetime 字段是否只读 |
required | 设置或返回 datetime 字段在表单中是否为必填字段 |
step | 设置或返回 datetime 字段的 step 属性值 |
type | 返回 datetime 字段的表单元素类型 |
value | 设置或返回 datetime 字段的 value 属性值 |
Input DatetimeLocal 对象
Input DatetimeLocal 对象是 HTML5 新增的。
Input DatetimeLocal 对象表示使用 type=”datetime-local” 的 HTML <input> 元素。
注意:Internet Explorer 或 Firefox 浏览器不支持 <input> 元素。
属性 | 描述 |
---|---|
autocomplete | 设置或返回本地时间字段的 autocomplete 属性值 |
autofocus | 设置或返回本地时间字段在页面加载后是否自动获取焦点 |
defaultValue | 设置或返回本地时间字段默认的值 |
disabled | 设置或返回本地时间字段是否可用 |
form | 返回使用本地时间字段的表单引用 |
list | 返回包含了本地时间字段的 datalist 引用 |
max | 设置或返回本地时间字段的 max 属性值 |
min | 设置或返回本地时间字段的 min 属性值 |
name | 设置或返回本地时间字段的 name 属性值 |
readOnly | 设置或返回本地时间字段是否只读 |
required | 设置或返回本地时间字段在表单中是否为必填字段 |
step | 设置或返回本地时间字段的 step 属性值 |
type | 返回本地时间字段的表单元素类型 |
value | 设置或返回本地时间字段的 value 属性值 |
Input Email 对象
Input Email 对象是 HTML5 新增的。
Input DatetimeLocal 对象表示使用 type=”email” 的 HTML <input> 元素。
注意: Internet Explorer 9 (及更早IE版本), 或 Safari 浏览器不支持使用 type=”email” 的 HTML <input> 元素。
属性 | 描述 |
---|---|
autocomplete | 设置或返回 email 字段的 autocomplete 属性值 |
autofocus | 设置或返回 email 字段在页面加载后是否自动获取焦点 |
defaultValue | 设置或返回 email 字段默认的值 |
disabled | 设置或返回 email 字段是否可用 |
form | 返回使用 email 字段的表单引用 |
list | 返回包含了 email 字段的 datalist 引用 |
maxLength | 设置或返回 email 字段的 maxlength 属性值 |
multiple | 设置或返回 email 字段是否可以输入多个邮箱地址 |
name | 设置或返回 email 字段的 name 属性值 |
pattern | 设置或者返回 email 字段的 pattern 属性值 |
placeholder | 设置或者返回 email 字段的 placeholder 属性值 |
readOnly | 设置或返回 email 字段是否只读 |
required | 设置或返回 email 字段在表单中是否为必填字段 |
step | 设置或返回 email 字段的 step 属性值 |
type | 返回 email 字段的表单元素类型 |
value | 设置或返回 email 字段的 value 属性值 |
FileUpload 对象
在 HTML 文档中 <input type=”file”> 标签每出现一次,一个 FileUpload 对象就会被创建。
该元素包含一个文本输入字段,用来输入文件名,还有一个按钮,用来打开文件选择对话框以便图形化选择文件。
该元素的 value 属性保存了用户指定的文件的名称,但是当包含一个 file-upload 元素的表单被提交的时候,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名。
为安全起见,file-upload 元素不允许 HTML 作者或 JavaScript 程序员指定一个默认的文件名。HTML value 属性被忽略,并且对于此类元素来说,value 属性是只读的,这意味着只有用户可以输入一个文件名。当用户选择或编辑一个文件名,file-upload 元素触发 onchange 事件句柄。
您可以通过遍历表单的 elements[] 数组,或者通过使用 document.getElementById()来访问 FileUpload 对象。
属性 | 描述 | W3C |
---|---|---|
disabled | 设置或返回是否禁用 FileUpload 对象。 | Yes |
accept | 设置或返回指示文件传输的 MIME 类型的列表(逗号分隔)。 | Yes |
form | 返回对包含 FileUpload 对象的表单的引用。 | Yes |
name | 设置或返回 FileUpload 对象的名称。 | Yes |
type | 返回表单元素的类型。对于 FileUpload ,则是 “file” 。 | Yes |
value | 返回由用户输入设置的文本后,FileUpload 对象的文件名。 | Yes |
Hidden 对象
Hidden 对象代表一个 HTML 表单中的某个隐藏输入域。
这种类型的输入元素实际上是隐藏的。这个不可见的表单元素的 value 属性保存了一个要提交给 Web 服务器的任意字符串。如果想要提交并非用户直接输入的数据的话,就是用这种类型的元素。
在 HTML 表单中 <input type=”hidden”> 标签每出现一次,一个 Hidden 对象就会被创建。
您可通过遍历表单的 elements[] 数组来访问某个隐藏输入域,或者通过使用document.getElementById()。
属性 | 描述 | W3C |
---|---|---|
form | 返回一个对包含隐藏域的表单的引用。 | Yes |
name | 设置或返回隐藏域的名称。 | Yes |
type | 返回隐藏输入域的表单类型。 | Yes |
value | 设置或返回隐藏域的 value 属性的值。 | Yes |
Input Image 对象
Input Image 对象表示使用 type=”image”元素的 HTML <input> 元素。
Property | 描述 |
---|---|
alt | 设置或返回 input image 的 alt 属性值 |
autofocus | 设置或返回 input image 是否在页面加载后自动获取焦点 |
defaultValue | 设置或返回 input image 默认值 |
disabled | 设置或返回 input image 是否被禁用 |
form | 返回包含 input image 的表单引用 |
formAction | 设置或返回 input image 的 formaction 属性值 |
formEnctype | 设置或返回 input image 的 formenctype 属性值 |
formMethod | 设置或返回 input image 的 formmethod 属性值 |
formNoValidate | 设置或返回 form-data 在提交时是否应该验证 |
formTarget | 设置或返回 input image 的 formtarget 属性值 |
height | 设置或返回 input image 的 height 属性值 |
name | 设置或返回 input image 的 name 属性值 |
src | 设置或返回 input image 的 src 属性值 |
type | 返回 input image 的表单元素类型 |
value | 设置或返回 input image 的 value 属性值 |
width | 设置或返回 input image 的 width 属性值 |
Input Month 对象
Input Month 对象是 HTML5 新增的。
Input Month 对象表示使用type=”month” 的 HTML <input> 元素。
注意:Internet Explorer 或 Firefox 浏览器不支持使用 type=”month” 属性的 <input> 元素。
属性 | 描述 |
---|---|
autocomplete | 设置或返回 month 字段的 autocomplete 属性值 |
autofocus | 设置或返回 month 字段在页面加载后是否自动获取焦点 |
defaultValue | 设置或返回 month 字段默认的值 |
disabled | 设置或返回 month 字段是否可用 |
form | 返回使用 month 字段的表单引用 |
list | 返回包含了 month 字段的 datalist 引用 |
max | 设置或返回 month 字段的 max 属性值 |
min | 设置或返回 month 字段的 min 属性值 |
name | 设置或返回 month 字段的 name 属性值 |
readOnly | 设置或返回 month 字段是否只读 |
required | 设置或返回 month 字段在表单中是否为必填字段 |
step | 设置或返回 month 字段的 step 属性值 |
type | 返回 month 字段的表单元素类型 |
value | 设置或返回 month 字段的 value 属性值 |
Input Number 对象
Input Number 对象是 HTML5 新增的。
Input Number 对象表示使用type=”number” 的 HTML <input> 元素。
注意: Internet Explorer 9及更早IE版本不支持使用 type=”number” 属性的 <input> 元素。
属性 | 描述 |
---|---|
autocomplete | 设置或返回 number 字段的 autocomplete 属性值 |
autofocus | 设置或返回 number 字段在页面加载后是否自动获取焦点 |
defaultValue | 设置或返回 number 字段默认的值 |
disabled | 设置或返回 number 字段是否可用 |
form | 返回使用 number 字段的表单引用 |
labels | 返回 number 字段的标签元素列表 |
list | 返回包含了 number 字段的 datalist 引用 |
max | 设置或返回 number 字段的 max 属性值 |
min | 设置或返回 number 字段的 min 属性值 |
name | 设置或返回 number 字段的 name 属性值 |
placeholder | 设置或返回 number 字段的 placeholder 属性值 |
readOnly | 设置或返回 number 字段是否只读 |
required | 设置或返回 number 字段在表单中是否为必填字段 |
step | 设置或返回 number 字段的 step 属性值 |
type | 返回 number 字段的表单元素类型 |
value | 设置或返回 number 字段的 value 属性值 |
Input Range 对象
Input Range 对象是 HTML5 新增的。
Input Range 对象表示使用 type=”range” 属性的 HTML <input> 元素。
注意: Internet Explorer 9及更早IE版本不支持使用 type=”range” 属性的 HTML <input> 元素。
属性 | 描述 |
---|---|
autocomplete | 设置或返回滑块控件的 autocomplete 属性值 |
autofocus | 设置或返回滑块控件在页面加载后是否自动获取焦点 |
defaultValue | 设置或返回滑块控件默认的值 |
disabled | 设置或返回滑块控件是否可用 |
form | 返回使用滑块控件的表单引用 |
list | 返回包含了滑块控件的 datalist 引用 |
max | 设置或返回滑块控件的 max 属性值 |
min | 设置或返回滑块控件的 min 属性值 |
name | 设置或返回滑块控件的 name 属性值 |
step | 设置或返回滑块控件的 step 属性值 |
type | 返回滑块控件的表单类型 |
value | 设置或返回滑块控件的 value 属性值 |
Password 对象
Password 对象代表 HTML 表单中的密码字段。
HTML 的 <input type=”password”> 标签在表单上每出现一次,一个 Password 对象就会被创建。
该文本输入字段供用户输入某些敏感的数据,比如密码等。当用户输入的时候,他的输入是被掩盖的(例如使用星号*),以防止旁边的人从他背后看到输入的内容。不过需要注意的是,当表单提交时,输入是用明文发送的。
与类型为 “text” 的元素类似,当用户改变显示值时,它会触发 onchange 事件句柄。
您可以通过遍历表单的 elements[] array 来访问密码字段,或者通过使用 document.getElementById() 。
属性 | 描述 | W3C |
---|---|---|
defaultValue | 设置或返回密码字段的默认值。 | Yes |
disabled | 设置或返回是否应被禁用密码字段。 | Yes |
form | 返回对包含此密码字段的表单的引用。 | Yes |
maxLength | 设置或返回密码字段中字符的最大数目。 | Yes |
name | 设置或返回密码字段的名称。 | Yes |
readOnly | 设置或返回密码字段是否应当是只读的。 | Yes |
size | 设置或返回密码字段的长度。 | Yes |
type | 返回密码字段的表单元素类型。 | Yes |
value | 设置或返回密码字段的 value 属性的值。 | Yes |
方法 | 描述 | W3C |
---|---|---|
select() | 选取密码字段中的文本。 | Yes |
Radio 对象
Radio 对象代表 HTML 表单中的单选按钮。
在 HTML 表单中 <input type=”radio”> 每出现一次,一个 Radio 对象就会被创建。
单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中,之前选中的按钮就变为非选中的。
当单选按钮被选中或不选中时,该按钮就会触发 onclick 事件句柄。
您可通过遍历表单的 elements[] 数组来访问 Radio 对象,或者通过使用 document.getElementById()。
属性 | 描述 | W3C |
---|---|---|
checked | 设置或返回单选按钮的状态。 | Yes |
defaultChecked | 返回单选按钮的默认状态。 | Yes |
disabled | 设置或返回是否禁用单选按钮。 | Yes |
form | 返回一个对包含此单选按钮的表单的引用。 | Yes |
name | 设置或返回单选按钮的名称。 | Yes |
type | 返回单选按钮的表单类型。 | Yes |
value | 设置或返回单选按钮的 value 属性的值。 | Yes |
属性 | 描述 | W3C |
---|---|---|
disabled | 设置或返回重置按钮是否应被禁用。 | Yes |
form | 返回一个对包含此重置按钮的表单对象的引用。 | Yes |
name | 设置或返回重置按钮的名称。 | Yes |
type | 返回重置按钮的表单元素类型。 | Yes |
value | 设置或返回重置按钮上显示的文本。 | Yes |
Input Search 对象
Input Search 对象是 HTML5 新增的。
Input Search 对象表示使用 type=”search” 的 HTML <input> 元素。
Property | 描述 |
---|---|
autocomplete | 设置或返回 search 字段的 autocomplete 属性值 |
autofocus | 设置或返回 search 字段在页面加载后是否自动获取焦点 |
defaultValue | 设置或返回 search 字段默认的值 |
disabled | 设置或返回 search 字段是否可用 |
form | 返回使用 search 字段的表单引用 |
list | 返回包含了 search 字段的 datalist 引用 |
maxLength | 设置或返回 search 字段的 maxLength 属性值 |
name | 设置或返回 search 字段的 name 属性值 |
pattern | 设置或返回 search 字段的 pattern 属性值 |
placeholder | 设置或返回 search 字段的 placeholder 属性值 |
readOnly | 设置或返回 search 字段是否只读 |
required | 设置或返回 search 字段在表单中是否为必填字段 |
size | 设置或返回 search 字段的 size 属性值 |
step | 设置或返回 search 字段的 step 属性值 |
type | 返回 search 字段的表单元素类型 |
value | 设置或返回 search 字段的 value 属性值 |
Submit 对象
Submit 对象代表 HTML 表单中的一个提交按钮 (submit button)。
在 HTML 表单中 <input type=”submit”> 标签每出现一次,一个 Submit 对象就会被创建。
在表单提交之前,触发 onclick 事件句柄,并且一个句柄可以通过返回 fasle 来取消表单提交。
您可以通过遍历表单的 elements[] 数组来访问某个提交按钮,或者通过使用document.getElementById()。
属性 | 描述 | W3C |
---|---|---|
disabled | 设置或返回提交按钮是否应被禁用。 | Yes |
form | 返回一个对包含此提交按钮的表单的引用。 | Yes |
name | 设置或返回提交按钮的名称。 | Yes |
type | 返回提交按钮的表单元素类型。 | Yes |
value | 设置或返回在提交按钮上显示的文本。 | Yes |
Input Text 对象
Input Text 对象代表 HTML 中 type=”text” 的 <input> 元素。
属性 | 描述 |
---|---|
autocomplete | 设置或返回文本域的 autocomplete 属性值 |
autofocus | 在页面加载后设置或返回文本域是否自动获取焦点 |
defaultValue | 设置或返回文本域的默认值 |
disabled | 设置或返回文本域是否禁用 |
form | 返回一个对包含文本域的表单对象的引用 |
list | 返回一个对包含文本域的选项列表对象的引用 |
maxLength | 设置或返回文本域中的最大字符数 |
name | 设置或返回文本域的名称 |
pattern | 设置或返回文本域的 pattern 属性值 |
placeholder | 设置或返回文本域的 placeholder 属性值 |
readOnly | 设置或返回文本域是否应是只读的 |
required | 设置或返回 whether the text field must be filled out before submitting a form |
size | 设置或返回文本域的 size 属性值 |
type | 返回文本域的表单元素类型 |
value | 设置或返回文本域的 value 属性值 |
方法 | 描述 |
---|---|
blur() | 从文本域中移除焦点 |
focus() | 让文本域获取焦点 |
select() | 选取文本域的内容 |
Input Time 对象
Input Time 对象是 HTML5 新增的。
Input Time 对象表示使用 type=”time” 属性的 HTML <input> 元素。
注意: Internet Explorer 或 Firefox浏览器不支持使用type=”time” 属性的 HTML <input> 元素。
属性 | 描述 |
---|---|
autocomplete | 设置或返回 time 字段的 autocomplete 属性值 |
autofocus | 设置或返回 time 字段在页面加载后是否自动获取焦点 |
defaultValue | 设置或返回 time 字段默认的值 |
disabled | 设置或返回 time 字段是否可用 |
form | 返回使用 time 字段的表单引用 |
list | 返回包含了 time 字段的 datalist 引用 |
max | 设置或返回 time 字段的 max 属性值 |
min | 设置或返回 time 字段的 min 属性值 |
name | 设置或返回 time 字段的 name 属性值 |
readOnly | 设置或返回 time 字段是否只读 |
required | 设置或返回 time 字段在表单中是否为必填字段 |
step | 设置或返回 time 字段的 step 属性值 |
type | 返回 time 字段的表单元素类型 |
value | 设置或返回 time 字段的 value 属性值 |
Input URL 对象
Input URL 对象是 HTML5 新增的。
Input URL 对象表示使用 type=”url” 属性的 HTML <input> 元素。
注意:Internet Explorer 9 (及更早IE版本), 或 Safari 浏览器不支持使用 type=”url” 属性的 HTML <input> 元素。
属性 | 描述 |
---|---|
autocomplete | 设置或返回 URL 字段的 autocomplete 属性值 |
autofocus | 设置或返回 URL 字段在页面加载后是否自动获取焦点 |
defaultValue | 设置或返回 URL 字段默认的值 |
disabled | 设置或返回 URL 字段是否可用 |
form | 返回使用 URL 字段的表单引用 |
list | 返回包含了 URL 字段的 datalist 引用 |
maxLength | 设置或返回 URL 字段的 maxlength 属性值 |
multiple | 设置或者返回 URL 字段是否允许用户输入一个或多个 url 地址。 |
name | 设置或返回 URL 字段的 name 属性值 |
pattern | 设置或返回 URL 字段 pattern 属性的值 |
placeholder | 设置或返回 URL 字段 placeholder 属性的值 |
readOnly | 设置或返回 URL 字段是否只读 |
required | 设置或返回 URL 字段在表单中是否为必填字段 |
size | 设置或返回 URL 段 size 属性的值 |
step | 设置或返回 URL 段 step 属性的值 |
type | 返回 URL 字段的表单元素类型 |
value | 设置或返回 URL 字段的 value 属性值 |
Input Week 对象
Input Week 对象是 HTML5 新增的。
Input Week 对象表示使用 type=”week” 属性的 HTML <input> 元素。
注意:Internet Explorer 或 Firefox 浏览器不支持使用 type=”week” 属性的 HTML <input> 元素。
属性 | 描述 |
---|---|
autocomplete | 设置或返回 week 字段的 autocomplete 属性值 |
autofocus | 设置或返回 week 字段在页面加载后是否自动获取焦点 |
defaultValue | 设置或返回 week 字段默认的值 |
disabled | 设置或返回 week 字段是否可用 |
form | 返回使用 week 字段的表单引用 |
list | 返回包含了 week 字段的 datalist 引用 |
max | 设置或返回 week 字段的 max 属性值 |
min | 设置或返回 week 字段的 min 属性值 |
name | 设置或返回 week 字段的 name 属性值 |
readOnly | 设置或返回 week 字段是否只读 |
required | 设置或返回 week 字段在表单中是否为必填字段 |
step | 设置或返回 week 字段 step 属性的值 |
type | 返回 week 字段的表单元素类型 |
value | 设置或返回 week 字段的 value 属性值 |
Keygen 对象
Keygen 对象代表着HTML form表单的 keygen 字段。
该对象提供了一个安全的方式来验证用户。
当提交表单时,私钥存储在本地,公钥发送到服务器。
在 HTML 文档中的每个 <keygen> 标签都能创建一个 Keygen 对象。
你可以通过form 表单的elements[]数组来搜索 keygen 字段,或者使用 document.getElementById()。
属性 | 描述 |
---|---|
autofocus | 设置或者返回页面加载时是否自动获得焦点。 |
challenge | 设置或者返回keygen字段的challenge属性值。 |
disabled | 设置或者返回是否用 keytag 字段。 |
form | 返回包含该 keygen 字段的表单。 |
keytype | 设置或者返回keygen字段的keytype属性值。 |
name | 设置或者返回keygen字段name属性的值。 |
type | 返回keygen字段是哪种表单元素类型。 |
Link 对象
Link 对象代表某个 HTML 的 <link> 元素。<link> 元素可定义两个链接文档之间的关系。
<link> 元素被定义于 HTML 文档的 head 部分。
属性 | 描述 | W3C |
---|---|---|
charset | 设置或返回目标 URL 的字符编码。 | Yes |
href | 设置或返回被链接资源的 URL。 | Yes |
hreflang | 设置或返回目标 URL 的基准语言。 | Yes |
media | 设置或返回文档显示的设备类型。 | Yes |
rel | 设置或返回当前文档与目标 URL之间的关系。 | Yes |
rev | 设置或返回目标 URL 与当前文档之间的关系。 | Yes |
type | 设置或返回目标 URL 的 MIME 类型。 | Yes |
Label 对象
Label 对象表示一个 HTML <keygen> 元素。
属性 | 描述 |
---|---|
control | 返回标注的控件。 |
form | 返回一个包含 label 的表单的引用。 |
htmlFor | 设置或返回 lable 的 for 属性的值。 |
Legend 对象
Legend 对象表示一个 HTML <legend> 元素。
属性 | 描述 |
---|---|
form | 返回一个包含 legend 的表单的引用。 |
Li 对象
Li 对象表示一个 HTML <li> 元素。
属性 | 描述 |
---|---|
value | 设置或返回一个列表项的 value 属性的值。 |
Map 对象
Map 对象表示 HTML <map> 元素。
集合 | 描述 |
---|---|
areas | 返回图象地图中所有 <area> 元素的集合 |
images | 返回所有与图象地图相关 <img> 和 <object> 元素的集合 |
属性 | 描述 |
---|---|
name | 设置或返回图像地图的 name 属性值 |
Menu 对象
Menu 对象表示 HTML <menu> 元素。
注意: <menu> 元素目前没有主流浏览器支持。
属性 | 描述 |
---|---|
label | 设置或者返回菜单的 label 属性 |
type | 设置或者返回菜单的 type 属性值 |
MenuItem 对象
MenuItem 对象是HTML5新增的。
MenuItem 对象表示 HTML <menuitem> 元素。
注意:目前只有Firefox浏览器支持 <menuitem> 元素。
Property | 描述 |
---|---|
checked | 设置或返回菜单项是否应进行检查 |
command | 设置或返回菜单项 command 属性的值 |
default | 设置或返回菜单项是否应该是默认的命令 |
disabled | 设置或返回菜单项是否禁用 |
icon | 设置或返回代表菜单项的图片 |
label | 设置或返回菜单项的 label 属性值 |
radiogroup | 设置或返回菜单项的 radiogroup 属性值 |
type | 设置或返回菜单项的 type 属性值 |
Meta 对象
Meta 对象代表 HTML 的 一个 <meta> 元素。
<meta> 元素可提供有关某个 HTML 元素的元信息 (meta-information),比如描述、针对搜索引擎的关键词以及刷新频率。
属性 | 描述 | W3C |
---|---|---|
content | 设置或返回 <meta> 元素的 content 属性的值。 | Yes |
httpEquiv | 把 content 属性连接到一个 HTTP 头部。 | Yes |
name | 把 content 属性连接到某个名称。 | Yes |
scheme | 设置或返回用于解释 content 属性的值的格式。 | Yes |
Meter 对象
Meter 对象是 HTML5 中新增的。
Meter 对象表示一个 HTML <meter> 元素。
属性 | 描述 |
---|---|
high | 设置或返回度量中 high 属性的值。 |
labels | 返回度量的 <label> 元素的列表。 |
low | 设置或返回度量中 low 属性的值。 |
max | 设置或返回度量中 max 属性的值。 |
min | 设置或返回度量中 min 属性的值。 |
optimum | 设置或返回度量中 optimum 属性的值。 |
value | 设置或返回度量中 value 属性的值。 |
Object 对象
Object 对象表示一个 HTML <object> 元素。
<object> 元素用于在网页中包含对象,比如:图像、音频、视频、Java applet、ActiveX、PDF、Flash 等。
属性 | 描述 |
---|---|
align | HTML5 中不支持。使用 style.cssFloat 替代。 设置或返回对象相对于周围文本的对齐方式。 |
archive | HTML5 中不支持。 设置或返回一个用于实现对象存档功能的字符串。 |
border | HTML5 中不支持。使用 style.border 替代。 设置或返回围绕对象的边框。 |
code | HTML5 中不支持。 设置或返回文件的 URL,该文件包含已编译的 Java 类。 |
codeBase | HTML5 中不支持。 设置或返回组件的 URL。 |
codeType | HTML5 中不支持。 |
data | |
declare | HTML5 中不支持。 |
form | 返回对对象的父表单的引用。 |
height | 设置或返回对象的高度。 |
hspace | HTML5 中不支持。使用 style.margin 替代。 设置或返回对象的水平外边距。 |
name | 设置或返回对象的名称。 |
standby | HTML5 中不支持。 设置或返回在加载对象时的消息。 |
type | 设置或返回通过 data 属性下载的数据的内容类型。 |
useMap | |
vspace | HTML5 中不支持。使用 style.margin 替代。 设置或返回对象的垂直外边距。 |
width | 设置或返回对象的宽度。 |
Ol 对象
Ol 对象表示一个 HTML <ol> 元素。
属性 | 描述 |
---|---|
compact | HTML5 中不支持。使用 style.lineHeight 替代。 设置或返回列表是否呈现比正常情况更小巧的效果。 |
reversed | 设置或返回列表是否为降序。 |
start | 设置或返回有序列表的 start 属性的值。 |
type | 设置或返回有序列表的 type 属性的值。 |
OptionGroup 对象
OptionGroup 对象表示一个 HTML <optgroup> 元素。
属性 | 描述 |
---|---|
disabled | 设置或返回是否禁用选项组。 |
label | 设置或返回选项组的 label 属性的值。 |
Option 对象
Option 对象代表 HTML 表单中下拉列表中的一个选项。
在 HTML 表单中 <option> 标签每出现一次,一个 Option 对象就会被创建。
您可通过表单的 elements[] 数组访问一个 Option 对象,或者通过使用 document.getElementById()。
属性 | 描述 | W3C |
---|---|---|
defaultSelected | 返回 selected 属性的默认值。 | Yes |
disabled | 设置或返回选项是否应被禁用。 | Yes |
form | 返回对包含选项的表单的引用 | Yes |
index | 返回对包含该元素的 <form> 元素的引用。 | Yes |
selected | 设置或返回 selected 属性的值。 | Yes |
text | 设置或返回某个选项的纯文本值。 | Yes |
value | 设置或返回被送往服务器的值。 | Yes |
Parameter 对象
Parameter 对象表示 HTML <param> 元素。
<param> 元素用于定义 <object> 元素中嵌入插件的参数。
属性 | 描述 |
---|---|
name | 设置或返回参数的 name 属性值 |
value | 设置或返回参数的 value 属性值 |
Progress 对象
Progress 对象是 HTML5 新增的。
Progress 对象表示一个 HTML <progress> 元素。
<progress> 元素表示任务的进度。
属性 | 描述 |
---|---|
labels | 返回进度条的标签的列表 (如果有的话) |
max | 设置或者返回进度条 max 属性的值 |
position | 返回当前进度条的位置 |
value | 设置或者返回进度条 value 属性的值 |
引用( <q>) 对象
引用对象定义了一个同内联元素的HTML引用。
<q> 标签定义短的引用。
<q> 元素经常在引用的内容周围添加引号。
HTML 文档中的每一个 <q> 标签 , 都会创建一个引用对象。
属性 | 描述 |
---|---|
cite | 设置或返回一个引用的cite属性值 |
Script 对象
Script 对象表示一个 HTML <script> 元素。
属性 | 描述 |
---|---|
async | 设置或返回是否异步执行脚本(一旦脚本可用)。 |
charset | 设置或返回脚本的 charset 属性的值。 |
defer | 设置或返回是否在页面完成解析时执行脚本。 |
src | 设置或返回脚本的 src 属性的值。 |
text | 设置或返回脚本的所有子文本节点的内容。 |
type | 设置或返回脚本的 type 属性的值。 |
Select 对象
Select 对象代表 HTML 表单中的一个下拉列表。
在 HTML 表单中,<select> 标签每出现一次,一个 Select 对象就会被创建。
您可通过遍历表单的 elements[] 数组来访问某个 Select 对象,或者使用 document.getElementById()。
集合 | 描述 | W3C |
---|---|---|
options | 返回包含下拉列表中的所有选项的一个数组。 | Yes |
属性 | 描述 | W3C |
---|---|---|
disabled | 设置或返回是否应禁用下拉列表。 | Yes |
form | 返回对包含下拉列表的表单的引用。 | Yes |
length | 返回下拉列表中的选项数目。 | Yes |
multiple | 设置或返回是否选择多个项目。 | Yes |
name | 设置或返回下拉列表的名称。 | Yes |
selectedIndex | 设置或返回下拉列表中被选项目的索引号。 | Yes |
size | 设置或返回下拉列表中的可见行数。 | Yes |
type | 返回下拉列表的表单类型。 | Yes |
方法 | 描述 | W3C |
---|---|---|
add() | 向下拉列表添加一个选项。 | Yes |
remove() | 从下拉列表中删除一个选项。 | Yes |
Source 对象
Source 对象是 HTML5 中新增的。
Source 对象表示一个 HTML <source> 元素。
属性 | 描述 |
---|---|
media | 设置或返回 <source> 元素中 media 属性的值。 |
src | 设置或返回 <source> 元素中 src 属性的值。 |
type | 设置或返回 <source> 元素中 type 属性的值。 |
Style 对象
Style 对象表示一个个别的样式声明。
“CSS” 列表示该属性是在哪一个 CSS 版本中定义的(CSS1、CSS2 或 CSS3)。
属性 | 描述 | CSS |
---|---|---|
alignContent | 设置或返回当灵活容器内的各项没有占用所有可用的空间时各项之间的对齐方式(水平)。 | 3 |
alignItems | 设置或返回灵活容器内的各项的对齐方式。 | 3 |
alignSelf | 设置或返回灵活容器内被选中项目的对齐方式。 | 3 |
animation | 是下面除了 animationPlayState 属性之外的其他属性的速记属性。 | 3 |
animationDelay | 设置或返回动画何时开始。 | 3 |
animationDirection | 设置或返回是否循环交替反向播放动画。 | 3 |
animationDuration | 设置或返回动画完成需花费的秒数或毫秒数。 | 3 |
animationFillMode | 设置或返回当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。 | 3 |
animationIterationCount | 设置或返回动画的播放次数。 | 3 |
animationName | 设置或返回关键帧 @keyframes 动画的名称。 | 3 |
animationTimingFunction | 设置或返回动画的速度曲线。 | 3 |
animationPlayState | 设置或返回动画是运行的还是暂停的。 | 3 |
background | 设置或返回在一个声明中的所有背景属性。 | 1 |
backgroundAttachment | 设置或返回背景图像是否固定或随页面滚动。 | 1 |
backgroundColor | 设置或返回元素的背景色。 | 1 |
backgroundImage | 设置或返回元素的背景图像。 | 1 |
backgroundPosition | 设置或返回的背景图像的起始位置。 | 1 |
backgroundRepeat | 设置或返回如何重复背景图像。 | 1 |
backgroundClip | 设置或返回背景的绘制区域。 | 3 |
backgroundOrigin | 设置或返回背景图像的定位区域。 | 3 |
backgroundSize | 设置或返回背景图像的大小。 | 3 |
backfaceVisibility | 设置或返回当一个元素背对屏幕时是否可见。 | 3 |
border | 设置或返回在一个声明中的 borderWidth、borderStyle 和 borderColor。 | 1 |
borderBottom | 设置或返回在一个声明中的所有 borderBottom* 属性。 | 1 |
borderBottomColor | 设置或返回下边框的颜色。 | 1 |
borderBottomLeftRadius | 设置或返回左下角边框的形状。 | 3 |
borderBottomRightRadius | 设置或返回右下角边框的形状。 | 3 |
borderBottomStyle | 设置或返回下边框的样式。 | 1 |
borderBottomWidth | 设置或返回下边框的宽度。 | 1 |
borderCollapse | 设置或返回表格的边框是否被折叠为一个单一的边框。 | 2 |
borderColor | 设置或返回元素边框的颜色(最多可以有四个值)。 | 1 |
borderImage | 一个用于设置或返回所有的 borderImage* 属性的速记属性。 | 3 |
borderImageOutset | 设置或返回边框图像区域超出边界框的量。 | 3 |
borderImageRepeat | 设置或返回图像边框是重复拼接图块还是延伸图块。 | 3 |
borderImageSlice | 设置或返回图像边框的向内偏移。 | 3 |
borderImageSource | 设置或返回要作为边框使用的图像。 | 3 |
borderImageWidth | 设置或返回图像边框的宽度。 | 3 |
borderLeft | 设置或返回在一个声明中的所有 borderLeft* 属性。 | 1 |
borderLeftColor | 设置或返回左边框的颜色。 | 1 |
borderLeftStyle | 设置或返回左边框的样式。 | 1 |
borderLeftWidth | 设置或返回左边框的宽度。 | 1 |
borderRadius | 一个用于设置或返回四个 border*Radius 属性的速记属性。 | 3 |
borderRight | 设置或返回在一个声明中的所有 borderRight* 属性。 | 1 |
borderRightColor | 设置或返回右边框的颜色。 | 1 |
borderRightStyle | 设置或返回右边框的样式。 | 1 |
borderRightWidth | 设置或返回右边框的宽度。 | 1 |
borderSpacing | 设置或返回表格中单元格之间的距离。 | 2 |
borderStyle | 设置或返回元素边框的样式(最多可以有四个值)。 | 1 |
borderTop | 设置或返回在一个声明中的所有 borderTop* 属性。 | 1 |
borderTopColor | 设置或返回上边框的颜色。 | 1 |
borderTopLeftRadius | 设置或返回左上角边框的形状。 | 3 |
borderTopRightRadius | 设置或返回右上角边框的形状。 | 3 |
borderTopStyle | 设置或返回上边框的样式。 | 1 |
borderTopWidth | 设置或返回上边框的宽度。 | 1 |
borderWidth | 设置或返回元素边框的宽度(最多可以有四个值)。 | 1 |
bottom | 设置或返回定位元素的底部位置。 | 2 |
boxDecorationBreak | 设置或返回分页处元素的背景和边框行为,或者换行处内联元素的背景和边框行为。 | 3 |
boxShadow | 设置或返回元素的下拉阴影。 | 3 |
boxSizing | 允许您以特定的方式定义匹配某个区域的特定元素。 | 3 |
captionSide | 设置或返回表格标题的位置。 | 2 |
clear | 设置或返回元素相对浮动对象的位置。 | 1 |
clip | 设置或返回定位元素的可见部分。 | 2 |
color | 设置或返回文本的颜色。 | 1 |
columnCount | 设置或返回元素应该被划分的列数。 | 3 |
columnFill | 设置或返回如何填充列。 | 3 |
columnGap | 设置或返回列之间的间隔。 | 3 |
columnRule | 一个用于设置或返回所有的 columnRule* 属性的速记属性。 | 3 |
columnRuleColor | 设置或返回列之间的颜色规则。 | 3 |
columnRuleStyle | 设置或返回列之间的样式规则。 | 3 |
columnRuleWidth | 设置或返回列之间的宽度规则。 | 3 |
columns | 一个用于设置或返回 columnWidth 和 columnCount 的速记属性。 | 3 |
columnSpan | 设置或返回一个元素应横跨多少列。 | 3 |
columnWidth | 设置或返回列的宽度。 | 3 |
content | 与 :before 和 :after 伪元素一起使用,来插入生成的内容。 | 2 |
counterIncrement | 增加一个或多个计数器。 | 2 |
counterReset | 创建或重置一个或多个计数器。 | 2 |
cursor | 设置或返回鼠标指针显示的光标类型。 | 2 |
direction | 设置或返回文本的方向。 | 2 |
display | 设置或返回元素的显示类型。 | 1 |
emptyCells | 设置或返回是否显示表格中的空单元格的边框和背景。 | 2 |
filter | 设置或返回图片滤镜(可视效果,如:高斯模糊与饱和度) | 3 |
flex | 相对于同一容器其他灵活的项目,设置或返回项目的长度。 | 3 |
flexBasis | 设置或灵活项目的初始长度。 | 3 |
flexDirection | 设置或返回灵活项目的方向。 | 3 |
flexFlow | 是 flexDirection 和 flexWrap 属性的速记属性。 | 3 |
flexGrow | 设置或返回项目将相对于同一容器内其他灵活的项目进行扩展的量。 | 3 |
flexShrink | 设置或返回项目将相对于同一容器内其他灵活的项目进行收缩的量。 | 3 |
flexWrap | 设置或返回灵活项目是否拆行或拆列。 | 3 |
cssFloat | 设置或返回元素的水平对齐方式。 | 1 |
font | 设置或返回一个声明中的 fontStyle、fontVariant、fontWeight、fontSize、lineHeight 和 fontFamily。 | 1 |
fontFamily | 设置或返回文本的字体。 | 1 |
fontSize | 设置或返回文本的字体尺寸。 | 1 |
fontStyle | 设置或返回字体样式是否是 normal(正常的)、italic(斜体)或 oblique(倾斜的)。 | 1 |
fontVariant | 设置或返回是否以小型大写字母显示字体。 | 1 |
fontWeight | 设置或返回字体的粗细。 | 1 |
fontSizeAdjust | 当使用备用字体时,确保文本的可读性。 | 3 |
fontStretch | 从字体库中选择一种正常的、浓缩的或扩大的字体。 | 3 |
hangingPunctuation | 规定一个标点符号是否可以放置在线框外。 | 3 |
height | 设置或返回元素的高度。 | 1 |
hyphens | 设置如何拆分单词来提高段落布局。 | 3 |
icon | 向作者提供为一个带有等价于图标的元素定义样式的功能。 | 3 |
imageOrientation | 规定一个用户代理应用到图像上的顺时针方向的旋转。 | 3 |
justifyContent | 设置或返回当灵活容器内的各项没有占用所有可用的空间时各项之间的对齐方式(垂直)。 | 3 |
left | 设置或返回定位元素的左部位置。 | 2 |
letterSpacing | 设置或返回文本中字符之间的空间。 | 1 |
lineHeight | 设置或返回在文本中行之间的距离。 | 1 |
listStyle | 设置或返回一个声明中的 listStyleImage、listStylePosition 和 listStyleType。 | 1 |
listStyleImage | 设置或返回作为列表项标记的图像。 | 1 |
listStylePosition | 设置或返回列表项标记的位置。 | 1 |
listStyleType | 设置或返回列表项标记的类型。 | 1 |
margin | 设置或返回元素的外边距(最多可以有四个值)。 | 1 |
marginBottom | 设置或返回元素的的下外边距。 | 1 |
marginLeft | 设置或返回元素的左外边距。 | 1 |
marginRight | 设置或返回元素的右外边距。 | 1 |
marginTop | 设置或返回元素的上外边距。 | 1 |
maxHeight | 设置或返回元素的最大高度。 | 2 |
maxWidth | 设置或返回元素的最大宽度。 | 2 |
minHeight | 设置或返回元素的最小高度。 | 2 |
minWidth | 设置或返回元素的最小宽度。 | 2 |
navDown | 设置或返回当使用向下箭头导航键时要导航到哪里。 | 3 |
navIndex | 设置或返回元素的显示顺序。 | 3 |
navLeft | 设置或返回当使用向左箭头导航键时要导航到哪里。 | 3 |
navRight | 设置或返回当使用向右箭头导航键时要导航到哪里。 | 3 |
navUp | 设置或返回当使用向上箭头导航键时要导航到哪里。 | 3 |
opacity | 设置或返回元素的不透明度。 | 3 |
order | 设置或返回一个灵活的项目相对于同一容器内其他灵活项目的顺序。 | 3 |
orphans | 设置或返回当元素内有分页时,必须在页面底部预留的最小行数。 | 2 |
outline | 设置或返回在一个声明中的所有 outline 属性。 | 2 |
outlineColor | 设置或返回一个元素周围的轮廓颜色。 | 2 |
outlineOffset | 对轮廓进行偏移,并在边框边缘进行绘制。 | 3 |
outlineStyle | 设置或返回一个元素周围的轮廓样式。 | 2 |
outlineWidth | 设置或返回一个元素周围的轮廓宽度。 | 2 |
overflow | 设置或返回如何处理呈现在元素框外面的内容。 | 2 |
overflowX | 规定如果内容溢出元素的内容区域,是否对内容的左/右边缘进行裁剪。 | 3 |
overflowY | 规定如果内容溢出元素的内容区域,是否对内容的上/下边缘进行裁剪。 | 3 |
padding | 设置或返回元素的内边距(最多可以有四个值)。 | 1 |
paddingBottom | 设置或返回元素的下内边距。 | 1 |
paddingLeft | 设置或返回元素的左内边距。 | 1 |
paddingRight | 设置或返回元素的右内边距。 | 1 |
paddingTop | 设置或返回元素的上内边距。 | 1 |
pageBreakAfter | 设置或返回元素后的分页行为。 | 2 |
pageBreakBefore | 设置或返回元素前的分页行为。 | 2 |
pageBreakInside | 设置或返回元素内的分页行为。 | 2 |
perspective | 设置或返回 3D 元素被查看的视角。 | 3 |
perspectiveOrigin | 设置或返回 3D 元素的底部位置。 | 3 |
position | 设置或返回用于元素定位方法的类型(static、relative、absolute 或 fixed)。 | 2 |
quotes | 设置或返回嵌入引用的引号类型。 | 2 |
resize | 设置或返回是否可由用户调整元素的尺寸大小。 | 3 |
right | 设置或返回定位元素的右部位置。 | 2 |
tableLayout | 设置或返回表格单元格、行、列的布局方式。 | 2 |
tabSize | 设置或返回制表符(tab)字符的长度。 | 3 |
textAlign | 设置或返回文本的水平对齐方式。 | 1 |
textAlignLast | 设置或返回当 text-align 属性设置为 “justify” 时,如何对齐一个强制换行符前的最后一行。 | 3 |
textDecoration | 设置或返回文本的修饰。 | 1 |
textDecorationColor | 设置或返回文本修饰的颜色。 | 3 |
textDecorationLine | 设置或返回文本修饰要使用的线条类型。 | 3 |
textDecorationStyle | 设置或返回文本修饰中的线条样式。 | 3 |
textIndent | 设置或返回文本第一行的缩进。 | 1 |
textJustify | 设置或返回当 text-align 属性设置为 “justify” 时,要使用的对齐方法。 | 3 |
textOverflow | 设置或返回当文本溢出包含它的元素,应该发生什么。 | 3 |
textShadow | 设置或返回文本的阴影效果。 | 3 |
textTransform | 设置或返回文本的大小写。 | 1 |
top | 设置或返回定位元素的顶部位置。 | 2 |
transform | 向元素应用 2D 或 3D 转换。 | 3 |
transformOrigin | 设置或返回被转换元素的位置。 | 3 |
transformStyle | 设置或返回被嵌套的元素如何呈现在 3D 空间中。 | 3 |
transition | 一个用于设置或返回四个过渡属性的速记属性。 | 3 |
transitionProperty | 应用过渡效果的 CSS 属性的名称。 | 3 |
transitionDuration | 设置或返回完成过渡效果需要花费的时间(以秒或毫秒计)。 | 3 |
transitionTimingFunction | 设置或返回过渡效果的速度曲线。 | 3 |
transitionDelay | 设置或返回过渡效果何时开始。 | 3 |
unicodeBidi | 设置或返回文本是否被重写,以便在同一文档中支持多种语言。 | 2 |
verticalAlign | 设置或返回元素中内容的垂直对齐方式。 | 1 |
visibility | 设置或返回元素是否应该是可见的。 | 2 |
whiteSpace | 设置或返回如何处理文本中的制表符、换行符和空格符。 | 1 |
width | 设置或返回元素的宽度。 | 1 |
wordBreak | 设置或返回非 CJK 语言的换行规则。 | 3 |
wordSpacing | 设置或返回文本中单词之间的空间。 | 1 |
wordWrap | 允许长单词或 URL 地址换行到下一行。 | 3 |
widows | 设置或返回一个元素必须在页面顶部的可见行的最小数量。 | 2 |
zIndex | 设置或返回定位元素的堆叠顺序。 | 2 |
Table 对象
Table 对象代表一个 HTML 表格。
在 HTML 文档中 <table> 标签每出现一次,一个 Table 对象就会被创建。
集合 | 描述 | W3C |
---|---|---|
cells | 返回包含表格中所有单元格的一个数组。 | No |
rows | 返回包含表格中所有行的一个数组。 | Yes |
tBodies | 返回包含表格中所有 tbody 的一个数组。 | Yes |
属性 | 描述 | W3C |
---|---|---|
align | 已废弃. 表在文档中的水平对齐方式。 | D |
background | 已废弃 设置或者返回表格的背景 | D |
bgColor | 已废弃 表格的背景颜色。 | D |
border | 已废弃 设置或返回表格边框的宽度。 instead | D |
caption | 返回表格标题。 | Yes |
cellPadding | 设置或返回单元格内容和单元格边框之间的空白量。 | Yes |
cellSpacing | 设置或返回在表格中的单元格之间的空白量。 | Yes |
frame | 设置或返回表格的外部边框。 | Yes |
height | 已废弃 设置或者返回表格高度 instead | D |
rules | 设置或返回表格的内部边框(行线)。 | Yes |
summary | 设置或返回对表格的描述(概述)。 | Yes |
tFoot | 返回表格的 TFoot 对象。如果不存在该元素,则为 null。 | Yes |
tHead | 返回表格的 THead 对象。如果不存在该元素,则为 null。 | Yes |
width | 已废弃设置或返回表格的宽度。 | D |
方法 | 描述 | W3C |
---|---|---|
createCaption() | 为表格创建一个 caption 元素。 | Yes |
createTFoot() | 在表格中创建一个空的 tFoot 元素。 | Yes |
createTHead() | 在表格中创建一个空的 tHead 元素。 | Yes |
deleteCaption() | 从表格删除 caption 元素以及其内容。 | Yes |
deleteRow() | 从表格删除一行。 | Yes |
deleteTFoot() | 从表格删除 tFoot 元素及其内容。 | Yes |
deleteTHead() | 从表格删除 tHead 元素及其内容。 | Yes |
insertRow() | 在表格中插入一个新行。 | Yes |
td/th 对象
td 对象代表了 HTML 中数据单元。
在 HTML 表格中每个 <td> 标签都会创建一个 td 对象。
th 对象代表了 HTML 标准中的表头单元。
HTML 中每个 <th> 标签都会创建一个 th 对象。
属性 | 描述 | W3C |
---|---|---|
abbr | 设置或返回单元格中内容的缩写版本。 | Yes |
align | 已废弃。 设置或返回单元格内部数据的水平排列方式。 | D |
axis | 设置或返回相关单元格的一个逗号分隔的列表。 | Yes |
background | 已废弃。 设置或返回表格的背景图片。 | D |
bgColor | 已废弃。 设置或返回表格的背景颜色 | D |
cellIndex | 返回单元格在某行的单元格集合中的位置。 | Yes |
ch | 设置或返回单元格的对齐字符。 | Yes |
chOff | 设置或返回单元格的对齐字符的偏移量。 | Yes |
colSpan | 单元格横跨的列数。 | Yes |
headers | 置或返回 header-cell 的 id 值。 | Yes |
height | 已废弃。 设置或返回数据单元的高度 | D |
noWrap | 已废弃。 nowrap 属性规定表格单元格中的内容不换行。 | D |
rowSpan | 设置或返回单元格可横跨的行数。 | Yes |
vAlign | 设置或返回表格单元格内数据的垂直排列方式。 | Yes |
width | 已废弃。设置或返回单元格的宽度。 | D |
tr 对象
tr 对象代表了 HTML 表格的行。
HTML文档中出现一个 <tr> 标签,就会创建一个tr对象。
集合 | 描述 | W3C |
---|---|---|
cells | 返回表格行中所有<td>和<th>元素的集合 | Yes |
属性 | 描述 | W3C |
---|---|---|
align | 已废弃。 设置或返回在行中数据的水平排列。 | D |
bgColor | 已废弃。 设置或返回表格行的的颜色。 | D |
ch | 设置或返回在行中单元格的对齐字符。 | Yes |
chOff | 设置或返回在行中单元格的对齐字符的偏移量。 | Yes |
height | 已废弃。设置或返回表格行的高度。使用 style.height 取代 | D |
rowIndex | 返回该行在表中的位置。 | Yes |
sectionRowIndex | R返回在 tBody 、tHead 或 tFoot 中,行的位置。 | Yes |
vAlign | 设置或返回在行中的数据的垂直排列方式。 | Yes |
方法 | 描述 | W3C |
---|---|---|
deleteCell() | 删除行中的指定的单元格。 | Yes |
insertCell() | 在一行中的指定位置插入一个空的元素。 | Yes |
Textarea 对象
Textarea 对象代表 HTML 表单中的一个文本域 (textarea)。
HTML 表单的每一个 <textarea> 标签,都能创建一个Textarea 对象。
HTML textarea 内容可以参考:HTML <textarea> 标签。
您可以通过索引相应表单的元素数组来访问某个 Textarea 对象,或者使用 getElementById() 方法。
属性 | 描述 | W3C |
---|---|---|
autofocus | 设置或返回 textarea 是否自动获取焦点。 | Yes |
cols | 设置或返回 textarea 的宽度。 | Yes |
defaultValue | 设置或返回文本框中的初始内容。 | Yes |
disabled | 设置或返回 textarea 是否应当被禁用。 | Yes |
form | 返回对包含该 textarea 的表单对象的引用。 | Yes |
maxLength | 设置 textarea 元素可以输入的最大字符数。 | Yes |
name | 设置或返回 textarea 的名称。 | Yes |
placeholder | 设置或返回 placeholder 属性的值。 | Yes |
readOnly | 设置或返回 textarea 是否应当是只读的。 | Yes |
require | 设置或返回 textarea 是否必须输入内容。 | Yes |
rows | 设置或返回 textarea 的高度。 | Yes |
type | 返回该文本框的表单类型。 | Yes |
value | 设置或返回在 textarea 中的文本。 | Yes |
方法 | 描述 | W3C |
---|---|---|
select() | 选择 textarea 中的文本。 | Yes |
Title 对象
Title 对象代表了一个HTML <title> 元素。
属性 | Description |
---|---|
text | 设置或返回文档的title元素文本信息 |
Time 对象
Time 对象是 HTML5 中新增的。
Time 对象表示一个 HTML <time> 元素。
属性 | 描述 |
---|---|
dateTime | 设置或返回 <time> 元素中 datetime 属性的值。 |
Track 对象
Track 对象是 HTML5 新增的。
Track 对象表示 HTML <track> 元素。
属性 | 描述 |
---|---|
default | 设置或返回轨道的默认状态 |
kind | 设置或返回轨道的 kind 属性值 |
label | 设置或返回轨道的 label 属性值 |
readyState | 返回当前轨道资源的状态 |
src | 设置或返回轨道的src属性值 |
srclang | 设置或返回轨道的 srclang 属性值 |
track | 返回 TextTrack 对象,表示 track 元素的轨道文本数据 |
Video 对象
Video 对象是 HTML5 中新增的。
Video 对象表示 HTML <video> 元素。
属性 | 描述 |
---|---|
audioTracks | 返回表示可用音频轨道的 AudioTrackList 对象。 |
autoplay | 设置或返回是否在就绪(加载完成)后随即播放视频。 |
buffered | 返回表示视频已缓冲部分的 TimeRanges 对象。 |
controller | 返回表示视频当前媒体控制器的 MediaController 对象。 |
controls | 设置或返回视频是否应该显示控件(比如播放/暂停等)。 |
crossOrigin | 设置或返回视频的 CORS 设置。 |
currentSrc | 返回当前视频的 URL。 |
currentTime | 设置或返回视频中的当前播放位置(以秒计)。 |
defaultMuted | 设置或返回视频默认是否静音。 |
defaultPlaybackRate | 设置或返回视频的默认播放速度。 |
duration | 返回视频的长度(以秒计)。 |
ended | 返回视频的播放是否已结束。 |
error | 返回表示视频错误状态的 MediaError 对象。 |
height | 设置或返回视频的 height 属性的值。 |
loop | 设置或返回视频是否应在结束时再次播放。 |
mediaGroup | 设置或返回视频所属媒介组合的名称。 |
muted | 设置或返回是否关闭声音。 |
networkState | 返回视频的当前网络状态。 |
paused | 设置或返回视频是否暂停。 |
playbackRate | 设置或返回视频播放的速度。 |
played | 返回表示视频已播放部分的 TimeRanges 对象。 |
poster | 设置或返回视频的 poster 属性的值。 |
preload | 设置或返回视频的 preload 属性的值。 |
readyState | 返回视频当前的就绪状态。 |
seekable | 返回表示视频可寻址部分的 TimeRanges 对象。 |
seeking | 返回用户当前是否正在视频中进行查找。 |
src | 设置或返回视频的 src 属性的值。 |
startDate | 返回表示当前时间偏移的 Date 对象。 |
textTracks | 返回表示可用文本轨道的 TextTrackList 对象。 |
videoTracks | 返回表示可用视频轨道的 VideoTrackList 对象。 |
volume | 设置或返回视频的音量。 |
width | 设置或返回视频的 width 属性的值。 |
Method | 描述 |
---|---|
addTextTrack() | 向视频添加新的文本轨道。 |
canPlayType() | 检查浏览器是否能够播放指定的视频类型。 |
load() | 重新加载视频元素。 |
play() | 开始播放视频。 |
pause() | 暂停当前播放的视频。 |
本篇完,还有疑问?留下评论吧