js知识汇总

以前自己学时候的笔记

JavaScript 能够改变 HTML 内容

本例使用该方法来“查找” id="demo" 的 HTML 元素，并把元素内容（innerHTML）更改为 "Hello JavaScript"：

document.getElementById("demo").innerHTML = "Hello JavaScript";
document.getElementById("demo").innerHTML = 'Hello JavaScript';
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.display="none";隐藏元素
document.getElementById("demo").style.display="block";显示元素

JavaScript 显示方案
使用 window.alert("asdfa") 写入警告框
在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML ：
使用 document.write("<div>asdf</div>") 写入 HTML 输出
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台



JavaScript 关键词
JavaScript 语句常常通过某个关键词来标识需要执行的 JavaScript 动作。
下面的表格列出了一部分将在教程中学到的关键词：
关键词	描述
break	终止 switch 或循环。
continue	跳出循环并在顶端开始。
debugger	停止执行 JavaScript，并调用调试函数（如果可用）。
do ... while	执行语句块，并在条件为真时重复代码块。
for	标记需被执行的语句块，只要条件为真。
function	声明函数。
if ... else	标记需被执行的语句块，根据某个条件。
return	退出函数。
switch	标记需被执行的语句块，根据不同的情况。
try ... catch	对语句块实现错误处理。
var	声明变量。

例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

运算符	描述
==	等于
===	等值等型
!=	不相等
!==	不等值或不等型
>	大于
<	小于
>=	大于或等于
<=	小于或等于
?	三元运算符


onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载


代码	结果
\b	退格键
\f	换页
\n	新行
\r	回车
\t	水平制表符
\v	垂直制表符


字符串方法和属性

length 属性返回字符串的长度：
indexOf() 方法返回字符串中指定文本首次出现的索引（位置）：
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引：
如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。

search() 方法搜索特定值的字符串，并返回匹配的位置：
str.slice(7,13); 提取字符串的某个部分并在新字符串中返回被提取的部分。如果省略第二个参数，则该方法将裁剪字符串的剩余部分：
substring() 类似于 slice()。不同之处在于 substring() 无法接受负的索引。
substr() 类似于 slice()。不同之处在于第二个参数规定被提取部分的长度。如果省略第二个参数，则该 substr() 将裁剪字符串的剩余部分。

var n = str.replace("Microsoft", "W3School"); 方法用另一个值替换在字符串中指定的值：

text1.toUpperCase();  // text2 是被转换为大写的 text1
text1.toLowerCase();  // text2 是被转换为小写的 text1

concat() 连接两个或多个字符串：
trim() 方法删除字符串两端的空白符

charAt() 方法返回字符串中指定下标（位置）的字符串：
charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码

可以通过 split() 将字符串转换为数组：

您可使用全局 JavaScript 函数 isNaN() 来确定某个值是否是数：

但是您能够使用 toString() 方法把数输出为十六进制、八进制或二进制。
myNumber.toString(16);     // 返回 80
myNumber.toString(8);      // 返回 200
myNumber.toString(2);

join() 方法也可将所有数组元素结合为一个字符串。
它的行为类似 toString()，但是您还可以规定分隔符：
var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * "); 
结果Banana * Orange * Apple * Mango
fruits.pop();    pop() 方法从数组中删除最后一个元素：
 fruits.push("Kiwi");   push() 方法（在数组结尾处）向数组添加一个新的元素：
shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。
fruits.shift(); 
unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素：
unshift() 方法返回新数组的长度。
fruits[fruits.length] = "Kiwi";  length 属性提供了向数组追加新元素的简易方法：
sort() 方法以字母顺序对数组进行排序： points.sort(function(a, b){return a - b}); 
reverse() 方法反转数组中的元素。您可以使用它以降序对数组进行排序：


valueOf() 以数值返回数值：
(123).valueOf();        // 从文本 123 返回 123
(100 + 23).valueOf();   // 从表达式 100 + 23 返回 123



Number()	返回数字，由其参数转换而来。
x = true;
Number(x);        // 返回 1
x = false;     
Number(x);        // 返回 0
x = new Date();
Number(x);        // 返回 1404568027739
x = "10"
Number(x);        // 返回 10
x = "10 20"
Number(x);    
parseFloat()	解析其参数并返回浮点数。
parseInt()	解析其参数并返回整数。

日期

Date 对象由新的 Date() 构造函数创建。
有 4 种方法创建新的日期对象：
new Date()
new Date(year, month, day, hours, minutes, seconds, milliseconds)
new Date(milliseconds)
new Date(date string)

