如果把return语句拆成两行：

function foo() {
    return
        { name: 'foo' };
}

foo(); // undefined

由于JavaScript引擎在行末自动添加分号的机制，上面的代码实际上变成了：

function foo() {
    return; // 自动添加了分号，相当于return undefined;
        { name: 'foo' }; // 这行语句已经没法执行到了
}

所以正确的多行写法是：

function foo() {
    return { // 这里不会自动加分号，因为{表示语句尚未结束
        name: 'foo'
    };
}

5、传递方式

参数 通过 值传递

函数调用中的参数（parameter）是函数的参数（argument）。

JavaScript 参数通过值传递：函数只知道值，而不是参数的位置。

如果函数改变了参数的值，它不会改变参数的原始值。

参数的改变在函数之外是不可见的。

对象 是由 引用传递 的

在 JavaScript 中，对象引用是值。

正因如此，对象的行为就像它们通过引用来传递：

如果函数改变了对象属性，它也改变了原始值。

对象属性的改变在函数之外是可见的。

6、变量的作用域

在JavaScript中，用var申明的变量实际上是有作用域的。

如果一个变量在函数体内部申明，则该变量的作用域为整个函数体，在函数体外不可引用该变量：

'use strict';

function foo() {
    var x = 1;
    x = x + 1;
}

x = x + 2; // ReferenceError! 无法在函数体外引用变量x

1、不同函数的同名变量

如果两个不同的函数各自申明了同一个变量，那么该变量只在各自的函数体内起作用。换句话说，不同函数内部的同名变量互相独立，互不影响：

'use strict';

function foo() {
    var x = 1;
    x = x + 1;
}

function bar() {
    var x = 'A';
    x = x + 'B';
}

2、嵌套函数的同名变量

由于JavaScript的函数可以嵌套，此时，内部函数可以访问外部函数定义的变量，反过来则不行：

'use strict';

function foo() {
    var x = 1;
    function bar() {
        var y = x + 1; // bar可以访问foo的变量x!
    }
    var z = y + 1; // ReferenceError! foo不可以访问bar的变量y!
}

JavaScript的函数在查找变量时从自身函数定义开始，从“内”向“外”查找。如果内部函数定义了与外部函数重名的变量，则内部函数的变量将“屏蔽”外部函数的变量。

'use strict';

function foo() {
    var x = 1;
    function bar() {
        var x = 'A';
        console.log('x in bar() = ' + x); // 'A'
    }
    console.log('x in foo() = ' + x); // 1
    bar();
}

foo();  //x in foo() = 1      x in bar() = A

这说明JavaScript的函数在查找变量时从自身函数定义开始，从“内”向“外”查找。如果内部函数定义了与外部函数重名的变量，则内部函数的变量将“屏蔽”外部函数的变量。

3、变量提升

JavaScript的函数定义有个特点，它会先扫描整个函数体的语句，把所有申明的变量“提升”到函数顶部：

'use strict';

function foo() {
    var x = 'Hello, ' + y;
    console.log(x);
    var y = 'Bob';
}

foo();

虽然是strict模式，但语句var x = 'Hello, ' + y; 并不报错，原因是变量y在稍后申明了。但是console.log显示Hello, undefined，说明变量y的值为undefined。这正是因为JavaScript引擎自动提升了变量y的声明，但不会提升变量y的赋值。

对于上述foo()函数，JavaScript引擎看到的代码相当于：

function foo() {
    var y; // 提升变量y的申明，此时y为undefined
    var x = 'Hello, ' + y;
    console.log(x);
    y = 'Bob';
}

由于JavaScript的这一怪异的“特性”，我们在函数内部定义变量时，请严格遵守“在函数内部首先申明所有变量”这一规则。最常见的做法是用一个var申明函数内部用到的所有变量：

function foo() {
    var
        x = 1, // x初始化为1
        y = x + 1, // y初始化为2
        z, i; // z和i为undefined
    // 其他语句:
    for (i=0; i<100; i++) {
        ...
    }
}

4、全局作用域

不在任何函数内定义的变量就具有全局作用域。实际上，JavaScript默认有一个全局对象window，全局作用域的变量实际上被绑定到window的一个属性：

'use strict';

var course = 'Learn JavaScript';
alert(course); // 'Learn JavaScript'
alert(window.course); // 'Learn JavaScript'

因此，直接访问全局变量course和访问window.course是完全一样的。

你可能猜到了，由于函数定义有两种方式，以变量方式var foo = function () {}定义的函数实际上也是一个全局变量，因此，顶层函数的定义也被视为一个全局变量，并绑定到window对象：

'use strict';

function foo() {
    alert('foo');
}

foo(); // 直接调用foo()
window.foo(); // 通过window.foo()调用

我们每次直接调用的alert()函数其实也是window的一个变量：

'use strict';

window.alert('调用window.alert()');
// 把alert保存到另一个变量:
var old_alert = window.alert;
// 给alert赋一个新函数:
window.alert = function () {} 

alert('无法用alert()显示了!');  //此时alert()是个空函数，能干掉系统函数，JS太随意了！

// 恢复alert:
window.alert = old_alert;   //alert又重新指向回去
alert('又可以用alert()了!');     

这说明JavaScript实际上只有一个全局作用域。任何变量（函数也视为变量），如果没有在当前函数作用域中找到，就会继续往上查找，最后如果在全局作用域中也没有找到，则报ReferenceError错误（引用异常）。

5、名字空间(解决全局变量冲突)

全局变量会绑定到window上，不同的JavaScript文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，都会造成命名冲突，并且很难被发现。

减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中。例如：

// 唯一的全局变量MYAPP:
var MYAPP = {};

// 其他变量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;

// 其他函数:
MYAPP.foo = function () {
    return 'foo';
};

把自己的代码全部放入唯一的名字空间MYAPP中，会大大减少全局变量冲突的可能。

许多著名的JavaScript库都是这么干的：jQuery，YUI，underscore等等。

6、局部作用域

由于JavaScript的变量作用域实际上是函数内部，我们在for循环等 语句块中 是无法定义具有局部作用域的变量的：

'use strict';

function fx() {
    for (var i=0; i<100; i++) { };
    console.log(i += 100); // 仍然可以引用变量i  ，i=200
}

为了解决块级作用域，ES6引入了新的关键字let，用let替代var可以申明一个块级作用域的变量：

'use strict';

function fx() {
    var sum = 0;
    for (let i=0; i<100; i++) {
        sum += i;
    }
    // SyntaxError:
    i += 1;     //此处无法调用i
}

7、常量

由于var和let申明的是变量，如果要申明一个常量，在ES6之前是不行的，我们通常用全部大写的变量来表示“这是一个常量，不要修改它的值”（程序员之间默认要遵守的规则，即使这个定义的常量实际上是可以被修改的）：

ES6之前无const:

var PI = 3.14;
PI = 3; //可以被修改，但不要这么做
PI;   //3

ES6标准引入了新的关键字const来定义常量（readonly），const与let都具有块级作用域：

'use strict';

const PI = 3.14;  
PI = 3; // 某些浏览器不报错，但是无效果！
PI; // 3.14

8、解构赋值

变量作用域与解构赋值 - 廖雪峰的官方网站 (liaoxuefeng.com)

从ES6开始，JavaScript引入了解构赋值，可以同时对一组变量进行赋值。目前支持解构赋值的浏览器包括Chrome，Firefox，Edge等。

什么是解构赋值？我们先看看传统的做法，如何把一个数组的元素分别赋值给几个变量：

var array = ['hello', 'JavaScript', 'ES6'];
var x = array[0];
var y = array[1];
var z = array[2];

现在，在ES6中，可以使用解构赋值，直接对多个变量同时赋值：

'use strict';

// 如果浏览器支持解构赋值就不会报错:
var [x, y, z] = ['hello', 'JavaScript', 'ES6'];

注意，对数组元素进行解构赋值时，多个变量要用[...]括起来。

如果数组本身还有嵌套，也可以通过下面的形式进行解构赋值，注意嵌套层次和位置要保持一致：

let [x, [y, z]] = ['hello', ['JavaScript', 'ES6']];
x; // 'hello'
y; // 'JavaScript'
z; // 'ES6'

解构赋值还可以忽略某些元素：

let [, , z] = ['hello', 'JavaScript', 'ES6']; // 忽略前两个元素，只对z赋值第三个元素
z; // 'ES6'

如果需要从一个对象中取出若干属性，也可以使用解构赋值，便于快速获取对象的指定属性：

'use strict';

var person = {
    name: '小明',
    age: 20,
    gender: 'male',
    passport: 'G-12345678',
    school: 'No.4 middle school'
};
var {name, age, passport} = person;
			// name = '小明', age = 20, passport = 'G-12345678'

对一个对象进行解构赋值时，同样可以直接对嵌套的对象属性进行赋值，只要保证对应的层次是一致的：

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

如果要使用的变量名和属性名不一致，可以用下面的语法获取：

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

解构赋值还可以使用默认值，这样就避免了不存在的属性返回undefined的问题：

var person = {
    name: '小明',
    age: 20,
    gender: 'male',
    passport: 'G-12345678'
};

// 如果person对象没有single属性，默认赋值为true:
var {name, single=true} = person;
name; // '小明'
single; // true

使用场景

解构赋值在很多时候可以大大简化代码。例如，交换两个变量x和y的值，可以这么写，不再需要临时变量：

var x=1, y=2;
[x, y] = [y, x]

快速获取当前页面的域名和路径：

var {hostname:domain, pathname:path} = location;

如果一个函数接收一个对象作为参数，那么，可以使用解构直接把对象的属性绑定到变量中。

例如，下面的函数可以快速创建一个Date对象：

function buildDate({year, month, day, hour=0, minute=0, second=0}) {
    return new Date(year , month - 1 , day , hour , minute ,second);
}
// year ：The full year designation is required for cross-century date accuracy. If year is between 0 and 		99 is used, then year is assumed to be 1900 + year.
// month ：The month as a number between 0 and 11 (January to December).
// date ：The date as a number between 1 and 31.

console.log(buildDate({year: 2022, month: 1, day: 30}));
//Sun Jan 30 2022 00:00:00 GMT+0800 (中国标准时间)

此处传递参数时相当于：

({year, month, day, hour=0, minute=0, second=0}={year: 2022, month: 1, day: 30});//必须要有小括号

有些时候，如果变量已经被声明了，再次赋值的时候，正确的写法也会报语法错误：

// 声明变量:
var x, y;
// 解构赋值:
{x, y} = { name: '小明', x: 100, y: 200};
// 语法错误: Uncaught SyntaxError: Unexpected token =

这是因为JavaScript引擎把{开头的语句当作了块处理，于是=不再合法。解决方法是用小括号括起来：

({x, y} = { name: '小明', x: 100, y: 200});

7、方法

在一个对象中绑定函数，称为这个对象的方法。

如果我们给xiaoming绑定一个函数，就可以做更多的事情。比如，写个age()方法，返回xiaoming的年龄：

var xiaoming = {
    name: '小明',  //属性
    birth: 1990,  //属性
    age: function () {      //方法
        var y = new Date().getFullYear();
        return y - this.birth;
    }
};
//调方法一定要带()
xiaoming.age; // function xiaoming.age()
xiaoming.age(); // 根据当前时间动态的，今年调用是32,明年调用就变成33了，避免了每年改数据的麻烦

this(难点)

在一个方法内部，this是一个特殊变量，它始终指向当前对象，也就是xiaoming这个变量。所以，this.birth可以拿到xiaoming的birth属性。

让我们拆开写：

function getAge() {
    var y = new Date().getFullYear();
    return y - this.birth;
}

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: getAge
};

