漫漫D3路----W3C+CSS+JS

学习路线：

W3C √
HTML5 √
CSS √
JavaScript √
jQuary ：JS框架
NodeJS/Python/C++/Golang/Node（前端）
MVVM框架：Vue/React/Webpack（前端）
DOM
1. HTML DOM
2. XML DOM
XML1.1
SOAP
WSDL
SVG
D3
PHP
JSON 、AJAX、 PHP、正则表达式（前端）

W3C

W3C 指万维网联盟（World Wide Web Consortium）简单了解，很简单的~

HTML5

HTML 被设计用来显示数据。使用的标签都是预定义的。HTML 文档只能使用在 HTML 标准中定义过的标签 p、h1等。
至于这个5，是html的版本，草最新草案在2010年由W3C公布.
洒家有HTML+CSS学习背景，所以，跳过HTML。
就写一个：span，span标签通常使用来将文本的一部分或者文档的一部分独立出来，从而对独立出来的内容设置单独的样式。

CSS

突然发现好多CSS样式没见过。。。。记录一下

opacity:设置一个div元素的透明度级别
box-shadow：向 div 元素添加阴影（这个好玩）

box-shadow: h-shadow v-shadow blur spread color inset;

cursor：光标
hover：伪类在鼠标移到元素(a、p)上时向此元素添加特殊的样式。（:hover 必须位于 :link 和 :visited 之后）
伪元素：:before，:after，:first-line，:first-letter；:before，:after应用于在真正页面元素内部之前和之后添加新内容。
border-radius：给div元素添加圆角的边框
动画：
@keyframes（@-webkit-keyframes：浏览器不同命令不同）：创建动画是通过逐步改变从一个CSS样式设定到另一个。在动画过程中，您可以更改CSS样式的设定多次。指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。0％是开头动画，100％是当动画完成。
:not否定伪类选择器，用于选择不满足某些条件的元素
选择器
ul li为列表，tr td为表格
transform：旋转
transition：元素当过渡效果。color、width等
translate：水平方向和垂直方向移动
animation：动画
ease的效果
@media screen and (max-height: 450px) 屏幕自适应：当屏幕高度小于450px时执行以下CSS代码
classList的方法

方法	描述
add(class1, class2, …)	在元素中添加一个或多个类名。如果指定的类名已存在，则不会添加
contains(class)	返回布尔值，判断指定的类名是否存在。可能值：true - 元素包已经包含了该类名，false - 元素中不存在该类名
item(index)	返回元素中索引值对应的类名。索引值从 0 开始。如果索引值在区间范围外则返回 null
remove(class1, class2, …)	移除元素中一个或多个类名。注意：移除不存在的类名，不会报错。
toggle(class, true\|false)	在元素中切换类名。第一个参数为要在元素中移除的类名，并返回 false。如果该类名不存在则会在元素中添加类名，并返回 true。第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管该类名是否存在。例如：移除一个 class: element.classList.toggle(“classToRemove”, false); 添加一个 class：element.classList.toggle(“classToAdd”,true);注意： Internet Explorer 或 Opera 12 及其更早版本不支持第二个参数

display值

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。
…	…

iframe：飘窗；属性：frameborder

JavaScript

仙人指路：runoob_js
写在前面：
a. document时整个html文件。
b. 使用分号（;）进行分割。
c. 对大小写是敏感的。
d. 会忽略多余空格。
e. 可以在文本字符串中使用反斜杠对代码行进行换行。
f. 注释为：//、/* */、<! – 注释–>(！和–之间没有空格)
g. HTML和CSS中用于连接属性的“-”在JS中为减号，不允许使用
h. 文件载入：<\script src=“myscript.js”>，type不是必选项
i. 文件扩展名为.js
j. 保留字：下图不完整，全部保留字在链接内。

JavaScript是轻量级的脚本语言，必须位于 <script>与 </script> 标签之间。\ 部分、 <head>部分、外部js文件（此时不在包含script标签）均可，通常放在 <head> 中。 JavaScript 代码放入函数中，就可以在事件发生时调用该函数（除此之外还可以写入输出流，在页面加载时输出，不能使用事件方法通过输出流运行js，否则会覆盖原本html）。（转义字符真香）
在标签中填写 onclick 事件调用函数时莫忘括号，如：οnclick=“myfunction()”
显示数据的方式：