toUTCString() 方法将日期转换为 UTC 字符串（一种日期显示标准）。
toDateString() 方法将日期转换为更易读的格式：
日期获取方法

方法	描述
getDate()	以数值返回天（1-31）
getDay()	以数值获取周名（0-6）
getFullYear()	获取四位的年（yyyy）
getHours()	获取小时（0-23）
getMilliseconds()	获取毫秒（0-999）
getMinutes()	获取分（0-59）
getMonth()	获取月（0-11）
getSeconds()	获取秒（0-59）
getTime()	获取时间（从 1970 年 1 月 1 日至今）
getTime() 方法  getTime() 方法返回自 1970 年 1 月 1 日以来的毫秒数：
getFullYear() 方法以四位数字形式返回日期年份：
getMonth() 以数字（0-11）返回日期的月份：
getDate() 方法以数字（1-31）返回日期的日：
getHours() 方法以数字（0-23）返回日期的小时数：
getMinutes() 方法以数字（0-59）返回日期的分钟数：
getSeconds() 方法以数字（0-59）返回日期的秒数：
getMilliseconds() 方法以数字（0-999）返回日期的毫秒数：
getDay() 方法以数字（0-6）返回日期的星期名（weekday）：

getUTCDate()	等于 getDate()，但返回 UTC 日期
getUTCDay()	等于 getDay()，但返回 UTC 日
getUTCFullYear()	等于 getFullYear()，但返回 UTC 年
getUTCHours()	等于 getHours()，但返回 UTC 小时
getUTCMilliseconds()	等于 getMilliseconds()，但返回 UTC 毫秒
getUTCMinutes()	等于 getMinutes()，但返回 UTC 分
getUTCMonth()	等于 getMonth()，但返回 UTC 月
getUTCSeconds()	等于 getSeconds()，但返回 UTC 秒

日期设置方法
方法	描述
setDate()	以数值（1-31）设置日
setFullYear()	设置年（可选月和日）
setHours()	设置小时（0-23）
setMilliseconds()	设置毫秒（0-999）
setMinutes()	设置分（0-59）
setMonth()	设置月（0-11）
setSeconds()	设置秒（0-59）
setTime()	设置时间（从 1970 年 1 月 1 日至今的毫秒数）

setFullYear() 方法设置日期对象的年份。这个例子设置为 2020 年：
实例
<script>
var d = new Date();
d.setFullYear(2020);
document.getElementById("demo").innerHTML = d;
</script>
亲自试一试
setFullYear() 方法可以选择设置月和日：
实例
<script>
var d = new Date();
d.setFullYear(2020, 11, 3);
document.getElementById("demo").innerHTML = d;
</script>
亲自试一试
setMonth() 方法
setMonth() 方法设置日期对象的月份（0-11）：
实例
<script>
var d = new Date();
d.setMonth(11);
document.getElementById("demo").innerHTML = d;
</script>
亲自试一试
setDate() 方法
setDate() 方法设置日期对象的日（1-31）：
实例
<script>
var d = new Date();
d.setDate(15);
document.getElementById("demo").innerHTML = d;
</script>
亲自试一试
setDate() 方法也可用于将天数添加到日期：
实例
<script>
var d = new Date();
d.setDate(d.getDate() + 50);
document.getElementById("demo").innerHTML = d;
</script>
亲自试一试
如果添加天数，切换月份或年份，则更改将由 Date 对象自动处理。
setHours() 方法
setHours() 方法设置日期对象的小时（0-23）：
实例
<script>
var d = new Date();
d.setHours(22);
document.getElementById("demo").innerHTML = d;
</script>
亲自试一试
setMinutes() 方法
setMinutes() 方法设置日期对象的分钟（0-59）：
实例
<script>
var d = new Date();
d.setMinutes(30);
document.getElementById("demo").innerHTML = d;
</script>
亲自试一试
setSeconds() 方法
setSeconds() 方法设置日期对象的秒数（0-59）：
实例
<script>
var d = new Date();
d.setSeconds(30);
document.getElementById("demo").innerHTML = d;
</script>
亲自试一试
比较日期
日期可以很容易地进行比较。
下面的例子把今日与 2049 年 1 月 16 日进行比较：
实例
var today, someday, text;
today = new Date();
someday = new Date();
someday.setFullYear(2049, 0, 16);

if (someday > today) {
  text = "今天在 2049 年 1 月 16 日之前";
} else {
  text = "今天在 2049 年 1 月 16 日之后";
}
document.getElementById("demo").innerHTML = text;