xiaoming.age(); // 25, 正常结果
getAge(); // NaN

单独调用函数getAge()怎么返回了NaN？请注意，我们已经进入到了JavaScript的一个大坑里。

JavaScript的函数内部如果调用了this，那么这个this到底指向谁？

答案是，视情况而定！

如果以对象的方法形式调用，比如xiaoming.age()，该函数的this指向被调用的对象，也就是xiaoming，这是符合我们预期的。

如果单独调用函数，比如getAge()，此时，该函数的this指向全局对象，也就是window。

var fn = xiaoming.age; // 先拿到xiaoming的age函数
fn(); // NaN    this->window

由于这是一个巨大的设计错误，要想纠正可没那么简单。ECMA决定，在strict模式下让函数的this指向undefined，因此，在strict模式下，你会得到一个错误：

'use strict';

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var y = new Date().getFullYear();
        return y - this.birth;
    }
};

var fn = xiaoming.age; //此时fn是一个函数，其中的this指向undefined
fn(); // Uncaught TypeError: Cannot read property 'birth' of undefined

这个决定只是让错误及时暴露出来，并没有解决this应该指向的正确位置。

要保证this指向正确，必须用obj.xxx()的形式调用！

有些时候，喜欢重构的你把方法重构了一下：

'use strict';

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        function getAgeFromBirth() {
            var y = new Date().getFullYear();
            return y - this.birth;
        }
        return getAgeFromBirth();
    }
};


xiaoming.age(); // Uncaught TypeError: Cannot read property 'birth' of undefined

结果又报错了！原因是this指针只在age方法的函数内指向xiaoming，

在函数内部定义的函数getAgeFromBirth()，this又指向undefined了！（在非strict模式下，它重新指向全局对象window！）

修复的办法，我们用一个that变量首先捕获this：

'use strict';

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var that = this; // 在方法内部一开始就捕获this指向xiaoming
        function getAgeFromBirth() {
            var y = new Date().getFullYear();
            return y - that.birth; // 用that而不是this
        }
        return getAgeFromBirth();
    }
};

xiaoming.age(); // 25

用var that = this;，你就可以放心地在方法内部定义其他函数，而不是把所有语句都堆到一个方法中。

apply()

虽然在一个独立的函数调用中，根据是否是strict模式，this指向undefined或window，不过，我们还是可以控制this的指向的！

要指定函数的this指向哪个对象，可以用函数本身的apply方法，它接收两个参数，

第一个参数就是需要绑定的this变量，

第二个参数是Array，表示函数本身的参数。要写成数组形式

用apply修复getAge()调用：

function getAge() {
    var y = new Date().getFullYear();
    return y - this.birth;
}

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: getAge
};

xiaoming.age(); // 25
getAge.apply(xiaoming, []); // 25, this指向xiaoming, 参数为空

call()

另一个与apply()类似的方法是call()，唯一区别是：

• apply()把参数打包成Array再传入，需要写成数组形式
• call()把参数按顺序传入，不用写成数组形式

比如调用Math.max(3, 5, 4)，分别用apply()和call()实现如下：

Math.max.apply(null, [3, 5, 4]); // 5
Math.max.call(null, 3, 5, 4); // 5

对普通函数调用，我们通常把this绑定为null。

参数传入null或者undefined时，函数调用还是会使用默认绑定。

但是总是传入null可能会出现一些难以追踪的bug，比如说当你在使用的第三方库中的某个函数中有this时，this会被错误的绑定到全局对象上，造成一些难以预料的后果（修改全局变量）

var a = 1;//全局变量
const Utils = {
	a: 2,
	changeA: function(a){
		this.a = a;
	}
}
Utils.changeA(3);
Utils.a //3
a //1
Utils.changeA.call(null,4);
Utils.a //3, Utils的a未被修改
a //4, 修改了全局变量a！

更安全的做法：

var o = Object.create(null);  //空对象,没有任何属性和方法
Utils.changeA.call(o,6);   //运行到this.a = a时，相当于直接给o添加了一个属性a = 6
a //1, 全局变量没有修改
o.a // 6 改的是变量o

例如：

var o = Object.create(null)
o.a = 6;
console.log("a = " + o.a );   //  a = 6

Object.create (null) 创建的对象是一个空对象，在该对象上没有继承 Object.prototype 原型链上的属性或者方法,例如：toString(), hasOwnProperty()等方法

Object.create ()方法接受两个参数: Object.create (obj, propertiesObject) ;

obj:一个对象，应该是新创建的对象的原型。

propertiesObject：可选。该参数对象是一组属性与值，该对象的属性名称将是新创建的对象的属性名称，值是属性描述符（这些属性描述符的结构与Object.defineProperties()的第二个参数一样）。注意：该参数对象不能是 undefined，另外只有该对象中自身拥有的可枚举的属性才有效，也就是说该对象的原型链上属性是无效的。

装饰器

利用apply()，我们还可以动态改变函数的行为。

JavaScript的所有对象都是动态的，即使内置的函数，我们也可以重新指向新的函数。

现在假定我们想统计一下代码一共调用了多少次parseInt()，可以把所有的调用都找出来，然后手动加上count += 1，不过这样做太傻了。最佳方案是用我们自己的函数替换掉默认的parseInt()：

'use strict';

var count = 0;
var oldParseInt = parseInt; // 保存原函数

window.parseInt = function () {
    count += 1;
    return oldParseInt.apply(null, arguments); // 调用原函数，
    							//arguments只在函数内部起作用，指向传入的所有参数，类似Array但它不是一个Array。
};

4、常用对象

1、Date

在JavaScript中，Date对象用来表示日期和时间。

JavaScript 将日期存储为 毫秒。

JavaScript 将日期存储为自 1970 年 1 月 1 日 00:00:00 UTC（协调世界时）以来的毫秒数。

零时间是 1970 年 1 月 1 日 00:00:00 UTC。

要获取系统当前时间，用：

var now = new Date();
now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)

注意，当前时间是浏览器从本机操作系统获取的时间，所以不一定准确，因为用户可以把当前时间设定为任何值。

如果要创建一个指定日期和时间的Date对象，可以用：

var d = new Date(2015, 5, 19, 20, 15, 30, 123);
d; // Fri Jun 19 2015 20:15:30 GMT+0800 (CST)      ，六月

一个非常非常坑爹的地方，就是JavaScript的月份范围用整数表示是0~11，0表示一月，1表示二月……，所以要表示6月，我们传入的是5！这绝对是JavaScript的设计者当时脑抽了一下，但是现在要修复已经不可能了。

第二种创建一个指定日期和时间的方法是解析一个符合ISO 8601格式的字符串：

var d = Date.parse('2015-06-24T19:49:22.875+08:00');
d; // 1435146562875

但它返回的不是Date对象，而是一个时间戳。不过有时间戳就可以很容易地把它转换为一个Date：

new Date(milliseconds) 创建一个零时加毫秒的新日期对象

var d = new Date(1435146562875);
d; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
d.getMonth(); // 5

Date对象表示的时间总是按浏览器所在时区显示的，不过我们既可以显示本地时间，也可以显示调整后的UTC时间：

var d = new Date(1435146562875);
d.toLocaleString(); // '2015/6/24 下午7:49:22'，本地时间（北京时区+8:00），显示的字符串与操作系统设定的格式有关
d.toUTCString(); // 'Wed, 24 Jun 2015 11:49:22 GMT'，UTC时间，与本地时间相差8小时

2、Math

数学对象

方法

• random(): 返回 0 ~ 1 之间的随机数。 含0不含1
• ceil(x)：对数进行上舍入。
• floor(x)：对数进行下舍入。
• round(x)：把数四舍五入为最接近的整数。

属性：PI

3、JSON（后端使用，前端解析）

JSON - 廖雪峰的官方网站 (liaoxuefeng.com)

JSON是什么？

JSON 是 JavaScript Object Notation的缩写，它是一种数据交换格式。

在JSON出现之前，大家一直用XML来传递数据。因为XML是一种纯文本格式，所以它适合在网络上交换数据。XML本身不算复杂，但是，加上DTD、XSD、XPath、XSLT等一大堆复杂的规范以后，任何正常的软件开发人员碰到XML都会感觉头大了，最后大家发现，即使你努力钻研几个月，也未必搞得清楚XML的规范。

终于，在2002年的一天，道格拉斯·克罗克福特（Douglas Crockford）同学为了拯救深陷水深火热同时又被某几个巨型软件企业长期愚弄的软件工程师，发明了JSON这种超轻量级的数据交换格式。

道格拉斯同学长期担任雅虎的高级架构师，自然钟情于JavaScript。他设计的JSON实际上是JavaScript的一个子集。在JSON中，一共就这么几种数据类型：

• number：和JavaScript的number完全一致；
• boolean：就是JavaScript的true或false；
• string：就是JavaScript的string；
• null：就是JavaScript的null；
• array：就是JavaScript的Array表示方式——[]；
• object：就是JavaScript的{ ... }表示方式。
• 所有的键值对 都是用 key : value，且key和字符串需要用双引号

以及上面的任意组合。

并且，JSON还定死了字符集必须是UTF-8，表示多语言就没有问题了。为了统一解析，JSON的字符串规定必须用双引号""，Object的键也必须用双引号""。

由于JSON非常简单，很快就风靡Web世界，并且成为ECMA标准。几乎所有编程语言都有解析JSON的库，而在JavaScript中，我们可以直接使用JSON，因为JavaScript内置了JSON的解析。

把任何JavaScript对象变成JSON，就是把这个对象序列化成一个JSON格式的字符串，这样才能够通过网络传递给其他计算机。

如果我们收到一个JSON格式的字符串，只需要把它反序列化成一个JavaScript对象，就可以在JavaScript中直接使用这个对象了。

序列化

JSON.stringify (value, replacer, space) 静态方法

• value – 要转换为 JSON 字符串的值。

• replacer – 一个改变字符串化过程行为的函数，或一个String和Number数组，用作选择/过滤要包含在 JSON 字符串中的值对象的属性的允许列表。 如果此值为null或未提供，则对象的所有属性都包含在生成的 JSON 字符串中。

• space – 一个String或Number对象，用于在输出 JSON 字符串中插入空格以提高可读性。

  如果这是一个Number ，它表示代替一个空格的空格数量； 此数字上限为 10（如果更大，则该值仅为10 ）。 小于 1 的值表示不应使用空格。

  如果这是一个String ，则该字符串（或字符串的前 10 个字符，如果它比那个长）替代一个空格。 如果未提供此参数（或为null ），则不使用空格。

让我们先把小明这个对象序列化成JSON格式的字符串：

'use strict';

var xiaoming = {
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp']
};

var s = JSON.stringify(xiaoming,null, '  ');
console.log(s);

输出：
{
  "name": "小明",
  "age": 14,
  "gender": true,
  "height": 1.65,
  "grade": null,
  "middle-school": "\"W3C\" Middle School",
  "skills": [
    "JavaScript",
    "Java",
    "Python",
    "Lisp"
  ]
}

反序列化

JSON.parse() 静态方法

• text -- 要解析为 JSON 的字符串。有关 JSON 语法的描述，请参阅JSON对象。
• reviver - 如果是一个函数，它规定了在返回之前如何转换最初由解析产生的值。

拿到一个JSON格式的字符串，我们直接用JSON.parse()把它变成一个JavaScript对象：

JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]  字符串
JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14}    
JSON.parse('true'); // true  字符串
JSON.parse('123.45'); // 123.45  number

JSON.parse()还可以接收一个函数，用来转换解析出的属性：

