第二天

作者: 焦迈奇 | 来源:发表于2018-07-23 10:01 被阅读0次

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()时传入的字符串使用实际月份01_{12，转换为Date对象后getMonth()获取的月份值为0}11。

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]');

第二天

css

选择器分组：分组元素为

继承：h1{font-family:a,b;}

选择器分类：

css引入样式

css背景

文本

字体

链接

列表list-style

表单轮廓outline-style

css框模型

html内联框架

函数

变量作用域

变量提升

全局作用域

命名空间

局部作用域

解构赋值

方法

高阶函数(数组)

闭包

闭包

匿名函数

箭头函数

generator

标准对向

RegExp(正则表达式)

JSON

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

第二天

css

选择器分组：分组元素为

继承：h1{font-family:a,b;}

选择器分类：

css引入样式

css背景

文本

字体

链接

列表list-style

表单 轮廓outline-style

css框模型

html内联框架

函数

变量作用域

变量提升

全局作用域

命名空间

局部作用域

解构赋值

方法

高阶函数(数组)

闭包

闭包

匿名函数

箭头函数

generator

标准对向

RegExp(正则表达式)

JSON

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

表单轮廓outline-style