JavaScript Math 对象允许您对数字执行数学任务。

Math.round()
Math.round(x) 的返回值是 x 四舍五入为最接近的整数：
实例
Math.round(6.8);    // 返回 7
Math.round(2.3);    // 返回 2
亲自试一试
Math.pow()
Math.pow(x, y) 的返回值是 x 的 y 次幂：
实例
Math.pow(8, 2); // 返回 64
亲自试一试
Math.sqrt()
Math.sqrt(x) 返回 x 的平方根：
实例
Math.sqrt(64);      // 返回 8
亲自试一试
Math.abs()
Math.abs(x) 返回 x 的绝对（正）值：
实例
Math.abs(-4.7);     // 返回 4.7
亲自试一试
Math.ceil()
Math.ceil(x) 的返回值是 x 上舍入最接近的整数：
实例
Math.ceil(6.4);     // 返回 7
亲自试一试
Math.floor()
Math.floor(x) 的返回值是 x 下舍入最接近的整数：
实例
Math.floor(2.7);    // 返回 2
亲自试一试
Math.sin()
Math.sin(x) 返回角 x（以弧度计）的正弦（介于 -1 与 1 之间的值）。
如果您希望使用角度替代弧度，则需要将角度转换为弧度：
Angle in radians = Angle in degrees x PI / 180.
实例
Math.sin(90 * Math.PI / 180);     // 返回 1（90 度的正弦）
亲自试一试
Math.cos()
Math.cos(x) 返回角 x（以弧度计）的余弦（介于 -1 与 1 之间的值）。
如果您希望使用角度替代弧度，则需要将角度转换为弧度：
Angle in radians = Angle in degrees x PI / 180.
实例
Math.cos(0 * Math.PI / 180);     // 返回 1（0 度的余弦）
亲自试一试
Math.min() 和 Math.max()
Math.min() 和 Math.max() 可用于查找参数列表中的最低或最高值：
实例
Math.min(0, 450, 35, 10, -8, -300, -78);  // 返回 -300
亲自试一试
实例
Math.max(0, 450, 35, 10, -8, -300, -78);  // 返回 450
亲自试一试
Math.random()
Math.random() 返回介于 0（包括） 与 1（不包括） 之间的随机数：
实例
Math.random();     // 返回随机数
亲自试一试
您将在本教程的下一章学到更多有关 Math.random() 的知识。
Math 属性（常量）
JavaScript 提供了可由 Math 对象访问的 8 个数学常量：
实例
Math.E          // 返回欧拉指数（Euler's number）
Math.PI         // 返回圆周率（PI）
Math.SQRT2      // 返回 2 的平方根
Math.SQRT1_2    // 返回 1/2 的平方根
Math.LN2        // 返回 2 的自然对数
Math.LN10       // 返回 10 的自然对数
Math.LOG2E      // 返回以 2 为底的 e 的对数（约等于 1.414）
Math.LOG10E     // 返回以 10 为底的 e 的对数（约等于0.434）
亲自试一试
Math 构造器
与其他全局对象不同，Math对象没有构造函数。方法和属性是静态的。
可以在不首先创建Math对象的情况下使用所有方法和属性（常量）。
Math 对象方法
方法	描述
abs(x)	返回 x 的绝对值
acos(x)	返回 x 的反余弦值，以弧度计
asin(x)	返回 x 的反正弦值，以弧度计
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度
ceil(x)	对 x 进行上舍入
cos(x)	返回 x 的余弦
exp(x)	返回 Ex 的值
floor(x)	对 x 进行下舍入
log(x)	返回 x 的自然对数（底为e）
max(x,y,z,...,n)	返回最高值
min(x,y,z,...,n)	返回最低值
pow(x,y)	返回 x 的 y 次幂
random()	返回 0 ~ 1 之间的随机数
round(x)	把 x 四舍五入为最接近的整数
sin(x)	返回 x（x 以角度计）的正弦
sqrt(x)	返回 x 的平方根
tan(x)	返回角的正切





JavaScript 随机数