var obj = JSON.parse('{"name":"小明","age":14}', function (key, value) {
    if (key === 'name') {
        return value + '同学';
    }
    return value;
});
console.log(JSON.stringify(obj)); // {name: '小明同学', age: 14}

JSON和JS对象的区别

var obj = {a:'hello', b:'world'};
var json = {"a":"hello", "b":"world"};

4、RegExp(正则表达式)

RegExp - 廖雪峰的官方网站 (liaoxuefeng.com)

基础

在正则表达式中，如果直接给出字符，就是精确匹配。用\d可以匹配一个数字，\w可以匹配一个字母或数字，所以：

• '00\d'可以匹配'007'，但无法匹配'00A'；

• '\d\d\d'可以匹配'010'；

• '\w\w'可以匹配'js'；

• .可以匹配任意字符，所以：

• 'js.'可以匹配'jsp'、'jss'、'js!'等等。

要匹配变长的字符，在正则表达式中，

• 用*表示任意个字符（包括0个），
• 用+表示至少一个字符，
• 用?表示0个或1个字符，
• 用{n}表示n个字符，
• 用{m,n}表示m-n个字符，
• {,n}表示最多n个字符
• {m,}表示最少m个字符

来看一个复杂的例子：\d{3}\s+\d{3,8}。

我们来从左到右解读一下：

1. \d{3}表示匹配3个数字，例如'010'；
2. \s可以匹配一个空格（也包括Tab等空白符），所以\s+表示至少有一个空格，例如匹配' '，'\t\t'等；
3. \d{3,8}表示3-8个数字，例如'1234567'。

综合起来，上面的正则表达式可以匹配以任意个空格隔开的带区号的电话号码。

如果要匹配'010-12345'这样的号码呢？由于'-'是特殊字符，在正则表达式中，要用'\'转义，所以，上面的正则是\d{3}\-\d{3,8}。

但是，仍然无法匹配'010 - 12345'，因为带有空格。所以我们需要更复杂的匹配方式。

进阶

要做更精确地匹配，可以用[]表示范围，比如：