方法	描述
window.alert()	弹出警告框，可以不带window
window.confirm(“sometext”);	确认框，有确认和取消两个返回值，分别返回 true和false
window.prompt(“sometext”,“defaultvalue”);	提示框经用于提示用户在页面前输入某个值。
document.write()	方法将内容写到 HTML 文档中
innerHTML	写入到 HTML 元素
console.log()	写入到浏览器的控制台

数据类型：
a. 值类型(基本类型)：

描述	对象类型
字符串	String	字面量可以使用单引号或双引号;断开要使用反斜杠\；如var x= “Hello \（此处换行）World!”;
数字	Number	使用var声明，没有额外的int、float、double的声明方式；数字（Number）字面量可以是整数（1001）或者是小数（3.14），或者是科学计数(123e5)；浮点数为64位，比较时容易出错，可以书写时使用整数的乘除法代替浮点数：var z = (x * 10 + y * 10) / 10;
布尔	Boolean	true/false；注意：Number(false) // 返回 0；Number(true) // 返回 1；布尔对象无初始值或者其值为：0、-0、null、""、false、undefined、NaN 时，对象的值为 false
对空	Null	可以通过将对象的值设置为 null 来清空对象。可以用于释放空间。
未定义	Undefined	变量不含有值。用于变量，属性和方法
Symbol

b. 引用数据类型

描述	类型
对象	Object：使用属性名作为索引；定义对象最后一个元素后面不能有逗号
数组	Array：使用数字最为索引；最后一个元素后面不能有逗号；右花括号后有分号作为结束表示
日期	Date：Number(d) // 返回 1404568027739；d.getTime() ；// 返回 1404568027739
函数	Function

数组声明方式：

//方式1
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
//方式2
var cars=new Array("Saab","Volvo","BMW");
//方式3
var cars=["Saab","Volvo","BMW"];

对象及对象方法声明方式：

//对象(person)的属性以名称(firstname lastname id)和值对的形式 (name : value) 来定义。属性由逗号分隔：
var person={firstname:"John", lastname:"Doe", id:5566};
//寻址方式
name=person.lastname;
name=person["lastname"];
//对象方法声明方式
var person = {firstName: "John",lastName : "Doe",id : 5566,fullName : function(){return this.firstName + " " + this.lastName;//return语句最后可以不加分号}
};
//调用方法
person.fullname();

声明新变量
a. 变量必须以字母开头
b. 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
c. 变量名称对大小写敏感（y 和 Y 是不同的变量）

//声明新变量时，可以使用关键词 "new" 来声明其类型：
var carname=new
var x=new Number;
var y= new Boolean;
var cars=new Array;
var person= new Object;

typeof()返回数据类型；null和undefinded类型不同（不满足===），值相同（==）

可以使用算术运算符计算，下方页面载入直接显示50

<script>
document.getElementById("demo").innerHTML = 5 * 10;
</script>

运算符：

运算符	描述
赋值，算术和位运算符	= + - * / ++ – % += -= *= /= %=
逻辑运算符	&&(and) \|\|(or) !(not)
条件运算符	…？…：…
比较运算符	==（值） ===（绝对等于：类型和值） !=(不等于) !==（不绝对等于）< > <= >=

一个关于==和===的易混点

var x = 10;
var y = "10";
if (x == y) //此处返回true
if (x === y) //返回false

+ 运算符用于把文本值(包括空格：“ ”)或字符串变量加起来（连接起来）。注意：字符串+空格：返回字符串和空格的连接。数字相加时+号身份为加，其中一个是字符串即返回字符串
7. 语句标识符：

语句	描述
break	用于跳出循环。
catch	语句块，在 try 语句块执行出错时执行 catch 语句块。
continue	跳过循环中的一个迭代。
do … while	执行一个语句块，在条件语句为 true 时继续执行该语句块。
for	在条件语句为 true 时，可以将代码块执行指定的次数。
for … in	用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function	定义一个函数
if … else	用于基于不同的条件来执行不同的动作。
return	退出函数
switch	用于基于不同的条件来执行不同的动作。
throw	抛出（生成）错误。
try	实现错误处理，与 catch 一同使用。
var	声明一个变量。
while	当条件语句为 true 时，执行语句块。

函数，JavaScript中，函数内部声明变量、函数的参数只在函数内部起作用。均为局部变量，函数运行完毕，变量就会被删除；函数参数只在函数内起作用，是局部变量；函数内无声明直接使用的变量为全局变量。函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它，在页面关闭后被删除。（全局变量是 window 对象,整个JavaScript程序中，全局变量处处都在）

//变量统一使用var声明，函数定义显式参数时没有指定数据类型，只有变量名；
//无返回值
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){alert("Welcome " + name + ", the " + job);
}
//有返回值，可以return 值，也可以直接return；值是可选的
function myFunction(a,b)
{return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);