Math.random()
Math.random() 返回 0（包括） 至 1（不包括） 之间的随机数：
实例
Math.random();				// 返回随机数
亲自试一试
Math.random() 总是返回小于 1 的数。
JavaScript 随机整数
Math.random() 与 Math.floor() 一起使用用于返回随机整数。
实例
Math.floor(Math.random() * 10);		// 返回 0 至 9 之间的数
亲自试一试
实例
Math.floor(Math.random() * 11);		// 返回 0 至 10 之间的数
亲自试一试
实例
Math.floor(Math.random() * 100);	// 返回 0 至 99 之间的数
亲自试一试
实例
Math.floor(Math.random() * 101);	// 返回 0 至 100 之间的数
亲自试一试
实例
Math.floor(Math.random() * 10) + 1;	// 返回 1 至 10 之间的数
亲自试一试
实例
Math.floor(Math.random() * 100) + 1;	// 返回 1 至 100 之间的数
亲自试一试
一个适当的随机函数
正如你从上面的例子看到的，创建一个随机函数用于生成所有随机整数是一个好主意。
这个 JavaScript 函数始终返回介于 min（包括）和 max（不包括）之间的随机数：
实例
function getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min) ) + min;
}
亲自试一试
这个 JavaScript 函数始终返回介于 min 和 max（都包括）之间的随机数：
实例
function getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min + 1) ) + min;
}

循环
switch (new Date().getDay()) {
    case 0:
        day = "星期天";
        break;
    case 1:
        day = "星期一";
         break;
    case 2:
        day = "星期二";
         break;
    case 3:
        day = "星期三";
         break;
    case 4:
        day = "星期四";
         break;
    case 5:
        day = "星期五";
         break;
    case 6:
        day = "星期六";
} 

while (条件) {
    要执行的代码块
}

do {
    text += "The number is " + i;
    i++;
 }
while (i < 10);

转字符串
把数值转换为字符串
全局方法 String() 能够把数字转换为字符串。
它可用于任意类型的数字、文字、变量或表达式：
实例
String(x)         // 从数值变量 x 返回字符串
String(123)       // 从数值文本 123 返回字符串
String(100 + 23)  // 从表达式中的数值返回字符串
亲自试一试
数字方法 toString() 同理。
实例
x.toString()
(123).toString()
(100 + 23).toString()
亲自试一试
在数字方法这一章，您将学到更多可用于将数值转换为字符串的方法：
方法	描述
toExponential()	返回字符串，对数字进行舍入，并使用指数计数法来写。
toFixed()	返回字符串，对数字进行舍入，并使用指定位数的小数来写。
toPrecision()	返回字符串，把数字写为指定的长度。
把布尔转换为字符串
全局方法 String() 能够将布尔转换为字符串。
String(false)        // 返回 "false"
String(true)         // 返回 "true" 
布尔方法 toString() 同理。
false.toString()     // 返回 "false"
true.toString()      // 返回 "true"
把日期转换为字符串
全局方法 String() 可将日期转换为字符串。
String(Date())      // 返回 "Tue Jun 25 2019 15:25:41 GMT+0800 (中国标准时间)"
日期方法 toString() 同理。
实例
Date().toString()   // 返回 "Tue Jun 25 2019 15:25:41 GMT+0800 (中国标准时间)"
在日期方法这一章，您能够找到更多可用于把日期转换为字符串的方法：
方法	描述
getDate()	获得以数值计（1-31）的日
getDay()	或者以数值计（0-6）的周
getFullYear()	获得四位的年（yyyy）
getHours()	获得时（0-23）
getMilliseconds()	获得毫秒（0-999）
getMinutes()	获得分钟（0-59）
getMonth()	获得月（0-11）
getSeconds()	获得秒（0-59）
getTime()	获得时间（1970 年 1 月 1 日以来的毫秒）
把字符串转换为数值
全局方法 Number() 可把字符串转换为数字。
包含数字的字符串（比如 "3.14"）转换为数字（比如 3.14）。
空的字符串转换为 0。
其他字符串将转换为 NaN（Not a number，不是数字）。
Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0
Number("")        // 返回 0
Number("99 88")   // 返回 NaN
在数字方法这一章中，您将找到更多可用于把字符串转换为数字的方法：
方法	描述
parseFloat()	解析字符串并返回浮点数。
parseInt()	解析字符串并返回整数。
一元 + 运算符
一元的 + 运算符可用于把变量转换为数字：
实例
var y = "5";      // y 是字符串
var x = + y;      // x 是数字
亲自试一试
如果无法转换变量，则仍会成为数字，但是值为 NaN（Not a number）：
实例
var y = "Bill";   // y 是字符串
var x = + y;      // x 是数字 (NaN)
亲自试一试
把布尔转换数值
全局方法 Number() 也可把布尔转换为数字。
Number(false)     // 返回 0
Number(true)      // 返回 1
把日期转换为数字
全局方法 Number() 可用于把日期转换为数字。
d = new Date();
Number(d)          // 返回 1561447541508
日期方法 getTime() 同理。
d = new Date();
d.getTime()        // 返回 1561447541509
自动类型转换
如果 JavaScript 尝试操作一种“错误”的数据类型，它会试图将该值转换为“正确”的类型。
结果并不总是你所期望的：
5 + null    // 返回 5         因为 null 被转换为 0
"5" + null  // 返回 "5null"   因为 null 被转换为  "null"
"5" + 2     // 返回 52        因为 2 被转换为 "2"
"5" - 2     // 返回 3         因为 "5" 被转换为 5
"5" * "2"   // 返回 10        因为 "5" 和 "2" 被转换为 5 和 2
亲自试一试
自动字符串转换
JavaScript 自动调用变量的 toString() 函数，当您试图“输出”对象或变量时：
document.getElementById("demo").innerHTML = myVar;