• [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'了。

JS中创建正则表达式

JavaScript有两种方式创建一个正则表达式：

第一种方式是直接通过/正则表达式/写出来，

第二种方式是通过new RegExp('正则表达式')创建一个RegExp对象。

两种写法是一样的：

var re1 = /ABC\-001/;
var re2 = new RegExp('ABC\\-001');//注意，因为字符串的转义问题，字符串的两个\\实际上是一个\。

re1; // /ABC\-001/
re2; // /ABC\-001/

如何判断正则表达式是否匹配reg.test( )：

var re = /^\d{3}\-\d{3,8}$/;
re.test('010-12345'); // true
re.test('010-1234x'); // false
re.test('010 12345'); // false

切分字符串

用正则表达式切分字符串比用固定的字符更灵活，请看正常的切分代码：

'a b   c'.split(' '); // ['a', 'b', '', '', 'c']

嗯，无法识别连续的空格，用正则表达式试试：

'a b   c'.split(/\s+/); // ['a', 'b', 'c']

无论多少个空格都可以正常分割。加入,试试：

'a,b, c  d'.split(/[\s\,]+/); // ['a', 'b', 'c', 'd']

再加入;试试：

'a,b;; c  d'.split(/[\s\,\;]+/); // ['a', 'b', 'c', 'd']

如果用户输入了一组标签，下次记得用正则表达式来把不规范的输入转化成正确的数组。

分组

除了简单地判断是否匹配之外，正则表达式还有提取子串的强大功能。用()表示的就是要提取的分组（Group）。比如：

^(\d{3})-(\d{3,8})$分别定义了两个组，可以直接从匹配的字符串中提取出区号和本地号码：

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。

提取子串非常有用。来看一个更凶残的例子：

var re = /^(0[0-9]|1[0-9]|2[0-3]|[0-9])\:(0[0-9]|1[0-9]|2[0-9]|3[0-9]|4[0-9]|5[0-9]|[0-9])\:(0[0-9]|1[0-9]|2[0-9]|3[0-9]|4[0-9]|5[0-9]|[0-9])$/;
re.exec('19:05:30'); // ['19:05:30', '19', '05', '30']

这个正则表达式可以直接识别合法的时间。但是有些时候，用正则表达式也无法做到完全验证，比如识别日期：

var re = /^(0[1-9]|1[0-2]|[0-9])-(0[1-9]|1[0-9]|2[0-9]|3[0-1]|[0-9])$/;

对于'2-30'，'4-31'这样的非法日期，用正则还是识别不了，或者说写出来非常困难，这时就需要程序配合识别了。

贪婪匹配

需要特别指出的是，正则匹配默认是贪婪匹配，也就是匹配尽可能多的字符。举例如下，匹配出数字后面的0：

var re = /^(\d+)(0*)$/;
re.exec('102300'); // ['102300', '102300', '']

由于\d+采用贪婪匹配，直接把后面的0全部匹配了，结果0*只能匹配空字符串了。

必须让\d+采用非贪婪匹配（也就是尽可能少匹配），才能把后面的0匹配出来，加个?就可以让\d+采用非贪婪匹配：

var re = /^(\d+?)(0*)$/;
re.exec('102300'); // ['102300', '1023', '00']

全局搜索

JavaScript的正则表达式还有几个特殊的标志，最常用的是g，表示全局匹配：

var r1 = /test/g;
// 等价于:
var r2 = new RegExp('test', 'g');

全局匹配可以多次执行exec()方法来搜索一个匹配的字符串。当我们指定g标志后，每次运行exec()，正则表达式本身会更新lastIndex属性，表示上次匹配到的最后索引：

var s = 'JavaScript, VBScript, JScript and ECMAScript';
var re=/[a-zA-Z]+Script/g;

// 使用全局匹配:
re.exec(s); // ['JavaScript']
re.lastIndex; // 10

re.exec(s); // ['VBScript']
re.lastIndex; // 20

re.exec(s); // ['JScript']
re.lastIndex; // 29

re.exec(s); // ['ECMAScript']
re.lastIndex; // 44

re.exec(s); // null，直到结束仍没有匹配到

全局匹配类似搜索，因此不能使用/^...$/，那样只会最多匹配一次。

正则表达式还可以：

• 指定i标志，表示忽略大小写，
• m标志，表示执行多行匹配。

练习

尝试写一个验证Email地址的正则表达式。版本一应该可以验证出类似的Email：

var re = /^[0-9a-zA-Z]+\.?[0-9a-zA-Z]*@[0-9a-zA-Z]+\.(com|org)$/;

var
        i,
        success = true,
        should_pass = ['someone@gmail.com', 'bill.gates@microsoft.com', 'tom@voyager.org', 'bob2015@163.com'],
        should_fail = ['test#gmail.com', 'bill@microsoft', 'bill%gates@ms.com', '@voyager.org'];
for (i = 0; i < should_pass.length; i++) {
  if (!re.test(should_pass[i])) {
    console.log('测试失败: ' + should_pass[i]);
    success = false;
    break;
  }
}
for (i = 0; i < should_fail.length; i++) {
  if (re.test(should_fail[i])) {
    console.log('测试失败: ' + should_fail[i]);
    success = false;
    break;
  }
}
if (success) {
  console.log('测试通过!');
}

5、Global

全局对象，这个Global中封装的方法不需要对象就可以直接调用。

JavaScript 全局参考手册 (w3school.com.cn)

4、面向对象编程

JavaScript的面向对象编程和大多数其他语言如Java、C#的面向对象编程都不太一样。如果你熟悉Java或C#，很好，你一定明白面向对象的两个基本概念：

• 类：类是对象的类型模板，例如，定义Student类来表示学生，类本身是一种类型，Student表示学生类型，但不表示任何具体的某个学生；
• 实例：实例是根据类创建的对象，例如，根据Student类可以创建出xiaoming、xiaohong、xiaojun等多个实例，每个实例表示一个具体的学生，他们全都属于Student类型。

所以，类和实例是大多数面向对象编程语言的基本概念。

不过，在JavaScript中，这个概念需要改一改。

JavaScript不区分类和实例的概念，而是通过原型（prototype）来实现面向对象编程。

4.1、原型

构造函数、原型和实例的关系：

每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。

原型链：

图中由相互关联的原型组成的链状结构就是原型链，也就是蓝色的这条线。

原型是指当我们想要创建xiaoming这个具体的学生时，我们并没有一个Student类型可用。那怎么办？恰好有这么一个现成的对象：

var robot = {
    name: 'Robot',
    height: 1.6,
    run: function () {
        console.log(this.name + ' is running...');
    }
};

我们看这个robot对象有名字，有身高，还会跑，有点像小明，干脆就根据它来“创建”小明得了！

于是我们把它改名为Student，然后创建出xiaoming：

var Student = {
    name: 'Robot',
    height: 1.2,
    run: function () {
        console.log(this.name + ' is running...');
    }
};

var xiaoming = {
    name: '小明'
};

xiaoming.__proto__ = Student;  //左右各两个下划线

注意最后一行代码把xiaoming的原型指向了对象Student，看上去xiaoming仿佛是从Student继承下来的：

xiaoming有自己的name属性，但并没有定义run()方法。不过，由于小明是从Student继承而来，只要Student有run()方法，xiaoming也可以调用。

JavaScript的原型链和Java的Class区别就在，它没有“Class”的概念，所有对象都是实例，所谓继承关系不过是把一个对象的原型指向另一个对象而已。

如果你把xiaoming的原型指向其他对象：

var Bird = {
    fly: function () {
        console.log(this.name + ' is flying...');
    }
};

xiaoming.__proto__ = Bird;

现在xiaoming已经无法run()了，他已经变成了一只鸟：

xiaoming.fly(); // 小明 is flying...

请注意，上述代码仅用于演示目的。

在编写JavaScript代码时，不要直接用obj.__proto__去改变一个对象的原型，并且，低版本的IE也无法使用__proto__。Object.create()方法可以传入一个原型对象，并创建一个基于该原型的新对象，但是新对象什么属性都没有，因此，我们可以编写一个函数来创建xiaoming：

// 原型对象:
var Student = {
    name: 'Robot',
    height: 1.2,
    run: function () {
        console.log(this.name + ' is running...');
    }
};

function createStudent(name) {
    // 基于Student原型创建一个新对象:
    var s = Object.create(Student);
    // 初始化新对象:
    s.name = name;
    return s;
}

var xiaoming = createStudent('小明');
xiaoming.run(); // 小明 is running...
xiaoming.__proto__ === Student; // true

4.2、创建对象

创建对象 - 廖雪峰的官方网站 (liaoxuefeng.com)

JavaScript对每个创建的对象都会设置一个原型，指向它的原型对象。

当我们用obj.xxx访问一个对象的属性时，JavaScript引擎先在当前对象上查找该属性，如果没有找到，就到其原型对象上找，如果还没有找到，就一直上溯到Object.prototype对象，最后，如果还没有找到，就只能返回undefined。

例如，创建一个Array对象：

var arr = [1, 2, 3];

其原型链是：

arr ----> Array.prototype ----> Object.prototype ----> null

Array.prototype定义了indexOf()、shift()等方法，因此你可以在所有的Array对象上直接调用这些方法。

当我们创建一个函数时：

function foo() {
    return 0;
}

函数也是一个对象，它的原型链是：

foo ----> Function.prototype ----> Object.prototype ----> null

由于Function.prototype定义了apply()等方法，因此，所有函数都可以调用apply()方法。

构造函数

除了直接用{ ... }创建一个对象外，JavaScript还可以用一种构造函数的方法来创建对象。它的用法是，先定义一个构造函数：

function Student(name) {
    this.name = name;
    this.hello = function () {
        alert('Hello, ' + this.name + '!');
    }
}

这确实是一个普通函数，但是在JavaScript中，可以用关键字new来调用这个函数，并返回一个对象：

var xiaoming = new Student('小明');
xiaoming.name; // '小明'
xiaoming.hello(); // Hello, 小明!

注意，如果不写new，这就是一个普通函数，它返回undefined。但是，如果写了new，它就变成了一个构造函数，它绑定的this指向新创建的对象，并默认返回this，也就是说，不需要在最后写return this;。

新创建的xiaoming的原型链是：

xiaoming ----> Student.prototype ----> Object.prototype ----> null

也就是说，xiaoming的原型指向函数Student的原型。如果你又创建了xiaohong、xiaojun，那么这些对象的原型与xiaoming是一样的：

xiaoming ↘
xiaohong -→ Student.prototype ----> Object.prototype ----> null
xiaojun  ↗

用new Student()创建的对象还从原型上获得了一个constructor属性，它指向函数Student本身：

xiaoming.constructor === Student.prototype.constructor; // true
Student.prototype.constructor === Student; // true

Object.getPrototypeOf(xiaoming) === Student.prototype; // true

xiaoming instanceof Student; // true

注意观察：

xiaoming.name; // '小明'
xiaohong.name; // '小红'
xiaoming.hello; // function: Student.hello()
xiaohong.hello; // function: Student.hello()
xiaoming.hello === xiaohong.hello; // false

xiaoming和xiaohong各自的name不同，这是对的，否则我们无法区分谁是谁了。

xiaoming和xiaohong各自的hello是一个函数，但它们是两个不同的函数，虽然函数名称和代码都是相同的！

如果我们通过new Student()创建了很多对象，这些对象的hello函数实际上只需要共享同一个函数就可以了，这样可以节省很多内存。

要让创建的对象共享一个hello函数，根据对象的属性查找原则，我们只要把hello函数移动到xiaoming、xiaohong这些对象共同的原型上就可以了，也就是Student.prototype：

修改代码如下：

function Student(name) {
    this.name = name;
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
};

忘记写new怎么办

如果一个函数被定义为用于创建对象的构造函数，但是调用时忘记了写new怎么办？

在strict模式下，this.name = name将报错，因为this绑定为undefined，在非strict模式下，this.name = name不报错，因为this绑定为window，于是无意间创建了全局变量name，并且返回undefined，这个结果更糟糕。

所以，调用构造函数千万不要忘记写new。

为了区分普通函数和构造函数，按照约定，构造函数首字母应当大写，而普通函数首字母应当小写，

这样，一些语法检查工具如jslint将可以帮你检测到漏写的new。

最后，我们还可以编写一个createStudent()函数，在内部封装所有的new操作。一个常用的编程模式像这样：

function Student(props) {
    this.name = props.name || '匿名'; // 默认值为'匿名'
    this.grade = props.grade || 1; // 默认值为1
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
};

function createStudent(props) {
    return new Student(props || {})
}

这个createStudent()函数有几个巨大的优点：一是不需要new来调用，二是参数非常灵活，可以不传，也可以这么传：

var xiaoming = createStudent({           //传入参数对象
    name: '小明'
});

xiaoming.grade; // 1

如果创建的对象有很多属性，我们只需要传递需要的某些属性，剩下的属性可以用默认值。由于参数是一个Object，我们无需记忆参数的顺序。如果恰好从JSON拿到了一个对象，就可以直接创建出xiaoming。

4.3、原型继承(ES6之前，了解)

原型继承 - 廖雪峰的官方网站 (liaoxuefeng.com)

在传统的基于Class的语言如Java、C++中，继承的本质是扩展一个已有的Class，并生成新的Subclass。

由于这类语言严格区分类和实例，继承实际上是类型的扩展。但是，JavaScript由于采用原型继承，我们无法直接扩展一个Class，因为根本不存在Class这种类型。

function Student(props) {
    this.name = props.name || 'Unnamed';
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
}

我们要基于Student扩展出PrimaryStudent，可以先定义出PrimaryStudent：

function PrimaryStudent(props) {
    // 调用Student构造函数，绑定this变量:
    Student.call(this, props);
    this.grade = props.grade || 1;
}

但是，调用了Student构造函数不等于继承了Student，PrimaryStudent创建的对象的原型是：

new PrimaryStudent() ----> PrimaryStudent.prototype ----> Object.prototype ----> null

必须想办法把原型链修改为：

new PrimaryStudent() ----> PrimaryStudent.prototype ----> Student.prototype ----> Object.prototype ----> null

这样，原型链对了，继承关系就对了。新的基于PrimaryStudent创建的对象不但能调用PrimaryStudent.prototype定义的方法，也可以调用Student.prototype定义的方法。

如果你想用最简单粗暴的方法这么干：

PrimaryStudent.prototype = Student.prototype;

是不行的！如果这样的话，PrimaryStudent和Student共享一个原型对象，那还要定义PrimaryStudent干啥？

我们必须借助一个中间对象来实现正确的原型链，这个中间对象的原型要指向Student.prototype。为了实现这一点，参考道爷（就是发明JSON的那个道格拉斯）的代码，中间对象可以用一个空函数F来实现：

// PrimaryStudent构造函数:
function PrimaryStudent(props) {
    Student.call(this, props);
    this.grade = props.grade || 1;
}

// 空函数F:
function F() {
}

// 把F的原型指向Student.prototype:
F.prototype = Student.prototype;

// 把PrimaryStudent的原型指向一个新的F对象，F对象的原型正好指向Student.prototype:
PrimaryStudent.prototype = new F();

// 把PrimaryStudent原型的构造函数修复为PrimaryStudent:
PrimaryStudent.prototype.constructor = PrimaryStudent;

// 继续在PrimaryStudent原型（就是new F()对象）上定义方法：
PrimaryStudent.prototype.getGrade = function () {
    return this.grade;
};

// 创建xiaoming:
var xiaoming = new PrimaryStudent({
    name: '小明',
    grade: 2
});
xiaoming.name; // '小明'
xiaoming.grade; // 2

// 验证原型:
xiaoming.__proto__ === PrimaryStudent.prototype; // true
xiaoming.__proto__.__proto__ === Student.prototype; // true

// 验证继承关系:
xiaoming instanceof PrimaryStudent; // true
xiaoming instanceof Student; // true

注意，函数F仅用于桥接，我们仅创建了一个new F()实例，而且，没有改变原有的Student定义的原型链。

如果把继承这个动作用一个inherits()函数封装起来，还可以隐藏F的定义，并简化代码：

function inherits(Child, Parent) {
    var F = function () {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}

这个inherits()函数可以复用：

function Student(props) {
    this.name = props.name || 'Unnamed';
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
}

function PrimaryStudent(props) {
    Student.call(this, props); //将Student中的this绑定为PrimaryStudent的this,来达到继承属性和方法的效果
    this.grade = props.grade || 1;
}

// 实现原型继承链:
inherits(PrimaryStudent, Student);

// 绑定其他方法到PrimaryStudent原型:
PrimaryStudent.prototype.getGrade = function () {
    return this.grade;
};

小结

JavaScript的原型继承实现方式就是：

1. 定义新的构造函数，并在内部用call()调用希望“继承”的构造函数，并绑定this；

   // PrimaryStudent构造函数:
   function PrimaryStudent(props) {
       Student.call(this, props);
       this.grade = props.grade || 1;
   }
   

2. 借助中间函数F实现原型链继承，最好通过封装的inherits函数完成；

   // 空函数F:
   function F() {
   }
   
   // 把PrimaryStudent的原型指向一个新的F对象，F对象的原型正好指向Student.prototype:
   PrimaryStudent.prototype = new F();
   
   // 把PrimaryStudent原型的构造函数修复为PrimaryStudent:
   PrimaryStudent.prototype.constructor = PrimaryStudent;
   

   把继承这个动作用一个inherits()函数封装起来，还可以隐藏F的定义，并简化代码：

   function inherits(Child, Parent) {
       var F = function () {};
       F.prototype = Parent.prototype;
       Child.prototype = new F();
       Child.prototype.constructor = Child;
   }
   

3. 继续在新的构造函数的原型上定义新方法。

   // 继续在PrimaryStudent原型（就是new F()对象）上定义方法：
   PrimaryStudent.prototype.getGrade = function () {
       return this.grade;
   };
   

4.4、class继承（ES6，越来越像java）

class继承 - 廖雪峰的官方网站 (liaoxuefeng.com)

JavaScript的对象模型是基于原型实现的，特点是简单，缺点是理解起来比传统的类－实例模型要困难，最大的缺点是继承的实现需要编写大量代码，并且需要正确实现原型链。

新的关键字class从 ES6 开始正式被引入到JavaScript中。class的目的就是让定义类更简单。

我们先回顾用函数实现Student的方法：

function Student(name) {
    this.name = name;
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
}

如果用新的class关键字来编写Student，可以这样写：

class Student {
    constructor(name) {    //构造函数
        this.name = name;
    }

    hello() {
        alert('Hello, ' + this.name + '!');
    }
}

比较一下就可以发现，class的定义包含了构造函数constructor和定义在原型对象上的函数hello()（注意没有function关键字），这样就避免了Student.prototype.hello = function () {...}这样分散的代码。

最后，创建一个Student对象代码和前面章节完全一样：

var xiaoming = new Student('小明');
xiaoming.hello();

用class定义对象的另一个巨大的好处是继承更方便了。

想一想我们从Student派生一个PrimaryStudent需要编写的代码量。现在，原型继承的中间对象，原型对象的构造函数等等都不需要考虑了，直接通过extends来实现：

class PrimaryStudent extends Student {
    constructor(name, grade) {
        super(name); // 记得用super调用父类的构造方法!
        this.grade = grade;
    }

    myGrade() {
        alert('I am at grade ' + this.grade);
    }
}

注意PrimaryStudent的定义也是class关键字实现的，而extends则表示原型链对象来自Student。子类的构造函数可能会与父类不太相同，例如，PrimaryStudent需要name和grade两个参数，并且需要通过super(name)来调用父类的构造函数，否则父类的name属性无法正常初始化。

PrimaryStudent已经自动获得了父类Student的hello方法，我们又在子类中定义了新的myGrade方法。

ES6 引入的class和原有的JavaScript原型继承有什么区别呢？

实际上它们没有任何区别，class的作用就是让JavaScript引擎去实现原来需要我们自己编写的原型链代码。简而言之，用class的好处就是极大地简化了原型链代码。

你一定会问，class这么好用，能不能现在就用上？

现在用还早了点，因为不是所有的主流浏览器都支持ES6的class。如果一定要现在就用上，就需要一个工具把class代码转换为传统的prototype代码，可以试试Babel这个工具。

5、操作BOM对象（重点）

浏览器对象 - 廖雪峰的官方网站 (liaoxuefeng.com)

定义：BOM (Browser Object Model) 是 指浏览器对象模型

JavaScript可以获取浏览器提供的很多对象，并进行操作。

5.1、window（重要）

Window 对象 (w3school.com.cn)

window对象不但充当全局作用域，而且表示浏览器窗口。

window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。对应的，还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高。

兼容性：IE<=8不支持。

console.log(innerHeight)   //默认this指向window
//706

5.2、navigator（不建议使用）

navigator对象表示浏览器的信息，最常用的属性包括：

• navigator.appName：浏览器名称；
• navigator.appVersion：浏览器版本；
• navigator.language：浏览器设置的语言；
• navigator.platform：操作系统类型；
• navigator.userAgent：浏览器设定的User-Agent字符串。

console.log('浏览器名称： '+ navigator.appName)
//浏览器名称： Netscape(网景)   

请注意，navigator的信息可以很容易地被用户修改，所以JavaScript读取的值不一定是正确的。

5.3、screen

screen对象表示屏幕的信息，常用的属性有：

• screen.width：屏幕宽度，以像素为单位；
• screen.height：屏幕高度，以像素为单位；
• screen.colorDepth：返回颜色位数，如8、16、24。

5.4、location（重要）

location对象表示当前页面的URL信息。例如，一个完整的URL：

location.href; //查询当前页面URL
http://www.example.com:8080/path/index.html?a=1&b=2#TOP

可以用location.href获取。要获得URL各个部分的值，可以这么写：

location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'
location.reload(); //重新加载，刷新页面
location.assign('https://www.baidu.com'); //由当前页面跳转至百度

要加载一个新页面，可以调用location.assign()。如果要重新加载当前页面，调用location.reload()方法非常方便。

5.5、document（DOM）

document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。

document的title属性是从HTML文档中的读取的，但是可以动态改变：

document.title = '努力学习JavaScript!';   //浏览器窗口标题改变

要查找DOM树的某个节点，需要从document对象开始查找。最常用的查找是根据ID和Tag Name。

用document对象提供的getElementById()和getElementsByTagName()

//我们先准备HTML数据：

    
  

    
摩卡
    
热摩卡咖啡
    
酸奶
    
北京老酸奶
    
果汁
    
鲜榨苹果汁
  

  


//提供的饮料有:摩卡,酸奶,果汁,

write()

向文档写 HTML 表达式 或 JavaScript 代码。

解决关于js报错 Cannot read property innerHTML of null

1. 相信很多同学在开发过程中都会遇到
   Cannot read property ‘innerHTML’ of null ——这个报错的字面含义是：不能读取空的内部HTML。
2. 实际上，在页面的HTML结构中，innerHTML是有实际的值并可以在console进行获取查询到。
3. 根据浏览器的渲染原理，HTML代码从上到下执行代码，当浏览器JS解析器解析到script并进行DOM操作，下面的DOM结构还没有进行搭建。那么就会提示不能正确读取内部的HTML信息。
4. 解决思路：将涉及DOM读取部分的script放在DOM结构后面。标签前面。或者在前置的script标签写明：window.onload等，确保DOM树加载完毕后再执行这段script代码。

Cookie

document对象还有一个cookie属性，可以获取当前页面的Cookie。

Cookie 是由服务器发送的key-value标示符。因为HTTP协议是无状态的，但是服务器要区分到底是哪个用户发过来的请求，就可以用Cookie来区分。当一个用户成功登录后，服务器发送一个Cookie给浏览器，例如user=ABC123XYZ(加密的字符串)...，此后，浏览器访问该网站时，会在请求头附上这个Cookie，服务器根据Cookie即可区分出用户。

Cookie还可以存储网站的一些设置，例如，页面显示的语言等等。

JavaScript可以通过document.cookie读取到当前页面的Cookie：

document.cookie; // 'v=123; remember=true; prefer=zh'

由于JavaScript能读取到页面的Cookie，而用户的登录信息通常也存在Cookie中，这就造成了巨大的安全隐患，这是因为在HTML页面中引入第三方的JavaScript代码是允许的：

    
        
    
    ...

如果引入的第三方的JavaScript中存在恶意代码，则www.foo.com网站将直接获取到www.example.com网站的用户登录信息。

为了解决这个问题，服务器在设置Cookie时可以使用httpOnly，设定了httpOnly的Cookie将不能被JavaScript读取。这个行为由浏览器实现，主流浏览器均支持httpOnly选项，IE从IE6 SP1开始支持。

为了确保安全，服务器端在设置Cookie时，应该始终坚持使用httpOnly。

history(不建议使用)

history对象保存了浏览器的历史记录，JavaScript可以调用history对象的back()或forward ()，

相当于用户点击了浏览器的“后退”或“前进”按钮。

这个对象属于历史遗留对象，对于现代Web页面来说，由于大量使用 AJAX 和页面交互，简单粗暴地调用history.back()可能会让用户感到非常愤怒。

新手开始设计Web页面时喜欢在登录页登录成功时调用history.back()，试图回到登录前的页面。这是一种错误的方法。

任何情况，你都不应该使用history这个对象了。

6、操作DOM对象（重要）

操作DOM - 廖雪峰的官方网站 (liaoxuefeng.com)

HTML DOM Element 对象 (w3school.com.cn)

6.1、DOM对象

DOM，全称“Document Object Model（文档对象模型）”，它是由W3C组织定义的一个标准。

在前端开发时，我们往往需要在页面某个地方添加一个元素或者删除元素，这种添加元素、删除元素的操作就是通过DOM来实现的。

说白了，DOM就是一个接口，我们可以通过DOM来操作页面中各种元素，例如添加元素、删除元素、替换元素等。

W3C DOM 标准被分为 3 个不同的部分：

• Core DOM - 所有文档类型的标准模型
• XML DOM - XML 文档的标准模型
• HTML DOM - HTML 文档的标准模型

6.2、DOM结构

DOM采用树形结构作为分层结构，以树节点形式表示页面中各种元素或内容。

在DOM中，每一个元素看成一个节点，而每一个节点就是一个“对象”。也就是我们在操作元素时，把每一个元素节点看成一个对象，然后使用这个对象的属性和方法进行相关操作。（这句话对理解DOM操作太重要了）。

    
    


  
操作DOM对象
  

    这是段落
  

节点

下面我们介绍几个关于节点的概念。

1、根节点

在HTML文档中，html就是根节点。

2、父节点

一个节点之上的节点就是该节点的父节点，例如h1的父节点就是body，body的父节点就是html。

3、子节点

一个节点之下的节点就是该节点的子节点，例如h1就是body的子节点。

4、兄弟节点

如果多个节点在同一层次，并拥有相同的父节点，那么这几个节点就是兄弟节点。

例如h1和p就是兄弟节点，因为他们拥有相同的父节点body。

6.3、操作DOM

由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。

始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作：

• 更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
• 遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
• 添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
• 删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。

1、查询DOM

第一种方法（原生）：

在操作一个DOM节点前，我们需要通过各种方式先拿到这个DOM节点。

最常用的方法是document.getElementById()和document.getElementsByTagName()，

以及CSS选择器document.getElementsByClassName()。

• 由于ID在HTML文档中是唯一的，所以document.getElementById()可以直接定位唯一的一个DOM节点

• document.getElementsByTagName()和document.getElementsByClassName()总是返回一组DOM节点。数组

要精确地选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围。（类似CSS选择器）

// 返回ID为'test'的节点：
var test = document.getElementById('test');

// 先定位ID为'test-table'的节点，再返回其内部所有tr节点：
var trs = document.getElementById('test-table').getElementsByTagName('tr');

// 先定位ID为'test-div'的节点，再返回其内部所有class包含red的节点：
var reds = document.getElementById('test-div').getElementsByClassName('red');

// 获取节点test下的所有直属子节点:
var cs = test.children;

// 获取节点test下第一个、最后一个子节点：
var first = test.firstElementChild;
var last = test.lastElementChild;

第二种方法：

是使用querySelector()和querySelectorAll()，需要了解selector语法，然后使用条件来获取节点，更加方便：

// 通过querySelector获取ID为q1的节点：
var q1 = document.querySelector('#q1');

// 通过querySelectorAll获取q1节点内的符合条件的所有节点：
var ps = q1.querySelectorAll('div.highlighted > p');

注意：低版本的IE<8不支持querySelector和querySelectorAll。IE8仅有限支持。

严格地讲，我们这里的DOM节点是指Element，但是DOM节点实际上是Node，在HTML中，Node包括Element、Comment、CDATA_SECTION等很多种，以及根节点Document类型，但是，绝大多数时候我们只关心Element，也就是实际控制页面结构的Node，其他类型的Node忽略即可。根节点Document已经自动绑定为全局变量document。

2、更新DOM

拿到一个DOM节点后，我们可以对它进行更新。

可以直接修改节点的文本，方法有两种：

1、innerHTML（强大，但有安全隐患）

一种是修改innerHTML属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树：

// 获取
...
var p = document.getElementById('p-id');
// 设置文本为abc:
p.innerHTML = 'ABC'; // 
ABC
// 设置HTML:
p.innerHTML = 'ABC RED XYZ';
// 
...
的内部结构已修改

用innerHTML时要注意，是否需要写入HTML。如果写入的字符串是通过网络拿到的，要注意对字符编码来避免XSS攻击。

2、innerText / innerContent (安全)

第二种是修改innerText或textContent属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签：

// 获取
...
var p = document.getElementById('p-id');
// 设置文本:
p.innerText = '';
// HTML被自动编码，无法设置一个

可能的值：

• 0：鼠标左键
• 1：滚轮按钮或中间按钮（如果有）
• 2：鼠标右键

注释：Internet Explorer 8 及更早版本有不同的返回值：

• 1：鼠标左键
• 2：鼠标右键
• 4：滚轮按钮或中间按钮（如果有）

注释：对于左手配置的鼠标，返回值是相反的。

2、FocusEvent

3、加载事件

定义和用法

• onload 事件在对象被加载后发生。
• onload 最常用于 元素中，用于在网页完全加载所有内容（包括图像、脚本文件、CSS 文件等）后执行脚本。
• onload 事件可用于检查访问者的浏览器类型和浏览器版本，并根据这些信息加载网页的正确版本。
• onload 事件也可用于处理 cookie .

4、KeyboardEvent

当事件为onkeydown时，可以监听用户按下了鼠标哪个键。

KeyboardEvent key 属性 (w3school.com.cn)

定义和用法

key 属性返回发生按键事件时按下的键的标识符。

按键标识符是标识键盘按钮的字符串。此属性的返回值可以是以下字符串：

• 单个字符（比如 "a", "W", "4", "+" 或 "$"）
• 多字符（比如 "F1", "Enter", "HOME" 或 "CAPS LOCK"）

注释：该属性只读。

提示：如果您想知道在发生按键事件时是否按下了 "ALT"、"CTRL"、"META" 或 "SHIFT" 键，请使用 altKey、ctrlKey、metaKey 或 shiftKey 属性，返回boolean值

5、ClipboardEvent

6、选择和改变

• onchange：域的内容被改变。
• onselect：文本被选中。

7、表单事件

• onsubmit：确认按钮被点击。

  如果返回值为false，则表单会被阻止提交

• onreset：重置按钮被点击。

7、操作表单（重要）

用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树。

不过表单的输入框、下拉框等可以接收用户输入，所以用JavaScript来操作表单，可以获得用户输入的内容，或者对一个输入框设置新的内容。

HTML表单的输入控件主要有以下几种：

• 文本框，对应的，用于输入文本；
• 口令框，对应的，用于输入口令；
• 单选框，对应的，用于选择一项；
• 复选框，对应的，用于选择多项；
• 下拉框，对应的，用于选择一项；
  隐藏文本，对应的
  ，用户不可见，但表单提交时会把隐藏文本发送到服务器。

7.1、获取值

如果我们获得了一个节点的引用，就可以直接调用value获得对应的用户输入值：

// 
var input = document.getElementById('email');
input.value; // '用户输入的值'

这种方式可以应用于text、password、hidden以及select。

但是，对于单选框和复选框，value属性返回的永远是HTML预设的值，

而我们需要获得的实际是用户是否“勾上了”选项，所以应该用checked判断：

//  Monday   预设值为1
//  Tuesday 预设值为2
var mon = document.getElementById('monday');
var tue = document.getElementById('tuesday');
mon.value; // '1'
tue.value; // '2'
mon.checked; // true或者false
tue.checked; // true或者false

---

7.2、设置值

设置值和获取值类似，对于text、password、hidden以及select，直接设置value就可以：

// 
var input = document.getElementById('email');
input.value = 'test@example.com'; // 文本框的内容已更新

对于单选框和复选框，设置checked为true或false即可。

---

7.3、HTML5控件

HTML5新增了大量标准控件，常用的包括date、datetime、datetime-local、color等，它们都使用标签：

不支持HTML5的浏览器无法识别新的控件，会把它们当做type="text"来显示。

支持HTML5的浏览器将获得格式化的字符串。

例如，type="date"类型的input的value将保证是一个有效的YYYY-MM-DD格式的日期，或者空字符串。

---

7.4、提交表单

JavaScript可以以两种方式来处理表单的提交（AJAX方式在后面章节介绍）。

方式一：

通过

元素的submit()方法提交一个表单，例如，响应一个的click事件，在JavaScript代码中提交表单：

     //#代表提交到本页面
    

    

Submit

这种方式的缺点是扰乱了浏览器对form的正常提交。浏览器默认点击时提交表单，或者用户在最后一个输入框按回车键。

---

方式二：

因此，第二种方式是响应

本身的onsubmit事件，在提交form时作修改：

Submit

注意要return true来告诉浏览器继续提交，如果return false，浏览器将不会继续提交form，这种情况通常对应用户输入有误，提示用户错误信息后终止提交form。

在检查和修改时，要充分利用来传递数据。

例如，很多登录表单希望用户输入用户名和口令，但是，安全考虑，提交表单时不传输明文口令，而是口令的MD5。普通JavaScript开发人员会直接修改：

    
    

    
	
    




    

        账号：  
    
    

        密码： 
    
    Submit

这个做法看上去没啥问题，但用户输入了口令提交时，口令框的显示会突然从几个*变成32个*（因为MD5有32个字符）。

要想不改变用户的输入，可以利用实现：

    
    

    
	
    




    

        账号：  
    
    

        密码： 
    
    
    Submit

注意到id为md5-password的标记了name="password"，而用户输入的id为input-password的没有name属性。没有name属性的的数据不会被提交。

---

8、jQuery

jQuery API 中文文档

8.1、简介

jQuery是JavaScript世界中使用最广泛的一个库。全世界大约有80~90%的网站直接或间接地使用了jQuery。

jQuery这么流行，肯定是因为它解决了一些很重要的问题。实际上，jQuery能帮我们干这些事情：

• 消除浏览器差异：你不需要自己写冗长的代码来针对不同的浏览器来绑定事件，编写AJAX等代码；
• 简洁的操作DOM的方法：写$('#test')肯定比document.getElementById('test')来得简洁；
• 轻松实现动画、修改CSS等各种操作。

---

**jQuery的理念 ** “Write Less, Do More“，让你写更少的代码，完成更多的工作！

---

jQuery版本

目前jQuery有1.x和2.x两个主要版本，区别在于2.x移除了对古老的IE 6、7、8的支持，因此2.x的代码更精简。选择哪个版本主要取决于你是否想支持IE 6~8。

从jQuery官网可以下载最新版本。jQuery只是一个jquery-xxx.js文件，但你会看到有compressed（已压缩）和uncompressed（未压缩）两种版本，使用时完全一样，但如果你想深入研究jQuery源码，那就用uncompressed版本。

---

使用jQuery

使用jQuery只需要在页面的引入jQuery文件即可：

    
	...


    ...

---

js对象和jquery对象的区别

• JS对象，是一个名值对的无序集合。
• jquery对象，是jquery特有的对象，只有调用jquery框架才存在。其实jquery对象，也是一种js对象。
• jquery对象和js对象可以相互转换，例如 $("#div").get(),即可以把一个jquery对象转换为js对象。

最主要的区别:

• js对象上的方法，不能直接用在jquery对象上，如果一定要给jquery对象使用js对象的方法，必须把jquery对象转换为js对象。
• jquery对象，则可以随意使用jquery定义的方法。

---

$符号

基本用法： $(选择器).事件()

$是著名的jQuery符号。实际上，jQuery把所有功能全部封装在一个全局变量jQuery中，而$也是一个合法的变量名，它是变量jQuery的别名：

window.jQuery; // jQuery(selector, context)
window.$; // jQuery(selector, context)
$ === jQuery; // true
typeof($); // 'function'

$本质上就是一个函数，但是函数也是对象，于是$除了可以直接调用外，也可以有很多其他属性。

注意，你看到的$函数名可能不是jQuery(selector, context)，因为很多JavaScript压缩工具可以对函数名和参数改名，所以压缩过的jQuery源码$函数可能变成a(b, c)。

绝大多数时候，我们都直接用$（因为写起来更简单嘛）。但是，如果$这个变量不幸地被占用了，而且还不能改，那我们就只能让jQuery把$变量交出来，然后就只能使用jQuery这个变量：

$; // jQuery(selector, context)
jQuery.noConflict();
$; // undefined
jQuery; // jQuery(selector, context)

这种黑魔法的原理是jQuery在占用$之前，先在内部保存了原来的$,调用jQuery.noConflict()时会把原来保存的变量还原。

---

8.2、选择器（与CSS语法一样）

选择器是jQuery的核心。

一个选择器写出来类似$('#dom-id')。

为什么jQuery要发明选择器？回顾一下DOM操作中我们经常使用的代码：

// 按ID查找：
var a = document.getElementById('dom-id');

// 按tag查找：
var divs = document.getElementsByTagName('div');

// 查找
：
var ps = document.getElementsByTagName('p');
// 过滤出class="red":
// TODO:

// 查找
里面的所有：
var table = ...
for (var i=0; i
}

这些代码实在太繁琐了，并且，在层级关系中，例如，查找里面的所有，一层循环实际上是错的，因为的标准写法是：
......

很多时候，需要递归查找所有子节点。

jQuery的选择器就是帮助我们快速定位到一个或多个DOM节点。

示例：

    点我     //点击后出现hello,jquery的弹窗

---

1、基本选择器

1、按ID查找

如果某个DOM节点有id属性，利用jQuery查找如下：

// 查找
:
var div = $('#abc');

注意，#abc以#开头。返回的对象是jQuery对象。

什么是jQuery对象？jQuery对象类似数组，它的每个元素都是一个引用了DOM节点的对象。

以上面的查找为例，如果id为abc的

存在，返回的jQuery对象如下：

[
...
]

如果id为abc的

不存在，返回的jQuery对象如下：

[]

总之jQuery的选择器不会返回undefined或者null，这样的好处是你不必在下一行判断if (div === undefined)。

jQuery对象和DOM对象之间可以互相转化：

var div = $('#abc'); // jQuery对象
var divDom = div.get(0); // 假设存在div，获取第1个DOM元素
var another = $(divDom); // 重新把DOM包装为jQuery对象

通常情况下你不需要获取DOM对象，直接使用jQuery对象更加方便。

如果你拿到了一个DOM对象，那可以简单地调用$(aDomObject)把它变成jQuery对象，这样就可以方便地使用jQuery的API了。

---

2、按tag查找

按tag查找只需要写上tag名称就可以了：

var ps = $('p'); // 返回所有
节点
ps.length; // 数一数页面有多少个
节点

---

3、按class查找

按class查找注意在class名称前加一个.：

var a = $('.red'); // 所有节点包含`class="red"`都将返回
// 例如:
// 
...
// 
...

通常很多节点有多个class，我们可以查找同时包含red和green的节点：

var a = $('.red.green'); // 注意没有空格！
// 符合条件的节点：
// 
...
// 
...

---

4、按属性查找

一个DOM节点除了id和class外还可以有很多属性，很多时候按属性查找会非常方便，比如在一个表单中按属性来查找：

var email = $('[name=email]'); // 找出<??? name="email">
var passwordInput = $('[type=password]'); // 找出<??? type="password">
var a = $('[items="A B"]'); // 找出<??? items="A B">

当属性的值包含空格等特殊字符时，需要用双引号括起来。

正则匹配：

按属性查找还可以使用前缀查找或者后缀查找：

var icons = $('[name^=icon]'); // 找出所有name属性值以icon开头的DOM
// 例如: name="icon-1", name="icon-2"
var names = $('[name$=with]'); // 找出所有name属性值以with结尾的DOM
// 例如: name="startswith", name="endswith"

这个方法尤其适合通过class属性查找，且不受class包含多个名称的影响：

var icons = $('[class^="icon-"]'); // 找出所有class包含至少一个以`icon-`开头的DOM
// 例如: class="icon-clock", class="abc icon-home"

---

5、组合查找

组合查找就是把上述简单选择器组合起来使用。如果我们查找$('[name=email]')，很可能把表单外的

也找出来，但我们只希望查找，就可以这么写：

var emailInput = $('input[name=email]'); // 不会找出

同样的，根据tag和class来组合查找也很常见：

var tr = $('tr.red'); // 找出...

---

6、多项选择器

多项选择器就是把多个选择器用,组合起来一块选：

$('p,div'); // 把
和
都选出来
$('p.red,p.green'); // 把
和
都选出来

要注意的是，选出来的元素是按照它们在HTML中出现的顺序排列的，而且不会有重复元素。例如，

不会被上面的$('p.red,p.green')选择两次。

---

2、高级选择器

1、后代选择器 $('ancestor descendant')

（Descendant Selector） 可以在所有后代中选择

如果两个DOM元素具有层级关系，就可以用$('ancestor descendant')来选择，层级之间用空格隔开。例如：

    

        
JavaScript
        
Python
        
Lua
    

要选出JavaScript，可以用层级选择器：

$('ul.lang li.lang-javascript'); // [
JavaScript
]
$('div.testing li.lang-javascript'); // [
JavaScript
]