奇奇怪怪的函数应用方法

//可以存储在变量中，函数 为匿名函数 (函数没有名称)
var x = function (a, b) {return a * b};
//此后变量z可以作为函数使用
var z = x(4, 3);
var l = x(4, 3)*2；//函数可以作为表达式使用
//要避免使用构造函数的new关键字的使用
//函数提升，函数可以在声明之前调用：
myFunction(5);
function myFunction(y) {return y * y;
}
//自调用函数，表达式后面紧跟 () ，则会自动调用，同时可以实现闭包
(function () {var x = "Hello!!";      // 我将调用自己
})();
//闭包使得函数拥有私有变量变成可能
var add = (function () {var counter = 0;//计数器受匿名函数的作用域保护，只能通过 add 方法修改return function () {return counter += 1;}//它可以访问函数上一层作用域的计数器
})();
add();
add();
add();// 计数器为 3
//JavaScript 函数是对象，由有 属性 和 方法。
//arguments.length 属性返回函数调用过程接收到的参数个数：
function myFunction(a, b) {return arguments.length;
}
//toString() 方法将函数作为一个字符串返回:
var txt = myFunction.toString();
//arguments可以当作数组用，此处使用了隐式参数，函数对隐式参数的个数没有进行检测
x = findMax(1, 123, 500, 115, 44, 88);
function findMax() {var i, max = arguments[0];if(arguments.length < 2) return max;for (i = 0; i < arguments.length; i++) {if (arguments[i] > max) {max = arguments[i];}}return max;
}

ES6中使用箭头定义函数，如const x = (x, y) => x * y;
JS中函数和方法本质上是一样的，只不过方法是函数的特例，是将函数值赋给了对象，当函数和对象一起使用时就变成了方法。
实例如下：

var myObject = {firstName:"John",lastName: "Doe",fullName: function () {//fullName方法return this.firstName + " " + this.lastName;}
}
myObject.fullName();         // 返回 "John Doe"

函数是对象，有属性和方法，call() 和 apply() 是预定义的函数方法，两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。示例如下：

//call()
function myFunction(a, b) {return a * b;
}
myObject = myFunction.call(myObject, 10, 2);     // 返回 20
//apply(),apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入
function myFunction(a, b) {return a * b;
}
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);  // 返回 20

内嵌函数plus()可以访问上一层的函数变量：

function add() {var counter = 0;function plus() {counter += 1;}plus();    return counter;
}

使用内嵌函数实现了变量在私有化的同时是全局变量（即变量记录当前自身值，不能随便访问）

对象（object也是变量）作用域为可访问变量，对象，函数的集。所有事物都是对象：字符串、数值、数组、函数…对象只是带有属性和方法的特殊数据类型。
两种创建对象的方式：

//使用Object
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
//使用函数
function person(firstname,lastname,age,eyecolor)
{this.firstname=firstname;this.lastname=lastname;this.age=age;this.eyecolor=eyecolor;
}
//创建对象的实例
var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");
//添加属性到对象
person.firstname="John";//对象可变
//把方法添加到对象属性，即另对象的属性=函数

常见HTML事件。

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载
…	…

String类型为数组，使用索引位置来访问字符串中的每个字符
var carname = “Volvo XC60”;
var carname = ‘Volvo XC60’;
var character = carname[7];
String类型数据属性，不是方法：