// 如果 myVar = {name:"Fjohn"}  // toString 转换为 "[object Object]"
// 如果 myVar = [1,2,3,4]       // toString 转换为 "1,2,3,4"
// 如果 myVar = new Date()      // toString 转换为 "Tue Jun 25 2019 15:25:41 GMT+0800 (中国标准时间)"
数字和布尔也会被转换，但并不明显：
// 如果 myVar = 123             // toString 转换为 "123"
// 如果 myVar = true            // toString 转换为 "true"
// 如果 myVar = false           // toString 转换为 "false"
JavaScript 类型转换表
下表中列出了将不同 JavaScript 值转换为数字、字符串和布尔的结果：
原始值	转换为数字	转换为字符串	转换为逻辑	试一试
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	试一试
"twenty"	NaN	"twenty"	true	试一试
[ ]	0	""	true	试一试
[20]	20	"20"	true	试一试
[10,20]	NaN	"10,20"	true	试一试
["twenty"]	NaN	"twenty"	true	试一试
["ten","twenty"]	NaN	"ten,twenty"	true	试一试
function(){}	NaN	"function(){}"	true	试一试
{ }	NaN	"[object Object]"	true	试一试
null	0	"null"	false	试一试
undefined	NaN	"undefined"	false	试一试
引号中的值指示字符串值。
红色的值指示了（某些）程序员也许不希望的值。

JavaScript 正则表达式
正则表达式是构成搜索模式的字符序列。
该搜索模式可用于文本搜索和文本替换操作。
什么是正则表达式？
正则表达式是构成搜索模式（search pattern）的字符序列。
当您搜索文本中的数据时，您可使用搜索模式来描述您搜索的内容。
正则表达式可以是单字符，或者更复杂的模式。
正则表达式可用于执行所有类型的文本搜索和文本替换操作。
语法
/pattern/modifiers;
实例
var patt = /w3school/i;
例子解释：
/w3school/i 是一个正则表达式。
w3school 是模式（pattern）（在搜索中使用）。
i 是修饰符（把搜索修改为大小写不敏感）。
使用字符串方法
在 JavaScript 中，正则表达式常用于两个字符串方法：search() 和 replace()。
search() 方法使用表达式来搜索匹配，然后返回匹配的位置。
replace() 方法返回模式被替换处修改后的字符串。
使用字符串方法 search() 来处理字符串
search() 方法也接受字符串作为搜索参数。字符串参数将被转换为正则表达式：
实例
使用字符串来执行对 "W3school" 的搜索：
var str = "Visit W3School!";
var n = str.search("W3School"); 
亲自试一试
在字符串方法 search() 中使用正则表达式
实例
使用正则表达式执行搜索字符串中 "w3school" 的大小写不敏感的搜索：
var str = "Visit W3School";
var n = str.search(/w3school/i); 
n 中的结果将是：
6
亲自试一试
使用字符串方法 replace() 处理字符串
replace() 也接受字符串作为搜索参数：
var str = "Visit Microsoft!";
var res = str.replace("Microsoft", "W3School"); 
亲自试一试
在字符串方法 replace() 中使用正则表达式
实例
使用大小写不明的正则表达式以 W3school 来替换字符串中的 Microsoft：
var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "W3School"); 
res 的结果将是：
Visit W3School!
亲自试一试
您注意到了吗？
正则表达式参数（而不是字符串参数）可以在上面的方法中使用。
正则表达式可以使您的搜索更强大（例如，不区分大小写）。
正则表达式修饰符
修饰符可用于大小写不敏感的更全局的搜素：
修饰符	描述
i	执行对大小写不敏感的匹配。	试一试
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。	试一试
m	执行多行匹配。	试一试
正则表达式模式
括号用于查找一定范围的字符串：
表达式	描述
[abc]	查找方括号之间的任何字符。	试一试
[0-9]	查找任何从 0 至 9 的数字。	试一试
(x|y)	查找由 | 分隔的任何选项。	试一试
元字符（Metacharacter）是拥有特殊含义的字符：
元字符	描述
\d	查找数字。	试一试
\s	查找空白字符。	试一试
\b	匹配单词边界。	试一试
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。	试一试
Quantifiers 定义量词：
量词	描述
n+	匹配任何包含至少一个 n 的字符串。	试一试
n*	匹配任何包含零个或多个 n 的字符串。	试一试
n?	匹配任何包含零个或一个 n 的字符串。	试一试
使用 RegExp 对象
在 JavaScript 中，RegExp 对象是带有预定义属性和方法的正则表达式对象。
使用 test()
test() 是一个正则表达式方法。
它通过模式来搜索字符串，然后根据结果返回 true 或 false。
下面的例子搜索字符串中的字符 "e"：
实例
var patt = /e/;
patt.test("The best things in life are free!"); 
由于字符串中有一个 "e"，以上代码的输出将是：
true
亲自试一试
您不必首先把正则表达式放入变量中。上面的两行可缩短为一行：
/e/.test("The best things in life are free!");
使用 exec()
exec() 方法是一个正则表达式方法。
它通过指定的模式（pattern）搜索字符串，并返回已找到的文本。
如果未找到匹配，则返回 null。
下面的例子搜索字符串中的字符 "e"：
实例
/e/.exec("The best things in life are free!");
由于字符串中有一个 "e"，以上代码的输出将是：