因为

和

都是
• 的祖先节点，所以上面两种方式都可以选出相应的
• 节点。

  要选择所有的

• 节点，用：

  $('ul.lang li');
  

  这种层级选择器相比单个的选择器好处在于，它缩小了选择范围，因为首先要定位父节点，才能选择相应的子节点，这样避免了页面其他不相关的元素。

  例如：

  $('form[name=upload] input');
  

  就把选择范围限定在name属性为upload的表单里。如果页面有很多表单，其他表单的不会被选择。

  多层选择也是允许的：

  $('form.test p input'); // 在form表单选择被
  包含的
  

  ---

  2、子代选择器 $('parent>child')

  （Child Selector） 只能选择子代

  子选择器$('parent>child')类似层级选择器，但是限定了层级关系必须是父子关系，就是节点必须是节点的直属子节点。

  
  
      
  
          
  JavaScript
          
  Python
          
  Lua
      
  
  

  $('ul.lang>li.lang-javascript'); // 可以选出[
  JavaScript
  ]
  $('div.testing>li.lang-javascript'); // [], 无法选出，因为
  和
  不构成父子关系
  

  ---

  3、过滤器 带冒号过滤

  （Filter）类似CSS结构伪类选择器

  过滤器一般不单独使用，它通常附加在选择器上，帮助我们更精确地定位元素。观察过滤器的效果：

  $('ul.lang li'); // 选出JavaScript、Python和Lua 3个节点
  
  $('ul.lang li:first-child'); // 仅选出JavaScript
  $('ul.lang li:last-child'); // 仅选出Lua
  $('ul.lang li:nth-child(2)'); // 选出第N个元素，N从1开始
  $('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素
  $('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素
  

  ---

  4、表单相关

  针对表单元素，jQuery还有一组特殊的选择器：

  • :input：可以选择，</code>，<code><select></code>和<code><button></code>；</li> <li><code>:file</code>：可以选择<code><input type="file"></code>，和<code>input[type=file]</code>一样；</li> <li><code>:checkbox</code>：可以选择复选框，和<code>input[type=checkbox]</code>一样；</li> <li><code>:radio</code>：可以选择单选框，和<code>input[type=radio]</code>一样；</li> <li><code>:focus</code>：可以选择当前输入焦点的元素，例如把光标放到一个<code><input></code>上，用<code>$('input:focus')</code>就可以选出；</li> <li><code>:checked</code>：选择当前勾上的单选框和复选框，用这个选择器可以立刻获得用户选择的项目，如<code>$('input[type=radio]:checked')</code>；</li> <li><code>:enabled</code>：可以选择可以正常输入的<code><input></code>、<code><select></code> 等，也就是没有灰掉的输入；</li> <li><code>:disabled</code>：和<code>:enabled</code>正好相反，选择那些不能输入的。</li> </ul> <p>此外，jQuery还有很多有用的选择器，例如，选出可见的或隐藏的元素：</p> <pre><code class="language-javascript">$('div:visible'); // 所有可见的div $('div:hidden'); // 所有隐藏的div </code></pre> <hr> <h4 id="83查找和过滤">8.3、查找和过滤</h4> <h5 id="1在子节点中查找-find">1、在子节点中查找 find()</h5> <p>通常情况下选择器可以直接定位到我们想要的元素，但是，当我们拿到一个jQuery对象后，还可以以这个对象为基准，进行查找和过滤。</p> <p>最常见的查找是<strong>在某个节点的所有子节点中查找</strong>，使用<code>find()</code>方法，它本身又接收一个任意的选择器。例如如下的HTML结构：</p> <ul> <li>JavaScript</li> <li>Python</li> <li>Swift</li> <li>Scheme</li> <li>Haskell</li> </ul> <pre><code class="language-javascript"><!-- HTML结构 --> <ul class="lang"> <li class="js dy">JavaScript</li> <li class="dy">Python</li> <li id="swift">Swift</li> <li class="dy">Scheme</li> <li name="haskell">Haskell</li> </ul> </code></pre> <p>用<code>find()</code>查找：</p> <pre><code class="language-javascript">var ul = $('ul.lang'); // 获得<ul> var dy = ul.find('.dy'); // 获得JavaScript, Python, Scheme var swf = ul.find('#swift'); // 获得Swift var hsk = ul.find('[name=haskell]'); // 获得Haskell </code></pre> <p>如果要从当前节点开始向上查找，使用<code>parent()</code>方法：</p> <pre><code class="language-javascript">var swf = $('#swift'); // 获得Swift var parent = swf.parent(); // 获得Swift的上层节点<ul> var a = swf.parent('.red'); // 获得Swift的上层节点<ul>，同时传入过滤条件。如果ul不符合条件，返回空jQuery对象 </code></pre> <p>对于位于同一层级的节点，可以通过<code>next()</code>和<code>prev()</code>方法，例如：</p> <p>当我们已经拿到<code>Swift</code>节点后：</p> <pre><code class="language-javascript">var swift = $('#swift'); swift.next(); // Scheme swift.next('[name=haskell]'); // 空的jQuery对象，因为Swift的下一个元素Scheme不符合条件[name=haskell] swift.prev(); // Python swift.prev('.dy'); // Python，因为Python同时符合过滤器条件.dy </code></pre> <h5 id="2在接收的array中过滤-filter">2、在接收的Array中过滤 filter()</h5> <p>和函数式编程的map、filter类似，jQuery对象也有类似的方法。</p> <pre><code class="language-javascript"><!-- HTML结构 --> <ul class="lang"> <li class="js dy">JavaScript</li> <li class="dy">Python</li> <li id="swift">Swift</li> <li class="dy">Scheme</li> <li name="haskell">Haskell</li> </ul> </code></pre> <p><code>filter()</code>方法可以过滤掉不符合选择器条件的节点：</p> <pre><code class="language-javascript">var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell var a = langs.filter('.dy'); // 拿到JavaScript, Python, Scheme </code></pre> <p>或者传入一个函数，要特别注意<strong>函数内部的<code>this</code>被绑定为DOM对象，不是jQuery对象</strong>：</p> <pre><code class="language-javascript">var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell langs.filter(function () { return this.innerHTML.indexOf('S') === 0; // 返回S开头的节点 }); // 拿到Swift, Scheme </code></pre> <p><code>map()</code>方法把一个jQuery对象包含的若干DOM节点转化为其他对象：</p> <pre><code class="language-javascript">var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell var arr = langs.map(function () { return this.innerHTML; }).get(); // 用get()拿到包含string的Array：['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell'] </code></pre> <p>此外，一个jQuery对象如果包含了不止一个DOM节点，<code>first()</code>、<code>last()</code>和<code>slice()</code>方法可以返回一个新的jQuery对象，把不需要的DOM节点去掉：</p> <pre><code class="language-javascript">var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell var js = langs.first(); // JavaScript，相当于$('ul.lang li:first-child') var haskell = langs.last(); // Haskell, 相当于$('ul.lang li:last-child') var sub = langs.slice(2, 4); // Swift, Scheme, 参数和数组的slice()方法一致 </code></pre> <hr> <h4 id="84事件">8.4、事件</h4> <p>因为JavaScript在浏览器中以单线程模式运行，页面加载后，一旦页面上所有的JavaScript代码被执行完后，就只能依赖触发事件来执行JavaScript代码。</p> <p>浏览器在接收到用户的鼠标或键盘输入后，会自动在对应的DOM节点上触发相应的事件。如果该节点已经绑定了对应的JavaScript处理函数，该函数就会自动调用。</p> <p>由于不同的浏览器绑定事件的代码都不太一样，所以用jQuery来写代码，就屏蔽了不同浏览器的差异，我们总是编写相同的代码。</p> <p>举个例子，假设要在用户点击了超链接时弹出提示框，我们用jQuery这样绑定一个<code>click</code>事件：</p> <pre><code class="language-javascript">/* HTML: * * <a id="test-link" href="#0">点我试试</a> * */ // 获取超链接的jQuery对象: var a = $('#test-link'); a.on('click', function () { //on方法用来绑定一个事件，我们需要传入事件类型和对应的处理函数。 alert('Hello!'); }); </code></pre> <p>另一种更简化的写法是直接调用<code>click()</code>方法：</p> <pre><code class="language-javascript">a.click(function () { alert('Hello!'); }); </code></pre> <p>两者完全等价。我们通常用后面的写法。</p> <hr> <h5 id="1鼠标事件">1、鼠标事件</h5> <ul> <li>click: 鼠标单击时触发；</li> <li>dblclick：鼠标双击时触发；</li> <li>mouseenter：鼠标进入时触发；</li> <li>mouseleave：鼠标移出时触发；</li> <li>mousemove：鼠标在DOM内部移动时触发；</li> <li>hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。</li> </ul> <hr> <h5 id="2键盘事件">2、键盘事件</h5> <p>键盘事件仅作用在当前焦点的DOM上，通常是<code><input></code>和<code><textarea></code>。</p> <ul> <li>keydown：键盘按下时触发；</li> <li>keyup：键盘松开时触发；</li> <li>keypress：按一次键后触发。</li> </ul> <hr> <h5 id="3其他事件">3、其他事件</h5> <ul> <li>focus：当DOM获得焦点时触发；</li> <li>blur：当DOM失去焦点时触发；</li> <li>change：当<code><input></code>、<code><select></code>或<code><textarea></code>的内容改变时触发；</li> <li>submit：当<code><form></code>提交时触发；</li> <li>ready：当页面被载入并且DOM树完成初始化后触发。</li> </ul> <p>其中，<code>ready</code>仅作用于<code>document</code>对象。由于<code>ready</code>事件在DOM完成初始化后触发，且只触发一次，所以非常适合用来写其他的初始化代码。假设我们想给一个<code><form></code>表单绑定<code>submit</code>事件，下面的代码没有预期的效果：</p> <pre><code class="language-javascript"><html> <head> <script> // 代码有误: $('#testForm').on('submit', function () { alert('submit!'); }); </script> </head> <body> <form id="testForm"> ... </form> </body> </code></pre> <p><strong>因为JavaScript在此执行的时候，<code><form></code>尚未载入浏览器</strong>，所以<code>$('#testForm)</code>返回<code>[]</code>，并没有绑定事件到任何DOM上。</p> <p>所以我们自己的<strong>初始化代码必须放到<code>document</code>对象的<code>ready</code>事件中，保证DOM已完成初始化：</strong></p> <pre><code class="language-javascript"><html> <head> <script> $(document).on('ready', function () { $('#testForm).on('submit', function () { alert('submit!'); }); }); </script> </head> <body> <form id="testForm"> ... </form> </body> </code></pre> <p>这样写就没有问题了。因为相关代码会在DOM树初始化后再执行。</p> <p>由于<code>ready</code>事件使用非常普遍，所以可以这样简化：</p> <pre><code class="language-javascript">$(document).ready(function () { // on('submit', function)也可以简化: $('#testForm).submit(function () { alert('submit!'); }); }); </code></pre> <p><strong>甚至还可以再简化为：</strong></p> <pre><code class="language-javascript">$(function () { // init... init是初始化函数 }); </code></pre> <p>上面的这种写法最为常见。如果你遇到<code>$(function () {...})</code>的形式，牢记这是<code>document</code>对象的<code>ready</code>事件处理函数。</p> <p>完全可以反复绑定事件处理函数，它们会依次执行：</p> <pre><code class="language-javascript">$(function () { console.log('init A...'); }); $(function () { console.log('init B...'); }); $(function () { console.log('init C...'); }); </code></pre> <hr> <h5 id="4事件参数">4、事件参数</h5> <p>有些事件，如<code>mousemove</code>和<code>keypress</code>，我们需要获取鼠标位置和按键的值，否则监听这些事件就没什么意义了。所有事件都会传入<code>Event</code>对象作为参数，可以从<code>Event</code>对象上获取到更多的信息：</p> <pre><code class="language-javascript"><p> mousemove:<span id="testMouseMoveSpan"></span> </p> <div id="testMouseMoveDiv" style="display: block; width: 300px; height: 120px; border: 1px solid #ccc;"> 在此区域移动鼠标试试 </div> <script> $(function () { $('#testMouseMoveDiv').mousemove(function (e) { $('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY); }); }); </script> </code></pre> <hr> <h5 id="5取消绑定">5、取消绑定</h5> <p>一个已被绑定的事件可以解除绑定，通过<code>off('click', function)</code>实现：</p> <pre><code class="language-javascript">function hello() { alert('hello!'); } a.click(hello); // 绑定事件 // 10秒钟后解除绑定: setTimeout(function () { a.off('click', hello); }, 10000); </code></pre> <p>需要特别注意的是，下面这种写法是无效的：</p> <pre><code class="language-javascript">// 绑定事件: a.click(function () { //匿名函数1 alert('hello!'); }); // 解除绑定: a.off('click', function () { ///匿名函数2 alert('hello!'); }); </code></pre> <p>这是因为两个匿名函数虽然长得一模一样，但是它们是两个<em>不同</em>的函数对象，<code>off('click', function () {...})</code>无法移除已绑定的第一个匿名函数。</p> <p>为了实现移除效果，可以使用<code>off('click')</code>一次性移除已绑定的<code>click</code>事件的所有处理函数。</p> <p>同理，无参数调用<code>off()</code>一次性移除已绑定的所有类型的事件处理函数。</p> <hr> <h5 id="6事件触发条件">6、事件触发条件</h5> <p>一个需要注意的问题是，事件的触发总是由用户操作引发的。例如，我们监控文本框的内容改动：</p> <pre><code class="language-javascript">var input = $('#test-input'); input.change(function () { console.log('changed...'); }); </code></pre> <p>当用户在文本框中输入时，就会触发<code>change</code>事件。但是，如果用JavaScript代码去改动文本框的值，将不会触发<code>change</code>事件：</p> <pre><code class="language-javascript">var input = $('#test-input'); input.val('change it!'); // 无法触发change事件 </code></pre> <p>有些时候，我们希望用代码触发<code>change</code>事件，可以直接调用无参数的<code>change()</code>方法来触发该事件：</p> <pre><code class="language-javascript">var input = $('#test-input'); input.val('change it!'); input.change(); // 触发change事件 </code></pre> <p><code>input.change()</code>相当于<code>input.trigger('change')</code>，它是<code>trigger()</code>方法的简写。</p> <hr> <h5 id="7浏览器安全限制">7、浏览器安全限制</h5> <p>在浏览器中，有些JavaScript代码<strong>只有在用户触发下才能执行，自动弹窗将被拦截</strong>，例如，<code>window.open()</code>函数：</p> <pre><code class="language-javascript">// 无法弹出新窗口，将被浏览器屏蔽: $(function () { window.open('/'); }); </code></pre> <p><strong>这些“敏感代码”只能由用户操作来触发：</strong></p> <pre><code class="language-javascript">var button1 = $('#testPopupButton1'); var button2 = $('#testPopupButton2'); function popupTestWindow() { window.open('/'); } button1.click(function () { popupTestWindow(); }); button2.click(function () { // 不立刻执行popupTestWindow()，3秒后执行: setTimeout(popupTestWindow, 3000); }); </code></pre> <p>当用户点击<code>button1</code>时，<code>click</code>事件被触发，由于<code>popupTestWindow()</code>在<code>click</code>事件处理函数内执行，这是浏览器允许的，而<code>button2</code>的<code>click</code>事件并未立刻执行<code>popupTestWindow()</code>，延迟执行的<code>popupTestWindow()</code>将被浏览器拦截 (<strong>实测Edge可以延迟弹窗，可能是由于也是绑定的click事件，是经过用户点击允许的</strong>)。</p> <hr> <h4 id="85操作dom">8.5、操作DOM</h4> <p>jQuery的选择器很强大，用起来又简单又灵活，但是搞了这么久，我拿到了jQuery对象，到底要干什么？</p> <p>答案当然是操作对应的DOM节点啦！</p> <p>回顾一下修改DOM的CSS、文本、设置HTML有多么麻烦，而且有的浏览器只有innerHTML，有的浏览器支持innerText，有了jQuery对象，不需要考虑浏览器差异了，全部统一操作！</p> <hr> <h5 id="1修改text显示文本和html源码">1、修改Text(显示文本)和HTML（源码）</h5> <p>jQuery对象的<code>text()</code>和<code>html()</code>方法分别获取节点的文本和原始HTML文本，例如，如下的HTML结构：</p> <pre><code class="language-javascript"><!-- HTML结构 --> <ul id="test-ul"> <li class="js">JavaScript</li> <li name="book">Java & JavaScript</li> </ul> </code></pre> <p>分别获取文本和HTML：</p> <pre><code class="language-javascript">$('#test-ul li[name=book]').text(); // 'Java & JavaScript' $('#test-ul li[name=book]').html(); // 'Java & JavaScript' </code></pre> <p>如何设置文本或HTML？</p> <p>jQuery的API设计非常巧妙：<strong>无参数调用<code>text()</code>是获取文本，传入参数就变成设置文本，HTML也是类似操作</strong></p> <p><strong>另外：</strong></p> <p>一个jQuery对象可以包含0个或任意个DOM对象，它的方法实际上会作用在对应的每个DOM节点上。在上面的例子中试试：</p> <pre><code class="language-javascript">$('#test-ul li').text('JS'); // 两个节点都变成了JS </code></pre> <p>所以jQuery对象的另一个好处是我们可以执行一个操作，作用在对应的一组DOM节点上。即使选择器没有返回任何DOM节点，调用jQuery对象的方法仍然不会报错：</p> <pre><code class="language-javascript">// 如果不存在id为not-exist的节点： $('#not-exist').text('Hello'); // 代码不报错，没有节点被设置为'Hello' </code></pre> <p>这意味着jQuery帮你免去了许多<code>if</code>语句。</p> <hr> <h5 id="2修改css">2、修改CSS</h5> <p>jQuery对象有“批量操作”的特点，这用于修改CSS实在是太方便了。考虑下面的HTML结构：</p> <pre><code class="language-javascript"><!-- HTML结构 --> <ul id="test-css"> <li class="lang dy"><span>JavaScript</span></li> //文字和背景颜色会改变 <li class="lang"><span>Java</span></li> <li class="lang dy"><span>Python</span></li> //文字和背景颜色会改变 <li class="lang"><span>Swift</span></li> <li class="lang dy"><span>Scheme</span></li> //文字和背景颜色会改变 </ul> </code></pre> <p>要高亮显示动态语言，调用jQuery对象的<code>css('name', 'value')</code>方法，我们用一行语句实现：</p> <pre><code class="language-javascript">$('#test-css li.dy>span').css('background-color', '#ffd351').css('color', 'red'); //子代选择器 </code></pre> <p><strong>注意</strong>，jQuery对象的所有方法都返回一个jQuery对象（可能是新的也可能是自身），这样我们可以进行链式调用，非常方便。</p> <p>jQuery对象的<code>css()</code>方法可以这么用：<strong>不传入值就是获取，传入值就是设置，同text()和html()</strong></p> <pre><code class="language-javascript">var div = $('#test-div'); div.css('color'); // '#000033', 获取CSS属性 div.css('color', '#336699'); // 设置CSS属性 div.css('color', ''); // 清除CSS属性 </code></pre> <p>为了和JavaScript保持一致，CSS属性可以用<code>'background-color'</code>和<code>'backgroundColor'</code>两种格式。</p> <p><code>css()</code>方法将作用于DOM节点的<code>style</code>属性，具有最高优先级。如果要修改<code>class</code>属性，可以用jQuery提供的下列方法：</p> <pre><code class="language-javascript">var div = $('#test-div'); div.hasClass('highlight'); // false， class是否包含highlight div.addClass('highlight'); // 添加highlight这个class div.removeClass('highlight'); // 删除highlight这个class </code></pre> <hr> <h5 id="3显示和隐藏dom">3、显示和隐藏DOM</h5> <p>要隐藏一个DOM，我们可以设置CSS的<code>display</code>属性为<code>none</code>，利用<code>css()</code>方法就可以实现。不过，要显示这个DOM就需要恢复原有的<code>display</code>属性，这就得先记下来原有的<code>display</code>属性到底是<code>block</code>还是<code>inline</code>还是别的值。</p> <p>考虑到显示和隐藏DOM元素使用非常普遍，jQuery直接提供<code>show()</code>和<code>hide()</code>方法，我们不用关心它是如何修改<code>display</code>属性的，总之它能正常工作：</p> <pre><code class="language-javascript">var a = $('a[target=_blank]'); a.hide(); // 隐藏 a.css('display',none) a.show(); // 显示 a.css('display',block/inline) 需要记住原先的属性值 </code></pre> <p><strong>注意，隐藏DOM节点并未改变DOM树的结构，它只影响DOM节点的显示。这和删除DOM节点是不同的。</strong></p> <hr> <h5 id="4获取dom信息">4、获取DOM信息</h5> <p>利用jQuery对象的若干方法，我们直接可以获取DOM的高宽等信息，而无需针对不同浏览器编写特定代码：</p> <pre><code class="language-javascript">// 浏览器可视窗口大小: $(window).width(); // 800 $(window).height(); // 600 // HTML文档大小: $(document).width(); // 800 $(document).height(); // 3500 // 某个div的大小: var div = $('#test-div'); div.width(); // 600 div.height(); // 300 div.width(400); // 设置CSS属性 width: 400px，是否生效要看CSS是否有效 div.height('200px'); // 设置CSS属性 height: 200px，是否生效要看CSS是否有效 </code></pre> <p><code>attr()</code>和<code>removeAttr()</code>方法用于操作DOM节点的<strong>属性(attribute)</strong>：</p> <pre><code class="language-javascript">// <div id="test-div" name="Test" start="1">...</div> var div = $('#test-div'); div.attr('data'); // undefined, 属性不存在 div.attr('name'); // 'Test' div.attr('name', 'Hello'); // div的name属性变为'Hello' div.removeAttr('name'); // 删除name属性 div.attr('name'); // undefined </code></pre> <p><code>prop()</code>方法和<code>attr()</code>类似，<strong>但是HTML5规定有一种属性在DOM节点中可以没有值，只有出现与不出现两种</strong>，例如：</p> <pre><code class="language-javascript"><input id="test-radio" type="radio" name="test" checked value="1"> </code></pre> <p>等价于：</p> <pre><code class="language-javascript"><input id="test-radio" type="radio" name="test" checked="checked" value="1"> </code></pre> <p><code>attr()</code>和<code>prop()</code>对于属性<code>checked</code>处理有所不同：</p> <p>prop() 方法设置或返回被选元素的属性和值。 <strong>property 属性</strong></p> <p>当该方法用于<strong>返回</strong>属性值时，则返回第一个匹配元素的值。</p> <p>当该方法用于<strong>设置</strong>属性值时，则为匹配元素集合设置一个或多个属性/值对。</p> <p><strong>注意：</strong>prop() 方法应该用于检索属性值，例如 <strong>DOM 属性</strong>（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected）。</p> <p><strong>提示：</strong>如需检索 <strong>HTML 属性</strong>，请使用 attr() 方法代替。</p> <p><strong>提示：</strong>如需移除属性，请使用 removeProp() 方法。</p> <pre><code class="language-javascript">var radio = $('#test-radio'); radio.attr('checked'); // 'checked' radio.prop('checked'); // true </code></pre> <p><code>prop()</code>返回值更合理一些。不过，用<code>is()</code>方法判断更好：</p> <pre><code class="language-javascript">var radio = $('#test-radio'); radio.is(':checked'); // true </code></pre> <p><strong>类似的属性还有<code>selected</code></strong>，处理时最好用<code>is(':selected')</code>。</p> <hr> <h5 id="5操作表单">5、操作表单</h5> <p>对于表单元素，jQuery对象统一提供<code>val()</code>方法获取和设置对应的<code>value</code>属性：</p> <pre><code class="language-javascript"> <input id="test-input" name="email" value="test"> <select id="test-select" name="city"> //下拉框 <option value="BJ" selected>Beijing</option> //默认值为BJ <option value="SH">Shanghai</option> <option value="SZ">Shenzhen</option> </select> <textarea id="test-textarea">Hello

    可见，一个val()就统一了各种输入框的取值和赋值的问题。

    ---

    9、可拓展

    AJAX、Promise、Canvas、XML

学习笔记

相关

---

Git--学习笔记（三）远程仓库克隆到本地

[学习笔记] 整数规划之割平面法 How and why?

计网学习笔记(5) - 物理层与媒介

selenium python学习笔记之八 窗口截图、验证码处理

AntDesign vue学习笔记（三）嵌套路由使用

vue学习笔记（一）--来源尚硅谷

【学习笔记】TSlib校准原理

Go语言核心36讲（Go语言实战与应用六）--学习笔记

docker 学习笔记-7

SpringMVC学习笔记

Spring 学习笔记

[机器学习笔记(一)] TensorFLow安装

标签