属性	描述
constructor	返回所有 JavaScript 变量的构造函数
length	返回字符串的长度
prototype	允许您向对象添加属性和方法

String类型数据的函数如下：

方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()、String（变量、数字、表达式）	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值
eval()	计算字符串：将字符串转化为数值形式进行计算

Number：可以是数字或对象（new）
a、infinity：无穷大
b、如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数(var y = 0377; )，如果前缀为 0 和 “x”，则解释为十六进制数(var z = 0xFF;)。
c、属性：

属性	描述
mber.MAX_VALUE	最大值
Number.MIN_VALUE	最小值
Number.NaN	非数字
Number.NEGATIVE_INFINITY	负无穷，在溢出时返回
Number.POSITIVE_INFINITY	正无穷，在溢出时返回
Number.EPSILON	表示 1 和比最接近 1 且大于 1 的最小 Number 之间的差别
Number.MIN_SAFE_INTEGER	最小安全整数。
Number.MAX_SAFE_INTEGER	最大安全整数。

d、方法：

方法	描述
toExponential(x)	把对象的值转换为指数计数法。
toFixed(x)	把数字转换为字符串，结果的小数点后有指定位数的数字。
toPrecision(x)	把数字格式化为指定的长度,返回一个指定精度的数字
toString()	把数字转换为字符串，可转化为16进制、8进制、2进制。
valueOf()	返回一个 Number 对象的基本数字值。
Number()	字符串转数组
parseFloat()	解析一个字符串，并返回一个浮点数。
parseInt()	解析一个字符串，并返回一个整数。
Number.isInteger()	判断传递的参数是否为整数。
isFinite()	函数用于检查其参数是否是无穷大，也可以理解为是否为一个有限数值（finite number）

Date
函数：

方法	描述
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 日至今的毫秒数。

Array：数组对象，使用单独的变量名来存储一系列的值。数组中有不同的变量类型。
数组声明方式：

//方式1
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
//方式2
var cars=new Array("Saab","Volvo","BMW");
//方式3
var cars=["Saab","Volvo","BMW"];

数组的方法：
常用：

方法	描述
concat()	连接两个或更多的数组，并返回结果。
includes()	判断一个数组是否包含一个指定的值。
pop()	删除数组的最后一个元素并返回删除的元素。
push()	向数组的末尾添加一个或更多元素，并返回新的长度
reverse()	反转数组的元素顺序。
sort()	对数组的元素进行排序。
toString()	把数组转换为字符串，并返回结果。

条件语句
if同Java，示例如下

if (time<10)
{document.write("<b>早上好</b>");
}
else if (time>=10 && time<20)
{document.write("<b>今天好</b>");
}
else
{document.write("<b>晚上好!</b>");
}

switch同Java,注意：case使用的是恒等运算符：===

var d=new Date().getDay();
switch (d)
{case 6:x="今天是星期六";break;case 0:x="今天是星期日";break;default:x="期待周末";
}
document.getElementById("demo").innerHTML=x;

循环：for for/in while do/while
for循环同Java，可以加HTML标签，示例如下：

for (var i=0; i<5; i++)
{x=x + "该数字为 " + i + "<br>";
}for (var i=0,len=cars.length; i<len; i++)
{ document.write(cars[i] + "<br>");
}var i=0,len=cars.length;
for (; i<len; )
{ document.write(cars[i] + "<br>");i++;
}
cars=["BMW","Volvo","Saab","Ford"];
var i=0;
for (;cars[i];)
{document.write(cars[i] + "<br>");i++;
}

for/in循环

var person={fname:"Bill",lname:"Gates",age:56}; for (x in person)  // x 为属性名
{txt=txt + person[x];
}

while循环同Java

while (i<5)
{x=x + "The number is " + i + "<br>";i++;
}do
{x=x + "The number is " + i + "<br>";i++;
}while (i<5);//有分号cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars[i])
{document.write(cars[i] + "<br>");i++;
}

附加：
break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。

使用“标签名:”为代码添加标签，break可以跳出任何 JavaScript 代码块。代码块要使用{}包围。