jshtml dom
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素

element.innerHTML = new html content	改变元素的 inner HTML
element.attribute = new value	改变 HTML 元素的属性值
element.setAttribute(attribute, value)	改变 HTML 元素的属性值
element.style.property = new style	改变 HTML 元素的样式

document.createElement(element)	创建 HTML 元素
document.removeChild(element)	删除 HTML 元素
document.appendChild(element)	添加 HTML 元素
document.replaceChild(element)	替换 HTML 元素
document.write(text)	写入 HTML 输出流

document.anchors	返回拥有 name 属性的所有 <a> 元素。	1
document.applets	返回所有 <applet> 元素（HTML5 不建议使用）	1
document.baseURI	返回文档的绝对基准 URI	3
document.body	返回 <body> 元素	1
document.cookie	返回文档的 cookie	1
document.doctype	返回文档的 doctype	3
document.documentElement	返回 <html> 元素	3
document.documentMode	返回浏览器使用的模式	3
document.documentURI	返回文档的 URI	3
document.domain	返回文档服务器的域名	1
document.domConfig	废弃。返回 DOM 配置	3
document.embeds	返回所有 <embed> 元素	3
document.forms	返回所有 <form> 元素	1
document.head	返回 <head> 元素	3
document.images	返回所有 <img> 元素	1
document.implementation	返回 DOM 实现	3
document.inputEncoding	返回文档的编码（字符集）	3
document.lastModified	返回文档更新的日期和时间	3
document.links	返回拥有 href 属性的所有 <area> 和 <a> 元素	1
document.readyState	返回文档的（加载）状态	3
document.referrer	返回引用的 URI（链接文档）	1
document.scripts	返回所有 <script> 元素	3
document.strictErrorChecking	返回是否强制执行错误检查	3
document.title	返回 <title> 元素	1
document.URL	返回文档的完整 URL	1


事件

为 button 元素指定 onclick 事件：

当用户进入后及离开页面时，会触发 onload 和 onunload 事件。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。
onload 和 onunload 事件可用于处理 cookie。
实例
<body onload="checkCookies()">

onchange 事件
onchange 事件经常与输入字段验证结合使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段内容时，会调用 upperCase() 函数。
实例
<input type="text" id="fname" onchange="upperCase()">

onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数：

onmousedown, onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 事件构成了完整的鼠标点击事件。
首先当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup 事件被触发；最后，当鼠标点击完成后，onclick 事件被触发。

JavaScript Window - 浏览器对象模型
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() -移动当前窗口
window.resizeTo() -重新调整当前窗口

