一、css功能（Cascading Style Sheets）
CSS 用于控制网页的样式和布局。
1.内部样式表直接在标签内部定义，使用style属性，写法如下：
<style></style>
2.使用外部样式表时，CSS文件与网页文件(html)是分离开来的。要让某一个网页调用一个外部CSS文件，你需要在网页的部分插入以下内容：
<link rel="stylesheet" type="text/css" href="文件位置/你的CSS文件名.css" />
3.内联样式是直接在html标签上定义该标签的css样式，如：
<div style="width:200px;height:30px;"></div>
生效规则：
- 样式表的元素选择器选择越精确，则其中的样式优先级越高。
id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式 - 对于相同类型选择器指定的样式，在样式表文件中，越靠后的优先级越高。
- 一个元素同时应用多个class，后定义的优先(即近者优先)
- 如果要让某个样式的优先级变高，可以使用!important来指定。
CSS 优先规则1： 最近的祖先样式比其他祖先样式优先级高；
CSS 优先规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
CSS 7 种基础的选择器：
ID 选择器， 如 #id{}
类选择器， 如 .class{}
属性选择器， 如 a[href=“segmentfault.com”]{}
伪类选择器， 如 :hover{}
伪元素选择器， 如 ::before{}
标签选择器， 如 span{}
通配选择器， 如 *{}
CSS 的选择符由上述 7 种基础的选择器或者组合而成，组合的方式有 3 种：
后代选择符： .father .child{}
子选择符： .father > .child{}
相邻选择符: .bro1 + .bro2{}
CSS 优先规则4：计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。
display 属性 none（此元素不会被显示）、block（此元素将显示为块级元素，此元素前后会带有换行符）、inline（默认。此元素会被显示为内联元素，元素前后没有换行符）、inline-block（行内块元素）。
子元素只有在自身没有设定相应的样式参数时，才会继承父元素的。
元素右下角出现黄色三角形中间有感叹号说明这个属性在这里无效。
overflow处理元素属性超出容器尺寸的情况。
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit 规定应该从父元素继承 overflow 属性的值
一些最重要CSS3模块如下：选择器，盒模型，背景和边框，文字特，多列布局，用户界面
-moz代表firefox浏览器私有属性
-ms代表ie浏览器私有属性
-webkit代表safari、chrome私有属性
-o代表opera私有属性
border-radius 一个用于设置所有四个边框- *-半径属性的速记属性
border-image 设置所有边框图像的速记属性
box-shadow 附加一个或多个下拉框的阴影
文本效果
text-shadow，box-shadow，text-overflow，word-wrap，word-break
opacity 属性为按钮添加透明度 opacity: 0.6;
元素的宽度与高度计算方式如下：
width(宽) + padding(内边距) + border(边框) = 元素实际宽度
height(高) + padding(内边距) + border(边框) = 元素实际高度
box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。
如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中
弹性盒子是 CSS3 的一种新的布局模式。
弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
二、html
全写： HyperText Mark-up Language 译名： 超文本标识语言.
通过标签来控制网页的文档、字符和段落等的格式，以及对脚本语言等的调用；纯文本文件；文件扩展名： .html；html文件必须在Web浏览器上运行。
一份 HTML 文件的基本架构 ：
<!doctype html>
<HTML>
<HEAD>
<title>HTML超文本标记语言在线教程</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="author" content="合肥世杰">
<meta name="keywords" content="html,css,asp,jsp,php">
<meta name="description" content="世杰教育网站！">
<meta http-equiv="refresh" content="10">
<meta http-equiv="refresh" content="2;url=http://www.163.com">
<meta http-equiv="Expires" content="01 Jan 2008 00:00:00">
<base href="http://www.sje.com.cn" target="_blank">
<link href="../css.css" rel="stylesheet" type="text/css">
<link rel="fontdef" src="Amelia.pfr">
</HEAD>
<BODY> 网页的内容，很多标记都作用于此
<script src="/jquery.js"></script>
</BODY>
</HTML>
HTML5中表单验证的方法(在提交前，表单会验证控件是否符合设置的要求)
1.在表单控件中将required特性设置为required或者true，必填字段，而且会提供提示
2.类型不匹配 保证控件值与预期类型相匹配(如numbe、email、URL等)，通过指定表单控件的type特性值<input type="email" name="myEmail">
3.格式匹配 根据表单控件上设置的格式规则验证输入是否为有效格式，pattern特性，井赋予适当的匹配规则。<input type="text" name="creditcardnumber" pattern="[0-9]{16}" title="A creditcard number is 16 digits with no spaces or dashes">
4.长度控制 设置maxLength特性 <input type="text" name="limitedText" maxLength="140">
5.最小值 min特性，并赋予允许的最小值 <input type="range" name="ageCheck" min="18">
6.最大值 max特性，并赋予允许的最大值 <input type="range" name="kidAgeCheck" max="12">
7.增量设置 设置step特性，指定数值的增量 <input type="range" name="confidenceLevel" min="0" max="100" step="5">
XMLHttpRequest 是一个浏览器接口，通过它，我们可以使得 Javascript 进行 HTTP (S) 通信。FormData 就是 XMLHttpRequest一个对象，利用它来提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件。
例如：
file = image.files[0];
var formData = new FormData();
formData.append('image', file);
$.ajax({
type: "POST",
url: url,
data: formData,
contentType: false, //告诉jQuery不要去设置Content-Type请求头
headers: {
Accept: "application/json"
},
processData: false, //告诉jQuery不要去处理发送的数据
success: function (response) {
console.log(response)
}
processData设置为false。因为data值是FormData对象，不需要对数据做处理
contentType设置为false，不设置contentType值，因为是由表单构造的FormData对象，且已经声明了属性enctype=“multipart/form-data”，所以这里设置为false
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:
三、bootstrap
文本的颜色：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light
背景颜色：.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light
四、javascript
以on为前缀的属性绑定一个回调，例如onclick
window.οnlοad=function(){//当文档加载完成后，执行}
use strict //如果浏览器支持，开启ECMAScript 5的严格模式
JavaScript是用unicode字符集编写的。区分大小写。
JavaScript标识符由字母、下划线或美元符号($)开始，后续字符由字母、数字、下划线或美元符号。
JavaScript数据类型分为原始类型（primitive type）和对象类型（Object type）。JavaScript原始类型分为数字、字符串、布尔类型。JavaScript有两个特殊的原始值：null（空）和undefined（未定义）。
不在函数内声明的变量称为全局变量，在JavaScript程序中任何地方都可见。
在函数内声明的变量，只在函数内可见。
运算符包括加法（+）、减法（-）、乘法（*）、除法（/）和求余（%）。
返回undefined说明这个属性或元素不存在，如果函数没有返回值，则返回undefined。
在函数体内，局部变量的优先级高于全局变量。
JavaScript为属性访问有两种：
expression.identifier
expression[expression]
===称为严格相等运算符，检查两个操作数是否严格相等；==检查两个操作数是否相等，允许进行数据转换。
delete删除对象属性或数组元素，例如：
delete o.x
delete a[2]
每个对象拥有三个相关的对象特性：
1.对象的原型 对象的属性继承自它的原型对象
2.对象的类 标识对象类型的字符串
3.对象的扩展标记
创建对象方法：
1.对象直接量 var empty = {}
2.关键字new var empty = new Object()
3.Object.create()
查询一个不存在的属性，并不会报错，而是返回undefined
getter和setter属性
var oo = {
name : ‘贤心’,
get sex(){
return ‘man’;
}
};
oo.sex = ‘woman’;
console.log(oo.sex); //结果依然是man
数据属性的4个特性是：值、可写性、枚举、可配置性。
对象的三个属性：原型（prototype）、类（class）和可扩展性（extensible attribute）。
要想创建属性或设置属性，需要调用Object.defineProperty()
Object.defineProperty(obj, prop, descriptor) // 对象、属性、描述符
Object.defineProperty(a, “length”, {writeable:false})
JSON.stringify()序列化
JSON.parse()反序列化
数组元素可以是任意类型，并且同一个数组中的元素可以是不同的类型。
var a = [];
var b = new Array();
push()在数组尾部添加一个元素
pop() 方法将删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。
遍历可以用for()或for( in )方式
arrayObject.join(separator)该字符串是通过把 arrayObject 的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入 separator 字符串而生成的.
arrayObject.reverse()方法用于颠倒数组中元素的顺序
arrayObject.sort(sortby)方法用于对数组的元素进行排序。如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。
function sortNumber(a, b) {
return a - b;
}
var a = [11, 2, -3, 4, 5];
a.sort(sortNumber);
arrayObject.concat(arrayX,arrayX,…,arrayX)方法用于连接两个或多个数组
arrayObject.slice(start,end)方法可从已有的数组中返回选定的元素。
arrayObject.splice(index,howmany,item1,…,itemX) ：index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, …, itemX 可选。向数组添加的新项目。
arrayObject.shift()方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined 值。请注意，该方法不创建新数组，而是直接修改原有的 arrayObject
arrayObject.unshift(newelement1,newelement2,…,newelementX)方法可向数组的开头添加一个或更多元素，并返回新的长度。
every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测;如果所有元素都满足条件，则返回 true。every() 不会对空数组进行检测；不会改变原始数组。
array.every(function(currentValue,index,arr), thisValue)
some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。some() 不会对空数组进行检测；不会改变原始数组。array.some(function(currentValue,index,arr),thisValue)
stringObject.indexOf(searchvalue,fromindex)方法可返回某个指定的字符串值在字符串中首次出现的位置。
Array.isArray(obj)方法用于判断一个对象是否为数组。
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
匿名函数：没有实际名字的函数
(function (){
//由于没有执行该匿名函数，所以不会执行匿名函数体内的语句。
console.log(“张培跃”);
})
如果需要执行匿名函数，在匿名函数后面加上一个括号即可立即执行！
(function (str){
console.log(“str=”+str);
})(“good luck！”)
function前面的圆括号是必须的，JavaScript解析器会将其解析为函数定义表达式，函数后面跟着()，这样定义的函数会立即调用。
闭包就是跨作用域访问变量 —— 内部作用域可以保持对外部作用域中变量的引用从而使得（更）外部作用域可以访问内部作用域中的变量。
闭包引用的外层作用域内的变量依然存在，并且将一直存在，直到执行闭包的的作用域被销毁，这里的局部变量才会被销毁。
为什么需要闭包？
局部变量无法共享和长久的保存，而全局变量可能造成变量污染，所以我们希望有一种机制既可以长久的保存变量又不会造成全局污染。
特点：占用更多内存；不容易被释放
如何使用？
1.定义外层函数，封装被保护的局部变量
2.定义内层函数，执行对外部函数变量的操作
3.外层函数返回内层函数的对象，并且外层函数被调用，结果保存在一个全局的变量中
function fn(){
var num = 3;
return function(){
var n = 0;
console.log(++n);
console.log(++num);
}
}
var fn1 = fn();
fn1();
fn1();
输出： 1 4 1 5
匿名函数作为fn的返回值被赋值给了fn1，这时候相当于fn1=function(){var n = 0 … }，并且匿名函数内部引用着fn里的变量num，所以变量num无法被销毁，而变量n是每次被调用时新创建的，所以每次fn1执行完后它就把属于自己的变量连同自己一起销毁，于是乎最后就剩下孤零零的num，于是这里就产生了内存消耗的问题。
call 和 apply 都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向。
function fruit(){}
fruit.prototype = {
color: ‘red’,
say: function(){
console.log(“My color is:” + this.color);
}
}
var apple = new fruit();
apple.say();
var banana = {
color: ‘yellow’,
};
apple.say.call(banana);
apple.say.apply(banana);
输出：My color is:red
My color is:yellow
My color is:yellow
可以看出 call 和 apply 是为了动态改变 this 而出现的，当一个 object 没有某个方法（本栗子中banana没有say方法），但是其他的有（本栗子中apple有say方法），我们可以借助call或apply用其它对象的方法来操作。
call 需要把参数按顺序传递进去，而 apply 则是把参数放在数组里。
var f = function(){};
var o = new f();
console.log(’–’ + (o.constructor == f));
输出：true
正则表达
i 执行不区分大小写匹配
g 执行全局匹配，即找出所有的匹配
m 多行匹配，^匹配一行的开头和字符串的开头， $匹配行的结束和字符串的结束。
history是你浏览过的网页的url（简单的说就是网址）的集合，也就是你的浏览器里的那个历史记录。它在js里是一个内置对象，就跟document一样，它有自己的方法，go就是其中一个。javascript:history.go(-1)就是返回之前的页面。
javascript对象分为三种类型：用户定义对象、内建对象（javascript语言里面的对象）、浏览器提供的对象。
DOM把文档表示为一颗家谱树。并使用parent（父）、child（子）、sibling（兄弟）等标记表明家族成员之间的关系。
DOM的原子是元素节点(element node)，标签的名字就是元素的名字。
元素只是结构，大部分内容存放在文本中，文本节点（text node）总是包含在元素节点中。
属性节点（attribute node）用来对元素做更具体的描述。
继承是css中一项强大的技术，子元素会自动获得父元素的样式。
document.write(exp1,exp2,exp3,…)方法可向文档写入 HTML 表达式或 JavaScript 代码。
innerHTML 属性可以用来读或者写给定元素的html内容。
浏览器中的网页由以下三层的信息构成的一个共同体：结构层（html标记语言）、表示层（css描述页面如何呈现）、行为层（负责内容响应事件）。
CSS样式属性名字有多少连字符，DOM一律采用驼峰法来表示他们。
css的属性background-color对应DOM的backgroundColor。
外部样式表声明的样式不会进入到style对象，<head>部分声明的样式也是如此，DOM的style属性获取不到这两种设置的样式的值。
JavaScript由三个不同的部分组成：核心（ECMAScript）、文档对象模型（DOM）、浏览器对象模型（BOM）
相等（==）和不相等（!=）----------先转换后比较
全等（===）和不全等（!==）------------------仅比较不转换
函数不介意传进来多少个参数，也不介意传进来的参数是什么类型，函数体可以通过arguments对象来访问参数数组。
一个变量向另一个变量复制引用类型的值，复制的其实是指针，两个变量始终指向同一个对象。
所有变量都存在于一个作用域（执行环境）中，执行环境决定变量的生命周期，变量的访问权限：1、执行环境分为全局环境和函数环境；2、每次进入一个执行环境，就会创建一个用于搜索变量和函数的作用链；3、函数的环境不仅有权访问函数作用域的变量，有权访问父环境及全局环境的变量；4、全局环境只能访问全局变量，不能访问局部环境的变量；5、变量的执行环境有助于确定何时释放内存。
垃圾收集器：离开作用域的值被标记为可回收；使用标记清除算法；
数组定义了5个迭代方法：
every() : 对数组中的每一项执行函数，如果每一项都返回 true ,则该方法返回 true。
some(): 对数组中的每一项执行函数，只要有一项返回了 true ,则该方法返回 true。
filter(): 对数组中的每一项执行函数，把里面返回 true 的项，组成一个数组返回。
forEach() 对数组中的每一项执行函数，没有返回值。类似于for循环。
map() 对数组中的每一项执行函数，返回（处理后的）每一项。
以上5种方法，都不会改变数组本身。
g 全局匹配
i 忽略大小写
m 让开始和结束字符（^ 和 $）工作在多行模式（也就是，^ 和 $ 可以匹配字符串中每一行的开始和结束（行是由 \n 或 \r 分割的），而不只是整个输入字符串的最开始和最末尾处。
this引用的是函数据以执行的环境对象——或者也可以说是 this 值
函数也有属性和方法,每个函数都包含两个属性：length 和 prototype。其中，length 属性表示函数希望接收的命名参数的个数。
每个函数都包含两个非继承而来的方法：apply()和 call()。这两个方法的用途都是在特定的作用域中调用函数，实际上等于设置函数体内 this 对象的值。
call(), apply()和bind()是Function.prototype下的方法，都是用于改变函数运行时上下文，最终的返回值是你调用的方法的返回值，若该方法没有返回值，则返回undefined。
call()接收的是参数列表，而apply()则接收参数数组
bind()是返回一个新函数，供以后调用，而apply()和call()是立即调用。
bind()这个方法会创建一个函数的实例，其 this 值会被绑定到传给 bind()函数的值。
在全局作用域中声明的所有变量和函数，就都成为了 window对象的属性。
min()和 max()方法用于确定一组数值中的最小值和最大值
Math.ceil()执行向上舍入，即它总是将数值向上舍入为最接近的整数；
Math.floor()执行向下舍入，即它总是将数值向下舍入为最接近的整数；
Math.round()执行标准舍入，即它总是将数值四舍五入为最接近的整数
Math.random()方法返回大于等于 0 小于 1 的一个随机数。
var person = {
name: “Nicholas”,
age: 29,
job: “Software Engineer”,
sayName: function(){
alert(this.name);
}
};
ECMAScript 中有两种属性：数据属性和访问器属性
数据属性包含一个数据值的位置。在这个位置可以读取和写入值。数据属性有 4 个描述其行为的特性。
Configurable：表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特
性，或者能否把属性修改为访问器属性。像前面例子中那样直接在对象上定义的属性，它们的这个特性默认值为 true。
Enumerable：表示能否通过 for-in 循环返回属性。像前面例子中那样直接在对象上定
义的属性，它们的这个特性默认值为 true。
Writable：表示能否修改属性的值。像前面例子中那样直接在对象上定义的属性，它们的
这个特性默认值为 true。
Value：包含这个属性的数据值。读取属性值的时候，从这个位置读；写入属性值的时候，把新值保存在这个位置。这个特性的默认值为 undefined。
在读取访问器属性时，会调用 getter 函数，这个函数负责返回有效的值；在写入访问器属性时，会调用setter 函数并传入新值，这个函数负责决定如何处理数据。访问器属性有如下 4 个特性：
Configurable：表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特
性，或者能否把属性修改为数据属性。对于直接在对象上定义的属性，这个特性的默认值为true
Enumerable：表示能否通过 for-in 循环返回属性。对于直接在对象上定义的属性，这
个特性的默认值为 true
Get：在读取属性时调用的函数。默认值为 undefined
Set：在写入属性时调用的函数。默认值为 undefined
var book = {
_year: 2004,
edition: 1
};
Object.defineProperty(book, "year", {
get: function(){
return this._year;
},
set: function(newValue){
if (newValue > 2004) {
this._year = newValue;
this.edition = newValue - 2004;
}
}
});
Object.defineProperties()方法，利用这个方法可以通过描述符一次定义多个属性。
工厂模式：
function createPerson(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};
return o;
}
var person1 = createPerson(“Nicholas”, 29, “Software Engineer”);
var person2 = createPerson(“Greg”, 27, “Doctor”);
使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。
ECMAScript 只支持实现继承，而且其实现继承主要是依靠原型链来实现的。
prototype定义
每个函数都有一个prototype属性，这个属性是指向一个对象的引用，这个对象称为原型属性。原型对象包含实例共享的方法和属性，这个函数用作构造函数时调用，使用new操作符调用的时候，新创建的对象会从原型对象上得到同样的属性和方法。
__proto__是一个对象拥有的内置属性，是js内部使用寻找原型链的属性，通过该属性可以允许使用实例对象直接访问原型。
prototype是函数的内置属性，__proto__是对象的内置属性
闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式，就是在一个函数内部创建另一个函数。
匿名函数赋值给变量 var box=function(){return ‘lee’;};
闭包会引用包含函数的整个活动对象，而其中包含着 element。即使闭包不直接引用 element，包含函数的活动对象中也仍然会保存一个引用。因此，有必要把 element 变量设置为 null。这样就能够解除对 DOM 对象的引用，顺利地减少其引用数，确保正常回收其占用的内存。
当在函数内部定义了其他函数时，就创建了闭包。闭包有权访问包含函数内部的所有变量，原理如下：1、在后台执行环境中，闭包的作用域链包含着它自己的作用域、包含函数的作用域和全局作用域；2、函数的作用域及其所有变量都会在函数执行结束后被销毁；3、当函数返回了一个闭包时，这个函数的作用域将会一直在内存中保存到闭包不存在为止
局部变量其生命周期，将会随着函数调用的结束而结束掉其生命，也就是内存被销毁。
BOM 的核心对象是 window，它表示浏览器的一个实例。
如果页面中包含框架，则每个框架都拥有自己的 window 对象，并且保存在 frames 集合中。在 frames集合中，可以通过数值索引（从 0 开始，从左至右，从上到下）或者框架名称来访问相应的 window 对象。
window.open()方法既可以导航到一个特定的 URL，也可以打开一个新的浏览器窗口。这个方法可以接收 4 个参数：要加载的 URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth
浏览器通过 alert()、confirm()和 prompt()方法可以调用系统对话框向用户显示消息。
location 是最有用的 BOM 对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。
host “www.wrox.com:80” 返回服务器名称和端口号（如果有）
hostname “www.wrox.com” 返回不带端口号的服务器名称
href “http:/www.wrox.com” 返回当前加载页面的完整URL。而location对象的
toString()方法也返回这个值
pathname “/WileyCDA/” 返回URL中的目录和（或）文件名
port “8080” 返回URL中指定的端口号。如果URL中不包含端口号，则
这个属性返回空字符串
protocol “http:” 返回页面使用的协议。通常是http:或https:
search “?q=javascript” 返回URL的查询字符串。这个字符串以问号开头
navigator 对象，现在已经成为识别客户端浏览器的事实标准。
appCodeName 浏览器的名称。通常都是Mozilla，即使在非Mozilla浏览器中也是如此
appMinorVersion 次版本信息
appName 完整的浏览器名称
appVersion 浏览器的版本。一般不与实际的浏览器版本对应
buildID 浏览器编译版本
cookieEnabled 表示cookie是否启用
cpuClass 客户端计算机中使用的CPU类型（x86、68K、Alpha、PPC或Other）
javaEnabled() 表示当前浏览器中是否启用了Java
language 浏览器的主语言
mimeTypes 在浏览器中注册的MIME类型数组
onLine 表示浏览器是否连接到了因特网
opsProfile 似乎早就不用了。查不到相关文档
oscpu 客户端计算机的操作系统或使用的CPU
platform 浏览器所在的系统平台
plugins 浏览器中安装的插件信息的数组
preference() 设置用户的首选项
product 产品名称（如 Gecko）
screen 对象基本上只用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等。
history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。
使用 go()方法可以在用户的历史记录中任意跳转，可以向后也可以向前。这个方法接受一个参数，表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转（类似于单击浏览器的“后退”按钮），正数表示向前跳转（类似于单击浏览器的“前进”按钮）。
history.go(-1); //后退一页
history.go(1); //前进一页
所有节点类型都继承自 Node
Element 节点具有以下特征：
nodeType 的值为 1；
nodeName 的值为元素的标签名；
nodeValue 的值为 null；
parentNode 可能是 Document 或 Element；
其子节点可能是 Element、Text、Comment、ProcessingInstruction、CDATASection 或
EntityReference。
Document 节点具有下列特征：
nodeType 的值为 9；
nodeName 的值为"#document"；
nodeValue 的值为 null；
parentNode 的值为 null；
ownerDocument 的值为 null；其子节点可能是一个 DocumentType（最多一个）、Element（最多一个）、ProcessingInstruction或 Comment
操作特性的DOM 方法主要有三个，分别是 getAttribute()、setAttribute()和 removeAttribute()。
根据 HTML5 规范，自定义特性应该加上 data-前缀以便验证。
Text 节点具有以下特征：
nodeType 的值为 3；
nodeName 的值为"#text"；
nodeValue 的值为节点所包含的文本；
parentNode 是一个 Element；
不支持（没有）子节点
注释在 DOM 中是通过 Comment 类型来表示的。Comment 节点具有下列特征：
nodeType 的值为 8；
nodeName 的值为"#comment"；
nodeValue 的值是注释的内容；
parentNode 可能是 Document 或 Element；
不支持（没有）子节点。
CDATASection 节点具有下列特征：
nodeType 的值为 4；
nodeName 的值为"#cdata-section"；
nodeValue 的值是 CDATA 区域中的内容；
parentNode 可能是 Document 或 Element；
不支持（没有）子节点。
理解 NodeList 及其“近亲”NamedNodeMap 和 HTMLCollection，是从整体上透彻理解 DOM 的关键所在。这三个集合都是“动态的”；换句话说，每当文档结构发生变化时，它们都会得到更新。
DOM 由各种节点构成，简要总结如下。
最基本的节点类型是 Node，用于抽象地表示文档中一个独立的部分；所有其他类型都继承自Node。
Document 类型表示整个文档，是一组分层节点的根节点。在 JavaScript 中，document 对象是Document 的一个实例。使用 document 对象，有很多种方式可以查询和取得节点。
Element 节点表示文档中的所有 HTML 或 XML 元素，可以用来操作这些元素的内容和特性。
DOM 操作往往是 JavaScript 程序中开销最大的部分，而因访问 NodeList 导致的问题为最多。NodeList 对象都是“动态的”，这就意味着每次访问NodeList 对象，都会运行一次查询。有鉴于此，最好的办法就是尽量减少 DOM 操作。
querySelector()方法接收一个 CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回 null。
querySelectorAll()方法接收的参数与 querySelector()方法一样，都是一个 CSS 选择符，但返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个 NodeList 的实例。
Document 的 readyState 属性有两个可能的值：loading，正在加载文档；complete，已经加载完文档。
postMessage是html5新增的一个解决跨域的一个方法
postMessage(data,origin)方法接受两个参数
1.data:要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。
2.origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以建参数设置为"*"，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。
例子：
<div>
<iframe id="child" src="http://lsLib.com/lsLib.html"></iframe>
</div>
window.onload=function(){
window.frames[0].postMessage('getcolor','http://lslib.com');
}
接收消息
window.addEventListener('message',function(e){
if(e.source!=window.parent) return;
var color=container.style.backgroundColor;
window.parent.postMessage(color,'*');
},false);
JavaScript 与 HTML 之间的交互是通过事件实现的。
事件冒泡：即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。
事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。
“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
事件就是用户或浏览器自身执行的某种动作。诸如 click、load 和 mouseover，都是事件的名字。而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以"on"开头。
在这个函数内部，this 值等于事件的目标元素，例如
每个元素（包括 window 和 document）都有自己的事件处理程序属性，这些属性通常全部小写，例如 onclick。
也可以删除通过 DOM0 级方法指定的事件处理程序，只要像下面这样将事件处理程序属性的值设置为 null 即可：btn.onclick = null;
“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和 removeEventListener()。所有 DOM 节点中都包含这两个方法，并且它们都接受 3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数。
通过 addEventListener()添加的事件处理程序只能使用 removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过 addEventListener()添加的匿名函数将无法移除。
在 DOM 事件流中，实际的目标（
attachEvent()和 detachEvent()这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数。
var btn = document.getElementById(“myBtn”);
btn.attachEvent(“onclick”, function(){
alert(“Clicked”);
});
使用 attachEvent()添加的事件可以通过 detachEvent()来移除，条件是必须提供相同的参数。
event 对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法也不一样。
bubbles Boolean 只读 表明事件是否冒泡
cancelable Boolean 只读 表明是否可以取消事件的默认行为
currentTarget Element 只读 其事件处理程序当前正在处理事件的那个元素
defaultPrevented Boolean 只读 为 true 表示已经调用了 preventDefault()
（DOM3级事件中新增）
detail Integer 只读 与事件相关的细节信息
eventPhase Integer 只读 调用事件处理程序的阶段：1表示捕获阶段，2表
示“处于目标”，3表示冒泡阶段
preventDefault() Function 只读 取消事件的默认行为。如果cancelable是
true，则可以使用这个方法
stopImmediatePropagation() Function 只读 取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用（DOM3级事件中新增）
stopPropagation() Function 只读 取消事件的进一步捕获或冒泡。如果bubbles
为true，则可以使用这个方法
target Element 只读 事件的目标
trusted Boolean 只读 为true表示事件是浏览器生成的。为false表
示事件是由开发人员通过 JavaScript 创建的（DOM3级事件中新增）
type String 只读 被触发的事件的类型
view AbstractView 只读 与事件关联的抽象视图。等同于发生事件的window对象
只有在事件处理程序执行期间，event 对象才会存在；一旦事件处理程序执行完
成，event 对象就会被销毁。
“DOM3级事件”规定了以下几类事件：
UI（User Interface，用户界面）事件，当用户与页面上的元素交互时触发；
焦点事件，当元素获得或失去焦点时触发；
鼠标事件，当用户通过鼠标在页面上执行操作时触发；
滚轮事件，当使用鼠标滚轮（或类似设备）时触发；
文本事件，当在文档中输入文本时触发；
键盘事件，当用户通过键盘在页面上执行操作时触发；
合成事件，当为 IME（Input Method Editor，输入法编辑器）输入字符时触发；
变动（mutation）事件，当底层 DOM 结构发生变化时触发。
在使用removeChild()或replaceChild()从DOM中删除节点时，首先会触发DOMNodeRemoved事件。这个事件的目标（event.target）是被删除的节点，而 event.relatedNode 属性中包含着对目标节点父节点的引用。在这个事件触发时，节点尚未从其父节点删除，因此其 parentNode 属性仍然指向父节点（与 event.relatedNode 相同）。这个事件会冒泡，因而可以在 DOM 的任何层次上面处理它。
添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。首先，每个
函数都是对象，都会占用内存；内存中的对象越多，性能就越差。其次，必须事先指定所有事件处理程序而导致的 DOM 访问次数，会延迟整个页面的交互就绪时间。
1.事件委托
只指定一个事件处理程序，就可以管理某一类型的所有事件。
<ul id="myLinks">
<li id="goSomewhere">Go somewhere</li>
<li id="doSomething">Do something</li>
<li id="sayHi">Say hi</li>
</ul>
对所有可单击的元素都采用这种方式，那么结果就会有数不清的代码用于添加事件处理程序。此时，可以利用事件委托技术解决这个问题。使用事件委托，只需在DOM 树中尽量最高的层次上添加一个事件处理程序，如下面的例子所示。
var list = document.getElementById("myLinks");
EventUtil.addHandler(list, "click", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch(target.id){
case "doSomething":
document.title = "I changed the document's title";
break;
case "goSomewhere":
location.href = "http://www.wrox.com";
break;
case "sayHi":
alert("hi");
break;
}
});
使用 Canvas 绘图
<canvas id="drawing" width=" 200" height="200">A drawing of something.</canvas>
要在这块画布（canvas）上绘图，需要取得绘图上下文。而取得绘图上下文对象的引用，需要调用getContext()方法并传入上下文的名字。传入"2d"，就可以取得 2D 上下文对象。
var drawing = document.getElementById("drawing");
if (drawing.getContext){ //确定浏览器支持<canvas>元素
var context = drawing.getContext("2d");
}
使用 toDataURL()方法，可以导出在元素上绘制的图像。这个方法接受一个参数，即图像的 MIME 类型格式，而且适合用于创建图像的任何上下文。
var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext){
//取得图像的数据 URI
var imgURI = drawing.toDataURL("image/png");
//显示图像
var image = document.createElement("img");
image.src = imgURI;
document.body.appendChild(image);
}
2D 上下文的坐标开始于元素的左上角，原点坐标是(0,0)。所有坐标值都基于这个原点计算，x 值越大表示越靠右，y 值越大表示越靠下。
2D 上下文的两种基本绘图操作是填充和描边。
操作的结果取决于两个属性：fillStyle 和 strokeStyle。
var drawing = document.getElementById(“drawing”);
//确定浏览器支持元素
if (drawing.getContext){
var context = drawing.getContext("2d");
context.strokeStyle = "red";
context.fillStyle = "#0000ff";
}
矩形是唯一一种可以直接在 2D 上下文中绘制的形状。与矩形有关的方法包括 fillRect()、
strokeRect()和 clearRect()。这三个方法都能接收 4 个参数：矩形的 x 坐标、矩形的 y 坐标、矩形宽度和矩形高度。
2D 绘制上下文支持很多在画布上绘制路径的方法。通过路径可以创造出复
杂的形状和线条。要绘制路径，首先必须调用 beginPath()方法，表示要开始
绘制新路径。然后，再通过调用下列方法来实际地绘制路径。
arc(x, y, radius, startAngle, endAngle, counterclockwise)：以(x,y)为圆心绘
制一条弧线，弧线半径为 radius，起始和结束角度（用弧度表示）分别为 startAngle 和
endAngle。
arcTo(x1, y1, x2, y2, radius)：从上一点开始绘制一条弧线，到(x2,y2)为止，并且以
给定的半径 radius 穿过(x1,y1)。
bezierCurveTo(c1x, c1y, c2x, c2y, x, y)：从上一点开始绘制一条曲线，到(x,y)为
止，并且以(c1x,c1y)和(c2x,c2y)为控制点。
lineTo(x, y)：从上一点开始绘制一条直线，到(x,y)为止。
moveTo(x, y)：将绘图游标移动到(x,y)，不画线。
quadraticCurveTo(cx, cy, x, y)：从上一点开始绘制一条二次曲线，到(x,y)为止，并
且以(cx,cy)作为控制点。
rect(x, y, width, height)：从点(x,y)开始绘制一个矩形，宽度和高度分别由 width 和
height 指定。
即绘制一个不带数字的时钟表盘。
var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext){
var context = drawing.getContext("2d");
//开始路径
context.beginPath();
//绘制外圆
context.arc(100, 100, 99, 0, 2 * Math.PI, false);
//绘制内圆
context.moveTo(194, 100);
context.arc(100, 100, 94, 0, 2 * Math.PI, false);
//绘制分针
context.moveTo(100, 100);
context.lineTo(100, 15);
//绘制时针
context.moveTo(100, 100);
context.lineTo(35, 100);
//描边路径
context.stroke();
}
错误处理与调试
引入了 try-catch 和 throw 语句以及一些错误类型，意在让开发人员能够适当地处理错误。
try{
// 可能会导致错误的代码
} catch(error){
// 在错误发生时怎么处理
} finally {
return 0;
}
ECMA-262 定义了下列 7 种错误类型：
Error
EvalError
RangeError
ReferenceError
SyntaxError
TypeError
URIError
其中，Error 是基类型，其他错误类型都继承自该类型。
需要关注三种错误：类型转换错误 ，数据类型错误，通信错误
可以通过 console 对象向 JavaScript 控制台中写入消息，这个对象具有下列方法：
error(message)：将错误消息记录到控制台
info(message)：将信息性消息记录到控制台
log(message)：将一般消息记录到控制台
warn(message)：将警告消息记录到控制台
JavaScript 与 XML
所有浏览器都内置了对 XML 的原生支持（XML DOM）
在解析 XML 之前，首先必须创建一个 DOMParser 的实例，然后再调用
parseFromString()方法。
var parser = new DOMParser();
var xmldom = parser.parseFromString("", “text/xml”);
var anotherChild = xmldom.createElement(“child”);
xmldom.documentElement.appendChild(anotherChild);
var children = xmldom.getElementsByTagName(“child”);
JSON 的语法可以表示以下三种类型的值：
简单值：使用与 JavaScript 相同的语法，可以在 JSON 中表示字符串、数值、布尔值和 null。但 JSON 不支持 JavaScript 中的特殊值 undefined
对象：对象作为一种复杂数据类型，表示的是一组无序的键值对儿。而每个键值对儿中的值可以是简单值，也可以是复杂数据类型的值
数组：数组也是一种复杂数据类型，表示一组有序的值的列表，可以通过数值索引来访问其中的值。数组的值也可以是任意类型——简单值、对象或数组
JavaScript 字符串与 JSON 字符串的最大区别在于，JSON 字符串必须使用双引号。
JSON 对象有两个方法：stringify()和 parse()。在最简单的情况下，这两个方法分别用于把JavaScript 对象序列化为 JSON 字符串和把 JSON 字符串解析为原生 JavaScript 值。
负责 Ajax 运作的核心对象是 XMLHttpRequest（XHR）对象。
检索一个undefined值会导致TypeError异常。
delete运算符可以用来删除对象的属性，delete arr[“book”];
对象字面量产生的对象连接到Object.prototype；函数对象连接到Function.prototype。
除了声明时定义的形式的参数，每个函数接收两个附加的参数：this和arguments。
实际参数超出，超出的参数将会被忽略；实际参数缺少，缺少的参数被替换为undefined。
一个函数总是能返回一个值，如果没有指定返回值，则返回undefined。
五. JQuery
$()函数会返回一个新的jQuery对象实例，它是我们从现在开始就要打交道的基
本的构建块。jQuery对象中会封装零个或多个DOM元素，并允许我们以多种不同的方式与这些DOM元素进行交互。
.val() 能够取到 针对text，hidden可输入的文本框的value值;
.attr(‘value’) 可以取到html元素中所设置的属性 value的值，不能获取动态的如input type=“text” 的文本框手动输入的值。
jQuery插件开发方式主要有三种：
1.通过
.fn 向jQuery添加新的方法
3.通过$.widget()应用jQuery UI的部件工厂方式创建
$.extend({
say: function(name) {
console.log(name + “;good-------------”);
}
});
$.sayHello(); //调用
$.sayHello(‘Wayou’); //带参调用
$.fn.myplugin = function() {
console.log(“plugin------------”);
}
$(function(){
$(“body”).myplugin();
})
$.fn.myPlugin = function(options) {
var defaults = {
‘color’: ‘red’,
‘fontSize’: ‘12px’
};
var settings = $.extend({},defaults, options);//将一个空对象做为第一个参数
return this.css({
‘color’: settings.color,
‘fontSize’: settings.fontSize
});
}
将插件的所有方法属性包装到一个对象上，用面向对象的思维来进行开发，无疑会使工作轻松很多。
;(function($, window, document,undefined) {
//定义Beautifier的构造函数
var Beautifier = function(ele, opt) {
this.$element = ele,
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration': 'none'
},
this.options = $.extend({}, this.defaults, opt)
}
//定义Beautifier的方法
Beautifier.prototype = {
beautify: function() {
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'textDecoration': this.options.textDecoration
});
}
}
//在插件中使用Beautifier对象
$.fn.myPlugin = function(options) {
//创建Beautifier的实体
var beautifier = new Beautifier(this, options);
//调用其方法
return beautifier.beautify();
}
})(jQuery, window, document);
一个安全，结构良好，组织有序的插件编写完成。
jquery官方给了一套对象级别开发插件的模板：
;(function ($) {
$.fn.plugin=function (options) {
var defaults={
//各种参数、各种属性
};
//options合并到defaults上,defaults继承了options上的各种属性和方法,将所有的赋值给endOptions
var endOptions=$.extend({}, this.defaults,options);
$(this).each(function () {
//实现功能的代码
});
};
})(jQuery);
AMD规范就是其中比较著名一个，全称是Asynchronous Module Definition，即异步模块加载机制。
AMD规范简单到只有一个API，即define函数：define([module-name?], [array-of-dependencies?], [module-factory-or-object]);
其中：
module-name: 模块标识，可以省略。
array-of-dependencies: 所依赖的模块，可以省略。
module-factory-or-object: 模块的实现，或者一个JavaScript对象。