cars=["BMW","Volvo","Saab","Ford"];
list:
{document.write(cars[0] + "<br>"); document.write(cars[1] + "<br>"); document.write(cars[2] + "<br>"); break list;document.write(cars[3] + "<br>"); document.write(cars[4] + "<br>"); document.write(cars[5] + "<br>");
}

正则表达式（RegExp：regular expression），是跟难啃的硬骨头！
写法：/ … / 或使用反斜杠
语法：

//pattern：表达式，修饰符(modifiers)：检索是否是全局，区分大小写等
var patt=new RegExp(pattern,modifiers);
//或更简单的方法
var patt=/pattern/modifiers;

函数：

函数	描述
test()	检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。	var patt = /e/; patt.test(“The best things in life are free!”);或/e/.test(“The best things in life are free!”);
exec()	用于检索字符串中的正则表达式的匹配。该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。	/e/.exec(“The best things in life are free!”);

修饰符：

规则	解释
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。
[abc]	查找方括号之间的任何字符
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
(x\|y)	查找任何以\| 分隔的选项。
\d	查找数字。
\s	查找空白字符。
\b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。

两种函数:
test():搜索字符串指定的值，根据结果并返回真或假。
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

/*是否带有小数*/
function    isDecimal(strValue )  {  var  objRegExp= /^\d+\.\d+$/;return  objRegExp.test(strValue);
}  /*校验是否中文名称组成 */
function ischina(str) {var reg=/^[\u4E00-\u9FA5]{2,4}$/;   /*定义验证表达式*/return reg.test(str);     /*进行验证*/
}/*校验是否全由8位数字组成 */
function isStudentNo(str) {var reg=/^[0-9]{8}$/;   /*定义验证表达式*/return reg.test(str);     /*进行验证*/
}/*校验电话码格式 */
function isTelCode(str) {var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;return reg.test(str);
}/*校验邮件地址是否合法 */
function IsEmail(str) {var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;return reg.test(str);
}

错误
try 语句测试代码块的错误。
catch 语句处理错误。catch(err),捕捉到即执行内部语句
throw 语句创建自定义错误。
finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。
err 可以是自定义，可以是内部生成
自定义错误示例：

function myFunction() {var message, x;message = document.getElementById("message");message.innerHTML = "";x = document.getElementById("demo").value;try { if(x == "")  throw "值为空";if(isNaN(x)) throw "不是数字";x = Number(x);if(x < 5)    throw "太小";if(x > 10)   throw "太大";}catch(err) {message.innerHTML = "错误: " + err;}
}

JavaScript 代码的断点。
在需要调试的代码前添加：debugger;
不使用变量提升这个功能，
JavaScript 严格模式(strict mode)不允许使用未声明的变量。
严格模式语法：“use strict”;其中双引号为语法内。
毛病血多链接呈上：规矩
表单验证：JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
语句：var x = document.forms[“FormName”][“inputname”].value;
代码示例，验证是否为正确的邮箱地址：

function validateForm(){var x=document.forms["myForm"]["email"].value;var atpos=x.indexOf("@");var dotpos=x.lastIndexOf(".");if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){alert("不是一个有效的 e-mail 地址");return false;}
}
<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">Email: <input type="text" name="email"><input type="submit" value="提交">
</form>

JavaScript验证API

方法	描述
checkValidity()	如果 input 元素中的数据是合法的返回 true，否则返回 false。
setCustomValidity()	设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成true，则 checkValidity 总是会返回false。如果要重新判断需要取消自定义提示，方式如下：setCustomValidity(’’) ；setCustomValidity(null) ；setCustomValidity(undefined)；
约束验证DOM属性：	属性
–	–
validity	布尔属性值，返回 input 输入值是否合法
validationMessage	浏览器错误提示信息
willValidate	指定 input 是否需要验证input 元素的 validity 属性包含一系列关于 validity 数据属性:
–	–
customError	设置为 true, 如果设置了自定义的 validity 信息。
patternMismatch	设置为 true, 如果元素的值不匹配它的模式属性。
rangeOverflow	设置为 true, 如果元素的值大于设置的最大值。
rangeUnderflow	设置为 true, 如果元素的值小于它的最小值。
stepMismatch	设置为 true, 如果元素的值不是按照规定的 step 属性设置。
tooLong	设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。
typeMismatch	设置为 true, 如果元素的值不是预期相匹配的类型。
valueMissing	设置为 true，如果元素 (required 属性) 没有值。
valid	设置为 true，如果元素的值是合法的。22. JavaScript 中 this 不是固定不变的(不同于Java)，它会随着执行环境的改变而改变。具体如下：

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。
22. let 关键字实现块级作用域