window.location.href 返回当前页面的 href (URL)
window.location.hostname 返回 web 主机的域名
window.location.pathname 返回当前页面的路径或文件名
window.location.protocol 返回使用的 web 协议（http: 或 https:）
window.location.assign 加载新文档
window.location.href 属性返回当前页面的 URL。
实例
显示当前页面的 href (URL)：
document.getElementById("demo").innerHTML = "页面位置是 " + window.location.href;
结果是：
页面位置是 http://www.w3school.com.cn/js/js_window_location.asp
亲自试一试
Window Location 主机名
window.location.hostname 属性返回（当前页面的）因特网主机的名称。
实例
显示主机的名称：
document.getElementById("demo").innerHTML = "页面主机名是 " + window.location.hostname;
结果是：
页面主机名是 www.w3school.com.cn
亲自试一试
Window Location 路径名
window.location.pathname 属性返回当前页面的路径名。
实例
显示当前 URL 的路径名：
document.getElementById("demo").innerHTML = "页面路径是 " + window.location.pathname;
结果是：
页面路径是 /js/js_window_location.asp
亲自试一试
Window Location 协议
window.location.protocol 属性返回页面的 web 协议。
实例
显示 web 协议：
document.getElementById("demo").innerHTML = "页面协议是 " + window.location.protocol;
结果是：
页面协议是 http:
亲自试一试
Window Location 端口
window.location.port 属性返回（当前页面的）互联网主机端口的编号。
实例
显示主机的端口号：
document.getElementById("demo").innerHTML = "端口号是： " + window.location.port;
亲自试一试
大多数浏览器不会显示默认端口号（http 为 80，https 为 443）。
Window Location Assign
window.location.assign() 方法加载新文档。
实例
加载新文档：
<html>
<head>
<script>
function newDoc() {
    window.location.assign("https://www.w3school.com.cn")
 }
</script>
</head>
<body>

<input type="button" value="Load new document" onclick="newDoc()">

</body>
</html> 

history.back() 方法加载历史列表中前一个 URL。
这等同于在浏览器中点击后退按钮。

各种框

如果您希望用户验证或接受某个东西，则通常使用“确认”框。
当确认框弹出时，用户将不得不单击“确定”或“取消”来继续进行。
如果用户单击“确定”，该框返回 true。如果用户单击“取消”，该框返回 false。
语法
window.confirm("sometext");
实例
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 + "！今天过的怎么样？";
}




定时器

Timing 事件
window 对象允许以指定的时间间隔执行代码。
这些时间间隔称为定时事件。
通过 JavaScript 使用的有两个关键的方法：
setTimeout(function, milliseconds)
在等待指定的毫秒数后执行函数。
setInterval(function, milliseconds)
等同于 setTimeout()，但持续重复执行该函数。
setTimeout() 和 setInterval() 都属于 HTML DOM Window 对象的方法。

window.setTimeout() 方法可以不带 window 前缀来编写。
第一个参数是要执行的函数。
第二个参数指示执行之前的毫秒数。
实例
单击按钮。等待 3 秒，然后页面会提示 "Hello"：
<button onclick="setTimeout(myFunction, 3000)">试一试</button>

<script>
function myFunction() {
    alert('Hello');
 }
</script>


如何停止执行？
clearTimeout() 方法停止执行 setTimeout() 中规定的函数。
window.clearTimeout(timeoutVariable)
window.clearTimeout() 方法可以不带 window 前缀来写。
clearTimeout() 使用从 setTimeout() 返回的变量：
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);


setInterval() 方法
setInterval() 方法在每个给定的时间间隔重复给定的函数。
window.setInterval(function, milliseconds);
window.setInterval() 方法可以不带 window 前缀来写。
第一个参数是要执行的函数。
第二个参数每个执行之间的时间间隔的长度。
本例每秒执行一次函数 "myTimer"（就像数字手表）。
实例
显示当前时间：
var myVar = setInterval(myTimer, 1000);
 
function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

如何停止执行？
clearInterval() 方法停止 setInterval() 方法中指定的函数的执行。
window.clearInterval(timerVariable)
window.clearInterval() 方法可以不带 window 前缀来写。
clearInterval() 方法使用从 setInterval() 返回的变量：
myVar = setInterval(function, milliseconds);
clearInterval(myVar);


