css
选择器分组：分组元素为
h1,h2,h3{}
继承：h1{font-family:a,b;}
选择器分类：
- 上下文选择器 div li{}
- id选择器 #name{}
- 类选择器 .name{}
- 属性选择器 [title]
css引入样式
- 外部样式
- 内部样式
- 行内内联
css背景
- background-color:
- background-image:url();
- background-position:top,left,bottom,right,center;
百分比，长度值;
4.background-attachment:
文本
- text-indent:文本缩进（长度，百分比，负值）
- text-align:文本位置
justify CENTER - word-spacing:单词间距
- letter-spacing:字母及字间距
- text-transform:字符转换（none uppercase lowercase capitalize）
- text-decoration:（underline overline line-through blink）
- white-space:处理空白符
1. pre-line 合并空白符 保留换行 允许自动换行
2. normal 合并空白符 忽略换行 允许自动换行
3. nowrap 合并空白符 忽略换行 不允许自动换行
4. pre 保留空白符 保留换行 不允许自动换行
5. pre-wrap保留空白符 保留换行 允许自动换行
字体
- font-family:当字体名称中含有空格，$,#等符号时需要用引号
- font-style:italic斜体,normal,obliqu倾斜
- font-variant:改变字体变形
- font-weight:normal 400 blod 700 100~900
- font-size(px em 百分比)
链接
- a:link未被访问
- a:visited已经访问过的
- a:hover鼠标移动到上面的
- a:active正在点击的
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后 - text-decoration去掉下划线
列表list-style
- 列表符号 list-style-type:
list-style-image: - list-style-position:inside 文本内部 outside文本外部
表单 轮廓outline-style
css框模型
margin border padding content
html内联框架
<frameset></frameset><frame></frame>
内联<iframe>载网页内显示页面<iframe src=""></iframe>
用于解决在浏览器窗口的一部分打开界面，设置界面的大小，以及添加新的内容的需求。
首先frameset不可以和body同时使用，但使用noframes包含文本时，文本必须包含在body中。
noresize="noresize"
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
水平rows 垂直cols
iframe可用作链接target的目标，target的属性值为iframe的name,点击target的文字就会载框中显示对应链接的内容。
<p align="center">
<a href="http://www.baidu.com" target="Zhouqingcheng">
wwwb.aidu.com
</a>
</p>
函数
- 定义函数
- function a(){}
- var a=function(){};
如果函数没有return，则也返回结果，结果是undefined - 传入参数无限制，很随意
- arguments
arguments只在函数内部起作用，并且永远指向当前函数的调用者所传入的所有参数。即即使不定义任何参数，也可以拿到参数值
arguments类array,但不是array - rest
为了获取除了已定义参数a,b以外，其余的rest参数，除了让arguments从索引2开始循环至arguments.length该方法外，es6引入了rest方法。
rest方法是，传入的参数先绑定a,b，多余的参数以数组的形式存储在rest中，表现形式如下：...rest
如果传入的参数并没有填满已定义的参数，rest会接收一个空数组的，而不是undefined.
function foo(a, b, ...rest) {
console.log('a = ' + a);
console.log('b = ' + b);
console.log(rest);
}
foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]
foo(1);
// 结果:
// a = 1
// b = undefined
// Array []
变量作用域
- 如果变量只在函数体中定义，则只能在该函数体内使用。
- 不同函数内部定义相同的变量互不干扰。
- 如果嵌套函数内部和外部定义同名变量，则函数从内向外查找，外部不干扰内部。
变量提升
javascript定义函数的特点是，先扫描一遍函数体，将变量的申明语句提升到函数顶部。
变量的申明语句会提升，赋值语句不会提升。
全局作用域
不再任何函数内定义的变量就是全局变量。javascript有一个全局对象window，所有定义的变量都被绑定到window的一个属性，即：
window.name和name是一样的。
同理函数定义的以变量方式定义的函数，同样绑定到window对象 。
javascript只有一个全局作用域，如果在到当前函数中并没有找到对应的申明，则会一层层向上找，如果全局作用域中也没有该变量的定义，则会报错。
命名空间
为了解决不同的js文件使用相同的全局变量，和定义的顶层函数重名带来的问题，把所有的变量和函数绑定到一个全局变量中。
// 唯一的全局变量MYAPP:
var MYAPP = {};
// 其他变量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;
// 其他函数:
MYAPP.foo = function () {
return 'foo';
};
局部作用域
在javascript中，变量的作用域是函数体中，for等语句块是无法定义具有局部作用的变量。
es6引入let定义块级变量。let和var都是用来定义变量的。
es6之前引入常量用全部大写的变量名来标注它是常量。es6引入了const来定义常量，任然是块级作用域。
解构赋值
即对一组变量进行赋值，
- 对数组进行赋值：[],数组层次和位置需要一致，可以忽略部分元素[,,a]=[1,2,3]
- 对对象进行解构赋值，层次保持一致。
var person = {
name: '小明',
age: 20,
gender: 'male',
passport: 'G-12345678',
school: 'No.4 middle school',
address: {
city: 'Beijing',
street: 'No.1 Road',
zipcode: '100001'
}
};
var {name, address: {city, zip}} = person;
name; // '小明'
city; // 'Beijing'
zip; // undefined, 因为属性名是zipcode而不是zip
// 注意: address不是变量，而是为了让city和zip获得嵌套的address对象的属性:
address; // Uncaught ReferenceError: address is not defined
在对象中，如果变量对应的属性不存在，则变量会赋值是undefined,如果要获取的属性名和变量名不同则可以
var person = {
name: '小明',
age: 20,
gender: 'male',
passport: 'G-12345678',
school: 'No.4 middle school'
};
// 把passport属性赋值给变量id:
let {name, passport:id} = person;
name; // '小明'
id; // 'G-12345678'
// 注意: passport不是变量，而是为了让变量id获得passport属性:
passport; // Uncaught ReferenceError: passport is not defined
使用默认值
var {name, single=true} = person;
因为JavaScript引擎把{开头的语句当作了块处理，于是=不再合法。解决方法是用小括号括起来：
// 声明变量:
var x, y;
// 解构赋值:
{x, y} = { name: '小明', x: 100, y: 200};
// 语法错误: Uncaught SyntaxError: Unexpected token =
({x, y} = { name: '小明', x: 100, y: 200});
互换俩值
var x=1,y=2;
[x,y]=[y,x]
快速获取当前页面的用户和地址
var {hostname:domain, pathname:path} = location;
方法
在对象中绑定函数即对象的方法。
在一个方法内部中，this 是一个特殊变量，this指向当前对象。即：this.birth可以拿到xiaoming的birth属性。
- ！要保证this指向正确，必须用obj.xxx()的形式调用！
- 当使用方法重构时，this又会指向undefined(strict模式)，原因是this指针只在age方法的函数内指向xiaoming，在函数内部定义的函数，this又指向undefined了！（在非strict模式下，它重新指向全局对象window！）
修复方法是：在age函数中首先捕获this
var that=this;
age: function () {
var that = this; // 在方法内部一开始就捕获this
function getAgeFromBirth() {
var y = new Date().getFullYear();
return y - that.birth; // 用that而不是this
}
return getAgeFromBirth();
}
apply:虽然在独立的函数调用中，根据是否在strict模式下this指向undefined和window全局对象，但是可以控制this的指向.
apply(this,[]);
this即所指对象，和函数本身的参数。
apply()把参数打包成Array再传入；
call()把参数按顺序传入。
apply动态改变函数的行为，重新指向新的函数。
call方法和apply类似，唯一区别是call方法传参数按顺序。
高阶函数(数组)
map(function(element,index,array));
array.map(String);将数组中的元素转换为字符串。
map迭代数组，修改所有的元素按照回调函数的要求，不修改原数组。
reduce(function(pre,cur,array));
reduce迭代数组，将所有的元素按回调函数的要求，累计为一个值返回，不修改原数组。
filter(function(element,index,array));
filter迭代数组，按回调函数的要求过滤元素，返回一个新数组，不修改原数组。
sort(function());
sort，若不指定回调函数，则按照unicode排序,否则回调函数返回true则调换比较的俩数的位置
闭包
实现一个对Array的求和。
function sum(arr) {
return arr.reduce(function (x, y) {
return x + y;
});
}
sum([1, 2, 3, 4, 5]); // 15
如果不需要立刻求和，而是在后面的代码中，根据需要再计算，可以不返回求和的结果，而是返回求和的函数！
function lazy_sum(arr) {
var sum = function () {
return arr.reduce(function (x, y) {
return x + y;
});
}
return sum;
}
- 当我们调用lazy_sum()时，返回的并不是求和结果，而是求和函数：
var f = lazy_sum([1, 2, 3, 4, 5]); // function sum() - 调用函数f时，才真正计算求和的结果：
f(); // 15
在这个例子中，我们在函数lazy_sum中又定义了函数sum，并且，内部函数sum可以引用外部函数lazy_sum的参数和局部变量，当lazy_sum返回函数sum时，相关参数和变量都保存在返回的函数中，这种称为“闭包（Closure）”的程序结构拥有极大的威力。
请再注意一点，当我们调用lazy_sum()时，每次调用都会返回一个新的函数，即使传入相同的参数：
var f1 = lazy_sum([1, 2, 3, 4, 5]);
var f2 = lazy_sum([1, 2, 3, 4, 5]);
f1 === f2; // false
f1()和f2()的调用结果互不影响。
闭包
function count() {
var arr = [];
for (var i=1; i<=3; i++) {
arr.push(function () {
return i * i;
});
}
return arr;
}
var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];
f1(); // 16
f2(); // 16
f3(); // 16
原因就在于返回的函数引用了变量i，但它并非立刻执行。等到3个函数都返回时，它们所引用的变量i已经变成了4，因此最终结果为16。
返回闭包时牢记的一点就是：返回函数不要引用任何循环变量，或者后续会发生变化的变量。
如果一定要引用循环变量怎么办？方法是再创建一个函数，用该函数的参数绑定循环变量当前的值，无论该循环变量后续如何更改，已绑定到函数参数的值不变：
function count() {
var arr = [];
for (var i=1; i<=3; i++) {
arr.push((function (n) {
return function () {
return n * n;
}
})(i));
}
return arr;
}
var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];
f1(); // 1
f2(); // 4
f3(); // 9
匿名函数
(function (x) { return x * x }) (3);
(function (x) {
return x * x;
})(3);
借助闭包，封装一个私有变量。
在返回的对象中，实现了一个闭包，该闭包携带了局部变量x，并且，从外部代码根本无法访问到变量x。换句话说，闭包就是携带状态的函数，并且它的状态可以完全对外隐藏起来。
function create_counter(initial) {
var x = initial || 0;
return {
inc: function () {
x += 1;
return x;
}
}
}
var c1 = create_counter();
c1.inc(); // 1
c1.inc(); // 2
c1.inc(); // 3
var c2 = create_counter(10);
c2.inc(); // 11
c2.inc(); // 12
c2.inc(); // 13
闭包还可以把多参数的函数变成单参数的函数。
function make_pow(n) {
return function (x) {
return Math.pow(x, n);
}
}
// 创建两个新函数:
var pow2 = make_pow(2);
var pow3 = make_pow(3);
console.log(pow2(5)); // 25
console.log(pow3(7)); // 343
箭头函数
es6新增函数，箭头函数相当于匿名函数，有多种写法：
- 只包含一个表达式，连{ ... }和return都省略掉了。
x=>x*x - 还有一种可以包含多条语句，这时候就不能省略{ ... }和return：
x => {
if (x > 0) {
return x * x;
}
else {
return - x * x;
}
}
- 如果参数不是一个，就需要用括号()括起来：
(x, y) => x * x + y * y - 如果要返回一个对象
x => ({ foo: x })
箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域
箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者obj：
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
return fn();
}
};
obj.getAge(); // 25
注意:由于this在箭头函数中已经按照词法作用域绑定了，所以，用call()或者apply()调用箭头函数时，无法对this进行绑定，即传入的第一个参数被忽略
generator
- 首先函数只能返回一个值，而generator可以返回多个值。
- generator定义类似函数。
function* foo(x) {
yield x + 1;
yield x + 2;
return x + 3;
}
- 调用generator的方法
-
var f=foo();此行为创建generator对象
f.next();
next()方法会执行generator的代码，然后，每次遇到yield x;就返回一个对象{value: x, done: true/false}，然后“暂停”。返回的value就是yield的返回值，done表示这个generator是否已经执行结束了。如果done为true，则value就是return的返回值。
当执行到done为true时，这个generator对象就已经全部执行完毕，不要再继续调用next()了。
for(var x of foo(x)){}
- 用处
- 面向对象实现保存函数状态，用generator实现;
- AjAx的异步回调代码变为同步代码
标准对向
- Date
- 获取系统时间（浏览器从本地操作系统获取时间）
var now = new Date();
now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
now.getFullYear(); // 2015, 年份
now.getMonth(); // 5, 月份，注意月份范围是0~11，5表示六月
now.getDate(); // 24, 表示24号
now.getDay(); // 3, 表示星期三
now.getHours(); // 19, 24小时制
now.getMinutes(); // 49, 分钟
now.getSeconds(); // 22, 秒
now.getMilliseconds(); // 875, 毫秒数
now.getTime(); // 1435146562875, 以number形式表示的时间戳
JavaScript的Date对象月份值从0开始，牢记0=1月，1=2月，2=3月，……，11=12月。
时间戳:时间戳是一个自增的整数，它表示从1970年1月1日零时整的GMT时区开始的那一刻，到现在的毫秒数。
- 创建一个指定日期和时间的Date对象，时间戳
var d = new Date(2015, 5, 19, 20, 15, 30, 123);
var d = new Date(1435146562875);
- 解析一个符合ISO 8601格式的字符串：
var d = Date.parse('2015-06-24T19:49:22.875+08:00');
使用Date.parse()时传入的字符串使用实际月份0112，转换为Date对象后getMonth()获取的月份值为011。
RegExp(正则表达式)
- \d用来匹配数字，\w用来匹配数字和字母;
- \s匹配空白符，\S匹配非空白符
- *匹配任意个字符，+匹配至少一个，{n}匹配n格，{n,m}匹配n~m个,?匹配0或1,.匹配任意字符
**进阶
要做更精确地匹配，可以用[]表示范围，比如：
[0-9a-zA-Z_]可以匹配一个数字、字母或者下划线；
[0-9a-zA-Z_]+可以匹配至少由一个数字、字母或者下划线组成的字符串，比如'a100'，'0_Z'，'js2015'等等；
[a-zA-Z_$][0-9a-zA-Z_$]*可以匹配由字母或下划线、开头，后接任意个由一个数字、字母或者下划线、组成的字符串，也就是JavaScript允许的变量名；
[a-zA-Z_$][0-9a-zA-Z_$]{0, 19}更精确地限制了变量的长度是1-20个字符（前面1个字符+后面最多19个字符）。
A|B可以匹配A或B，所以(J|j)ava(S|s)cript可以匹配'JavaScript'、'Javascript'、'javaScript'或者'javascript'。
表示行的开头，\d表示必须以数字开头。
表示行的结束，\d表示必须以数字结束。
你可能注意到了，js也可以匹配'jsp'，但是加上^js$就变成了整行匹配，就只能匹配'js'了。
使用
- /正则表达式/,
- new RegExp('正则表达式')创建一个RegExp对象。
var re1 = /ABC\-001/;
var re2 = new RegExp('ABC\\-001');
分组：用()表示的就是要提取的分组（Group）
var re = /^(\d{3})-(\d{3,8})$/;
re.exec('010-12345'); // ['010-12345', '010', '12345']
re.exec('010 12345'); // null
如果正则表达式中定义了组，就可以在RegExp对象上用exec()方法提取出子串来。
exec()方法在匹配成功后，会返回一个Array，第一个元素是正则表达式匹配到的整个字符串，后面的字符串表示匹配成功的子串。
exec()方法在匹配失败时返回null。
-
JSON
数据交换格式（类似的还有xml,纯文本格式）
JSON还定死了字符集必须是UTF-8，表示多语言就没有问题了。为了统一解析，JSON的字符串规定必须用双引号""，Object的键也必须用双引号""。
JSON.stringify(xiaoming, ['name', 'skills'], ' ');- 拿到一个JSON格式的字符串，我们直接用JSON.parse()把它变成一个JavaScript对象：
JSON.parse('[1,2,3,true]');