var x = 10;
// 这里输出 x 为 10
{
let x = 2;
// 这里输出 x 为 2
}
// 这里输出 x 为 10let i = 5;
for (let i = 0; i < 10; i++) {
// 一些代码...
}
// 这里输出 i 为 5

const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改。变量全部使用大写字母
规矩来了：
1、使用var关键字声明的全局作用域变量属于window对象。2、使用let关键字声明的全局作用域变量不属于window对象。3、使用var关键字声明的变量在任何地方都可以修改。4、在相同的作用域或块级作用域中，不能使用let关键字来重置var关键字声明的变量。5、在相同的作用域或块级作用域中，不能使用let关键字来重置let关键字声明的变量。6、let关键字在不同作用域，或不用块级作用域中是可以重新声明赋值的。7、在相同的作用域或块级作用域中，不能使用const关键字来重置var和let关键字声明的变量。8、在相同的作用域或块级作用域中，不能使用const关键字来重置const关键字声明的变量const 关键字9、在不同作用域，或不同块级作用域中是可以重新声明赋值的:var关键字定义的变量可以先使用后声明。10、let关键字定义的变量需要先声明再使用（不支持变量提升）。11、const关键字定义的常量，声明时必须进行初始化，且初始化后不可再修改，必须先声明后使用（不支持变量提升）。12、const定义对象和数组时可以修改，但不可以重新赋值。
23. JSON来啦！
JSON实例（不是JavaScript）：

{"sites":[
{"name":"Runoob", "url":"www.runoob.com"},
{"name":"Google", "url":"www.google.com"},
{"name":"Taobao", "url":"www.taobao.com"}
]}

转化为文本，再转化为JavaScript格式

var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;

相关补充

方法	描述
JSON.parse()	用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()	用于将 JavaScript 值转换为 JSON 字符串。

void：要计算一个表达式但是不返回值。
语法格式：javascript:void(填写命令)；命令会执行，但不会返回任何值
补充：#用来查找id如 #pos必对应一个标签的id=pos
JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理
异步编程之回调函数
setTimeout 的第一个参数是个回调函数，第二个参数是毫秒数，这个函数执行之后会产生一个子线程，子线程会等待 3 秒，然后执行回调函数，在命令行输出 “RUNOOB!”。

setTimeout(function () {document.getElementById("demo").innerHTML="RUNOOB!";}, 3000);

当需要多次顺序执行异步操作的时候：Promise 构造函数，它只有一个参数，是一个函数，这个函数在构造之后会直接被异步运行，所以我们称之为起始函数。起始函数包含两个参数 resolve 和 reject。当又需要调用一个异步任务的时候再写一个 then 而不是在当前的 then 接着编程， then 块默认会向下顺序执行，return 是不能中断的，可以通过 throw 来跳转至 catch 实现中断

new Promise(function (resolve, reject) {//该function为起始函数
//resolve 和 reject 的作用域只有起始函数，不包括 then 以及其他序列console.log(1111);resolve(2222);//resolve可以传递给then一个参数
}).then(function (value) {console.log(value);return 3333;//return可以传递给下一个then一个参数
}).then(function (value) {console.log(value);throw "An error";//自定义错误信息，catch可以捕捉此信息；另外，throw可以用来终止程序运行，直接跳转到catch
}).catch(function (err) {console.log(err);
});
//以下方法将核心部分写作一个promise函数，多次调用
function print(delay, message) {return new Promise(function (resolve, reject) {setTimeout(function () {console.log(message);resolve();}, delay);});
}
print(1000, "First").then(function () {return print(4000, "Second");
}).then(function () {print(3000, "Third");
});
//异步函数 async function
//上方调用print函数的程序可以写做以下形式
async function asyncFunc() {await print(1000, "First");//await 指令后必须跟着一个 Promise；可以使用try-catch捕捉错误；若有返回值，可以将await赋值给变量await print(4000, "Second");await print(3000, "Third");
}
asyncFunc();