js库K
什么是 cookie？
Cookie 是在您的计算机上存储在小的文本文件中的数据。
当 web 服务器向浏览器发送网页后，连接被关闭，服务器会忘记用户的一切。
Cookie 是为了解决“如何记住用户信息”而发明的：
当用户访问网页时，他的名字可以存储在 cookie 中。
下次用户访问该页面时，cookie 会“记住”他的名字。
Cookie 保存在名称值对中，如：
username = Bill Gates
当浏览器从服务器请求一个网页时，将属于该页的 cookie 添加到该请求中。这样服务器就获得了必要的数据来“记住”用户的信息。
如果浏览器已关闭本地 cookie 支持，则以下实例均无法工作。
通过 JavaScript 创建 cookie
JavaScript 可以用 document.cookie 属性创建、读取、删除 cookie。
通过 JavaScript，可以这样创建 cookie：
document.cookie = "username=Bill Gates";
您还可以添加有效日期（UTC 时间）。默认情况下，在浏览器关闭时会删除 cookie：
document.cookie = "username=John Doe; expires=Sun, 31 Dec 2017 12:00:00 UTC";
通过 path 参数，您可以告诉浏览器 cookie 属于什么路径。默认情况下，cookie 属于当前页。
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
通过 JavaScript 读取 cookie
通过 JavaScript，可以这样读取 cookie：
var x = document.cookie;
document.cookie 会在一条字符串中返回所有 cookie，比如：cookie1=value; cookie2=value; cookie3=value;
通过 JavaScript 改变 cookie
通过使用 JavaScript，你可以像你创建 cookie 一样改变它：
document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
旧 cookie 被覆盖。
通过 JavaScript 删除 cookie
删除 cookie 非常简单。
删除 cookie 时不必指定 cookie 值：
直接把 expires 参数设置为过去的日期即可：
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
您应该定义 cookie 路径以确保删除正确的 cookie。
如果你不指定路径，一些浏览器不会让你删除 cookie。
Cookie 字符串
document.cookie 属性看起来像一个正常的文本字符串。但它不是。
即使你向 document.cookie 写一份完整的 cookie 字符串，当再次读取时，你只能看到它的名称-值对。
如果设置了新 cookie，则旧的 cookie 不会被覆盖。新的 Cookie 会被添加到 document.cookie，所以如果你读取 document.cookie，你得到的东西会像这样：
cookie1 = value; cookie2 = value;
显示所有 cookie 创建 cookie 1 创建 cookie 2 删除 cookie 1 删除 cookie 2
如果你想找到一个指定 cookie 的值，你必须编写 JavaScript 函数来搜索 cookie 字符串中的 cookie 值。
JavaScript Cookie 实例
在下面的示例中，我们将创建一个 cookie 来存储访问者的名称。
访客第一次到达网页时，会要求他填写姓名。然后将该名称存储在 cookie 中。
下次访客到达同一页时，他将收到一条欢迎消息。
例如，我们将创建 3 个JavaScript函数：
设置 cookie 值的函数
获取 cookie 值的函数
检查 cookie 值的函数
设置 cookie 的函数
首先，我们创建一个函数，将访问者的名字存储在 cookie 变量中：
实例
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
} 
例子解释：
上面这个函数的的参数是：cookie 的名字（cname），cookie 的值（cvalue），以及知道 cookie 过期的天数（exdays）。
通过把 cookie 名称、cookie 值和过期字符串相加，该函数就设置了 cookie。
获取 cookie 的函数
然后，我们创建一个函数返回指定 cookie 的值：
实例
function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
         if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
         }
     }
    return "";
} 
函数解释：
把 cookie 作为参数（cname）。
创建变量（name）与要搜索的文本（CNAME”=”）。
解码 cookie 字符串，处理带有特殊字符的 cookie，例如 “$”。
用分号把 document.cookie 拆分到名为 ca（decodedCookie.split(';')）的数组中。
遍历 ca 数组（i = 0; i < ca.length; i++），然后读出每个值 c = ca[i]。
如果找到 cookie（c.indexOf(name) == 0），则返回该 cookie 的值（c.substring(name.length, c.length）。
如果未找到 cookie，则返回 ""。
检测 cookie 的函数
最后，我们创建检查 cookie 是否设置的函数。
如果已设置 cookie，将显示一个问候。
如果未设置 cookie，会显示一个提示框，询问用户的名字，并存储用户名 cookie 365 天，通过调用 setCookie 函数：
实例
function checkCookie() {
    var username = getCookie("username");
    if (username != "") {
        alert("Welcome again " + username);
    } else {
        username = prompt("Please enter your name:", "");
        if (username != "" && username != null) {
            setCookie("username", username, 365);
        }
    }
} 
现在组合起来
实例
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
        if (c.indexOf(name)  == 0) {
            return c.substring(name.length, c.length);
         }
    }
    return "";
}

function checkCookie() {
    var user = getCookie("username");
    if (user != "") {
        alert("Welcome again " + user);
    } else {
        user = prompt("Please enter your name:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}

如果有什么不懂可以加入qq群讨论讨论：668535367