JS无类，不会创建类。
prototype（属性：原型对象）
所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法，使用 prototype 属性就可以给对象的构造函数添加新的属性

function Person(first, last, age, eyecolor) {this.firstName = first;this.lastName = last;this.age = age;this.eyeColor = eyecolor;
}Person.prototype.name = function() {//给对象添加一个方法return this.firstName + " " + this.lastName;
};

Math对象
常见方法：

方法	解释
abs(x)	返回 x 的绝对值。
floor(x)	对 x 进行下舍入。
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)	返回角的正切。

常见属性：

属性	描述
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）。

浏览器对象模型
a、以下示例获得浏览器的窗口的尺寸（涵盖所有浏览器）

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;var h=window.innerHeight ||document.documentElement.clientHeight || document.body.clientHeight;

其他windows方法

window.open() - 打开新窗口，控制外观的属性：toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400；获得焦点：myWindow.focus();其他属性：.closed（关闭为1，没有关闭为0；）.name（窗口名称）
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

b、window.screen对象在编写时可以不使用 window 这个前缀。
一些属性：
screen.availWidth;//可用的屏幕宽度
screen.availHeight ;// 可用的屏幕高度
c、window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
d、window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。属性有：hostname（端口号）、pathname（当前页面的路径）、port、protocol（当前页面的协议）、href（当前页面的整个URL）；方法：assign（url）：加载页面；reload（url）重新加载页面；replace（url）：替代当前页面。window.top.location=“URL”：跳出框架。
e、Window Location Assign：location.assign() 方法加载新的文档。
window.location.assign(“https://www.runoob.com”)
f、页面前进后退
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击向前按钮相同
或history.go(-1、0、1)；后退、不动、前进
history.length：url的历史清单
h、window.navigator 对象包含有关访问者浏览器的信息。

<div id="example"></div>
<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

i、window.scrollTo(100,500);滚动到指定位置
window.scrollBy(100,100);由指定的像素数滚动内容
j、重设屏幕大小：window.resizeTo(像素，像素)
k、

计时事件
setInterval() - 间隔指定的毫秒数不停地执行指定的代码。可以用来实现动画进度条百分比进度条
clearInterval(intervalVariable)
setTimeout() - 在指定的毫秒数后执行指定代码。
clearTimeout()
实例

//间隔指定的毫秒数不停地执行指定的代码
<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>//在指定的毫秒数后执行指定代码。
var myVar;
function myFunction()
{**myVar**=setTimeout(function(){alert("Hello")},3000);//将事件赋值给变量myvar，停止的时候使用
}
//停止
function myStopFunction()
{clearTimeout(myVar);
}

Cookie 以名/值对形式存储；存储于你电脑上的文本文件

function setCookie(cname,cvalue,exdays){var d = new Date();d.setTime(d.getTime()+(exdays*24*60*60*1000));var expires = "expires="+d.toGMTString();//cookie过期时间document.cookie = cname+"="+cvalue+"; "+expires;//document.cookie设置cookie
}
function getCookie(cname){var name = cname + "=";var ca = document.cookie.split(';');//，读取cookie，并根据分号分割cookiefor(var i=0; i<ca.length; i++) {var c = ca[i].trim();//去除空格if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }}return "";
}
function checkCookie(){var user=getCookie("username");if (user!=""){alert("欢迎 " + user + " 再次访问");}else {user = prompt("请输入你的名字:","");//弹出提示框if (user!="" && user!=null){setCookie("username",user,30);}}
}

jQuary简述
jQuery 允许通过 CSS 选择器来选取元素，允许链接（链式语法：在同一对象上执行多个任务的便捷方法）。
主要的 jQuery 函数是 $() 函数。
向 jQuery 传递 DOM 对象时，jQuery 会返回以 HTML DOM 对象包装的 jQuery 对象。
jQuery 对象拥有的属性和方法，与 DOM 对象的不同。
event.preventDefault();该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。
event.keyCode：键码， event键码对照表
navigator.userAgent()获取用户浏览器是PC还是手机
值为micromessenger：微信浏览器