Java
进阶篇

JavaScript-基础

1997 年，以 JavaScript 1.1 为基础。由来自 Netscape、Sun、微软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成的 TC39（ECMA 的小组）锤炼出了 ECMA-262，也就是 ECMAScript1.0。

1998 年 6 月，ECMAScript 2.0 版发布。

1999 年 12 月，ECMAScript 3.0 版发布，成为 JavaScript 的通行标准，得到了广泛支持。

2007 年 10 月，ECMAScript 4.0 版草案发布：分歧太大，失败告终。

2009 年 12 月，ECMAScript 5.0 版正式发布

2015 年 6 月 17 日，ECMAScript 6 发布正式版本，即 ECMAScript 2015。

可阅读：https://www.w3school.com.cn/js/pro_js_history.asp

# 今天的 JavaScript

2003 年之前，JavaScript 被认为“牛皮鲜”，用来制作页面上的广告，弹窗、漂浮的广告。什么东西让人烦，什么东西就是 JavaScript 开发的。所以浏览器就推出了屏蔽广告功能。

2004 年 JavaScript 命运开始改变了，那一年谷歌公司，开始带头使用 Ajax 技术了，Ajax 技术就是 JavaScript 的一个应用。并且，那时候人们逐渐开始提升用户体验了。

2010 年的时候，人们更加了解 HTML5 技术了，HTML5 推出了一个东西叫做 Canvas（画布），工程师可以在 Canvas 上进行游戏制作，利用的就是 JavaScript。

2011 年，Node.js 诞生，使 JavaScript 能够开发服务器程序了。

今天，JavaScript 工程师是绝对的吃香，能够和 iOS、Android 工程师比肩，毫不逊色的。

# 初识

JavaScript 是一种网页编程技术，其功能强大，实现简单方便，入门简单，即使是程序设计新手也可以非常快速容易地使用 JavaScript 进行简单的编程。

JavaScript 就是一种基于对象和事件驱动，并具有安全性能的脚本语言，脚本语言简单理解就是在客户端的浏览器就可以互动响应处理程序的语言，而不需要服务器的处理和响应，当然 JavaScript 也可以做到与服务器的交互响应，而相对的服务器语言像 asp php jsp 等需要将命令上传服务器，由服务器处理后回传处理结果。

JavaScript 可以被嵌入到 HTML 文件中，不需要经过 Web 服务器就可以对用户操作作出响应，使网页更好地与用户交互；在利用客户端个人电脑性能资源的同时，适当减小服务器端的压力，并减少用户等待时间。

特点如下

简单易用

可以使用任何文本编辑工具编写
只需要浏览器就可以执行程序

解释执行（解释语言）

事先不编译
逐行执行
无需进行严格的变量声明

基于对象

内置大量现成对象，编写少量程序可以完成目标

# 组成

ECMAScript：JavaScript 的语法标准。
DOM：JavaScript 操作网页上的元素的 API
BOM：JavaScript 操作浏览器的部分功能的 API

# JavaScript 和 ECMAScript 的关系

ECMAScript 是一种由 Ecma 国际前身为欧洲计算机制造商协会，英文名称是 European Computer Manufacturers Association，制定的标准。

简单来说 ECMAScript 不是一门语言，而是一个标准 ，符合这个标准的比较常见的有：JavaScript、Action Script（Flash 中用的语言）。就是说，你 JavaScript 学完了，Flash 中的程序也会写了。

ECMAScript 在 2015 年 6 月，发布了 ECMAScript 6 版本，语言的能力更强。但是，浏览器的厂商不能那么快的去追上这个标准。

# 和 HTML 的结合方式

与 css 类似，直接嵌入到 html 页面中

<head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        // 书写 JS 代码
        alert("HelloWorld");
    </script>
</head>

1
2
3
4
5
6
7

文件调用：JavaScript 代码写到另一个文件当中（其后缀通常为".js"），然后用以下标记把它嵌入到文档中

<head>
    <meta charset="UTF-8">
    <script src="demo.js" type="text/javascript"></script>
</head>

1
2
3
4

PS：写 js 代码的时候，分号不能省略

PS：推荐将 JS 代码写在 html 结束标签后边，将多个 JS 文件合成为一个 JS 文件

# 输出消息的几种方式

alert() 在页面弹出一个对话框，早期 JS 调试使用。
confirm() 在页面弹出一个对话框，常配合 if 判断使用。
console.log() 将信息输入到控制台，用于 js 调试。
prompt() 弹出对话框，用于接收用户输入的信息。
document.write() 在页面输出消息，该写法不仅能输出信息，还能输出标签。


document.write("宝塔镇河妖<br/>小鸡炖蘑菇");

1
2
3

# 注释

单行注释 // 注释内容

多行注释 /* 注释内容 */

# 变量

变量定义： var 自定义名称；


var uname="小黑";

1
2
3

PS： = 为赋值符号，不是我们理解的等号

# 命名规范

变量名只能以字符或下划线_开头
变量可以包含数字、从 A 至 Z 的大小字母
JavaScript 严格区分大小写，computer 和 Computer 是两个完全不同的变量
禁止使用 javascript 的保留关键字作为变量名（见下面的保留关键字图）

关键字：JavaScript 语言用于程序控制或者执行特定操作的英语单词。

保留字：ECMAScript 规范中，预留的某些词汇，以便于以后某个时间会用于关键字。

PS：我们写的代码起名字的时候不能用跟关键字和保留字重名。不然会报错。

# 变量的作用域

块级作用域

在其它语言中，任何一对花括号中的语句都属于一个块，在这之中定义的所有变量在代码块外都是不可见的
JavaScript 中没有块级作用域

全局变量

定义在 script 或者不属于某个函数的变量

局部变量

定义在函数内部的变量

其他

函数内部可以访问到该函数所属的外部作用域的变量（作用域链）
不使用 var 声明的变量是全局变量，不推荐使用。
变量退出作用域之后会销毁，全局变量关闭网页或浏览器才会销毁

# 数据类型

变量名 a 和变量名 b 保存的数据是否一样？


var a=1;
var b="1";

1
2
3
4

# 简单数据类型

Number: 数字类型


// 十进制表示法
var n1=1234;

// 十六进制，从 0-9，a(A)-f(F) 表示数字。以 0x 开头
var n2=0x1234;

// 八进制表示法，0 开头，0-7 组成
var n3=01234;

1
2
3
4
5
6
7
8
9
10

String: 字符串类型


// 凡是用双引号或者单引号引起的都是字符串
var uname="小黑";
var msg='HelloWorld';

1
2
3
4
5

Boolean: 布尔类型


// 只有两个值一个是 true, 一个是 false.   实际运算中 true=1,false=0

var a=1;
var b=2;

console.log(a==b);
console.log(a>=b);

1
2
3
4
5
6
7
8
9

undefined: 变量未初始化


var s1;
// undefined 定义了变量，没有给变量赋值，变量在内存中是存在的
console.log(s1);

1
2
3
4
5

null：空类型


// 变量未引用  值为空   object

var s1=null;

1
2
3
4
5

# 复杂数据类型

复杂数据类型又称为复合数据类型或者引用数据类型

Object: 对象（引用）
Array: 数组

PS：使用 typeof（变量名）可以获取该变量的数据类型

# 运算符

运算符	描述
+	1. 实现加法运算（数字与数字）2. 字符串链接（字符串与字符串或者数字相加）
-	减法运算
*	乘法运算
/	除法运算
%	获取余数（求模或者称为求余）
()	优先级
+=	a+=b 等价于 a=a+b
-=	a-=b 等价于 a=a-b
/=	a`/`=b 等价于 a=a`/`b
++	i++ 等价于 i=i+1
--	i-- 等价于 i=i-1

PS：NaN: Not a Number 表示不是一个数字，判断是不是一个数字使用： isNaN（变量名）

PS：Infinity：无穷大例如： var number=7/0

逻辑运算符

# 数据类型转换

将数字类型转换为字符串类型

隐式类型转换
强制类型转换（String(), 变量.tostring()）

将字符串转换为数字类型

隐式类型转换
强制类型转换 (Number(),parseInt(), parseFloat())

将其他数据类型转换为布尔类型

强制类型转换 :Boolean()
数字 0 转换为 false

# if 语句

由运算符和操作数组成的合法序列称为语句

根据语句执行的流程划分为顺序结构、选择结构和循环结构

写法：

If（判断条件）｛

    判断条件成立时执行语句；
｝

1
2
3
4
5

If（判断条件）｛
    判断条件成立时执行语句

｝else{
    判断条件不成立时执行
}

1
2
3
4
5
6

实例：

var age=22;

if (age>30){

    document.write("岁数太大了");
}else{
    document.write("年轻有为，有钱途！");
}

1
2
3
4
5
6
7
8

# 案例练习

当点击确定，弹出消息提示"您已退出" 当点击取消弹出消息“您已取消退出”

接收用户输入一个数字，判断是否是偶数，如果是偶数那么在控制台中将该数字输出，如果不是偶数那么在控制台中提示该数字不是偶数

接收用户输入一个数字，判断当前数字是否在 20 到 70 之间，如果在该数字范围内，请将该数字输出，否则提示不在该范围内。

写一个程序接收用户输入的值，该值和随机产生的随机数（0-99 包含 0 和 99）做比较，如果用户输入的值大于随机数输出：您赢了，否则您输了

# if..else 嵌套

# 案例练习

接收用户输入年龄。判断当前年龄所属于哪个间断？
- 比如：年龄 20 所处的阶段为青年
- 注意：以 10 岁为一个年龄段
接收用户输入的成绩和姓名，每 15 分为一个档。以 50 分为起点，判断当前学生成绩在哪个范围并只给出提示信息（优，良，差，）同时如果成绩正好为 90 分，还要在控制台中输出当前学生的姓名及提示信息（优，良，差）。

# switch 语句

写法


var age=15;

switch(age){

    case 1:
    console.log("现在是 1 岁");
    case 2:
    console.log("现在是 2 岁");
    break;
    default:
    console.log("以上情况都不成立");
}

1
2
3
4
5
6
7
8
9
10
11
12
13

该语句属于将某个变量所有可能的值进行逐一判断，慎用

该语句存在 case 穿透情况

# 案例练习

在网页中获取用户输入的成绩信息，每 20 分算一个等级，不同等级显示不同的评语，在控制台中输出信息。
- 比如：输入 20 弹出消息框成绩 20 输入 40 弹出消息框 40
根据用户输入月份，显示对应的季节（例如：3,4,5 为春季）

# 三元运算符

语法：

条件表达式？结果 1: 结果 2

含义：

问号前面的位置是判断的条件，判断结果为 boolean 型，为 true 时执行结果 1，为 false 时执行结果 2。

# 案例练习

一个加油站为了鼓励车主多加油，所以加的多有优惠。

92 号汽油，每升 6 元；如果大于等于 20 升，那么每升 5.9；
97 号汽油，每升 7 元；如果大于等于 30 升，那么每升 6.95
编写 JS 程序，用户输入自己的汽油编号，然后输入自己加多少升，弹出价格。

首先接收用户输入的用户名，判断该用户名是否是 admin, 如果不是直接程序终止，如果是那么再次提示让用户输入密码，如果密码是 88888, 那么提示登录成功，否则提示登录失败。

写一个程序，接收用户输入的三个数字，使用三元运算表达式找出最大值

# while 循环

while 循环重复执行一段代码，直到某个条件不再满足

语法定义

 while（判断条件）
 {
         循环代码
 }

1
2
3
4
5

# do while 循环

do while 结构的基本原理和 while 结构是基本相同的，但是它保证循环体至少被执行一次。因为它是先执行代码，后判断条件

语法定义：

do{
      循环代码；
}while（条件）

1
2
3

# for 循环

语法

for （初始化；条件；增量）
{
    循环代码；
}

1
2
3
4
5

# 案例练习

计算 1 到 100 的和
将 1 到 100 之间所有是 6 的倍数的数字输出到控制台中
在页面中打印两行 10 颗 *
在页面中打印一个直角三角形

在页面中打印 99 乘法表

# break 语句

有时候在循环体内，需要立即跳出循环或跳过循环体内其余代码而进行下一次循环。这个时候需要 break 和 continue

break 语句是彻底结束当前循环，直接执行循环外后面的代码。格式如下：

while(i<10){
    if（特殊情况）{
        break;

    }
    // 循环代码
}

1
2
3
4
5
6
7

# continue 语句

continue 的作用是仅仅跳过本次循环，而整个循环体继续执行。它的格式如下：

while(i<10){
    if（特殊情况）{
        continue;
    }
    // 循环代码
}

1
2
3
4
5
6

# 案例练习

请将 1 到 100 之间所有数字输出，排除是 3 的倍数的数字
接收用户输入的用户名和密码，如果用户名不是 admin 或者密码不是 888，就一直提示用户重新输入，如果用户名和密码都正确，那么程序立马停止（使用 while 循环做）

# 数组

如果，要保存一个数据，我们可以定义一个变量去保存。那么我要保存 100 个数据呢？亲我需要定义一百个变量么？

数组变量可以存放多个数据。好比一个团，团里有很多人

# 数组定义

var  myarray=new Array();

# 数组赋值

// 创建数组同时赋值
var myarray = new Array(66,80,90,77,59);

// 直接输入一个数组（称 "字面量数组")
 var myarray = [66,80,90,77,59];

1
2
3
4
5
6

PS：数组存储的数据可以是任何类型（数字、字符、布尔值等）

# 数组遍历

Length 属性表示数组的长度，即数组中元素的个数

遍历就是获取组的每一项

for （var I =0; i < arr.length; i++）{
    console.log( arr[ i ] );
}

1
2
3

# 案例练习

1-100 之间能被 3 整除的数值放到数组中
求一个数组中的和和平均值
求数组中最大值和最小值和其位置
将数组中值为 0 的去掉，剩下的存到新数组
反转数组
将数组中的数字按照从小到大排序

# 函数（方法）function

通常情况下，函数是完成特定功能的一段代码

作用：

将复杂的事情简单化。将重复使用的代码进行调用

# 定义一个函数

函数声明

JavaScript 解析器首先会把当前作用域的函数声明提前到整个作用域的最前面。


 function 函数名（）{
    方法体
 }

1
2
3
4

函数表达式

//myFun 和 f 等价
var myFun = function (a,b){
    return a + b;
}
console.log(myFun(6,7));

1
2
3
4
5
6

匿名函数

没有命名的函数，一般用在绑定事件的时候

function(){

}

1
2
3

# 案例练习

请写出一个判断一个数是不是偶数的函数
请模拟写出一个 Math.max(x,y) 的函数

# 参数

形参

//a,b 是形参，占位用，函数定义时形参无值
function f(a,b){

}

1
2
3
4

实参

/*
x,y 实参，有具体的值，会把 x,y 复制一份给函数内部的 a 和 b，函数内部的值是复制的新值，无法修改外部的 x,y
*/
var x= 5,y=6;

f(x,y);

1
2
3
4
5
6

JavaScript 中的函数相对于其它语言的函数比较灵（特）活（殊）

在其它语言中实参个数必须和形参个数一致，但是 JavaScript 中没有函数签名的概念，实参个数和形参个数可以不相等

# 返回值

函数程序运行后的结果外部需要使用的时候，我们不能直接给与，需要通过 return 返回。
总结：函数内部，return 后面的值就是返回值；
作用：函数执行后剩下结果就是返回值。
函数执行完毕，会不会留下点儿什么，取决于有没有返回值

var temp = 函数名 () = 该函数的返回值；

JavaScript 中的函数比较奇葩

如果函数没有显示的使用 return 语句，那么函数有默认的返回值：undefined
如果函数使用 return 语句，那么跟再 return 后面的值，就成了函数的返回值
如果函数使用 return 语句，但是 return 后面没有任何值，那么函数的返回值也是：undefined
函数使用 return 语句后，这个函数会在执行完 return 语句之后停止并立即退出，也就是说 return 后面的所有其他代码都不会再执行。
推荐的做法是要么让函数始终都返回一个值，要么永远都不要返回值。

# this

this 引用的是一个对象。对于最外层代码与函数内部的情况，其引用目标是不同的。
此外，即使在函数内部，根据函数调用方式的不同，引用对象也会有所不同。需要注意的是，this 引用会根据代码的上下文语境自动改变其引用对象（谁调用 this 就是谁）。
构造函数中的 this，始终是 new 的当前对象


function test() {
console.log(this);
}
// 上面的 this 是 window，实际是 window 调用 test()
test();  //window.test();


p1.sayHi();
//sayHi() 中的 this，是 p1，此时是 p1 调用 sayHi()

1
2
3
4
5
6
7
8
9
10

# 案例练习

翻转数组，返回一个新数组
求 2 个数中的最大值

# 回调函数

简单理解：就是函数做为参数。（这样的......）

复杂理解：回调函数就是一个通过函数调用的函数。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，我们就说这是回调函数。

# JSON

JavaScript Object Notation（JavaScript 对象表示形式）
JavaScript 的子集

JSON 和对象字面量的区别

JSON 的属性必须用双引号引号引起来，对象字面量可以省略
var o = {}; 对象字面量

{
    "name" : "zs",
    "age" : 18,
    "sex" : true,
    "sayHi" : function() {
        console.log(this.name);
    }
};

1
2
3
4
5
6
7
8
9

如果 JSON 的格式不标准可能会出错

举例：

var str = "{'name':18}";

//JSON.parse()  把 JSON 形式的字符串解析成对象，如果传递的参数不是标准的 JSON 格式的字符串，parse() 会出错
console.log(JSON.parse(str));

1
2
3
4

# 对象

生活中的对象，一个车、一个手机

对象具有特征和行为

面向对象和基于对象

面向对象：
- 可以创建自定义的类型、很好的支持继承和多态。面向对象的语言 c++/java/c#...
- 面向对象的特征：封装、继承、多态
- 万物皆对象：世间的一切事物都可以用对象来描述
基于对象：
- 无法创建自定义的类型、不能很好的支持继承和多态。基于对象的语言 JavaScript

# 内置对象

# Object 对象

Object 类型，我们也称为一个对象。是 JavaScript 中的引用数据类型。

它是一种复合值，它将很多值聚合到一起，可以通过名字访问这些值。

对象也可以看做是属性的无序集合，每个属性都是一个名 / 值对。

对象除了可以创建自有属性，还可以通过从一个名为原型的对象那里继承属性

除了字符串、数字、true、false、null 和 undefined 之外，JS 中的值都是对象。

# 创建对象

第一种方式

var person=new Object();

person.name='孙悟空';

person.age=18;

1
2
3
4
5
6

第二种方式

var person={
    name:"孙悟空",
    age:18
};

1
2
3
4

对象属性的访问

对象.属性名
对象 ['属性名']

# BOM

ECMAScript 无疑是 JavaScript 的核心，但是要想在浏览器中使用 JavaScript，那么 BOM（浏览器对象模型）才是真正的核心。

BOM 提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。BOM 将浏览器中的各个部分转换成了一个一个的对象，我们通过修改这些对象的属性，调用他们的方法，从而控制浏览器的各种行为。

# Window 对象

window 对象是 BOM 的核心，它表示一个浏览器的实例。在浏览器中我们可以通过 window 对象来访问操作浏览器，同时 window 也是作为全局对象存在的。

全局作用域：

window 对象是浏览器中的全局对象，因此所有在全局作用域中声明的变量、对象、函数都会变成 window 对象的属性和方法。
浏览器中提供了四个属性用来确定窗口的大小：
网页窗口的大小：innerWidth、innerHeight
浏览器本身的尺寸：outerWidth、outerHeight

使用 window.open() 方法既可以导航到一个特定的 URL，也可以打开一个新的浏览器窗口。这个方法需要四个参数：

需要加载的 url 地址
窗口的目标
一个特性的字符串
是否创建新的历史记录

超时调用：超过一定时间以后执行指定函数

setTimeout()

需要两个参数：

要执行的内容
超过的时间

取消超时调用：clearTimeout()

超时调用都是在全局作用域中执行的

间歇调用：每隔一段时间执行指定代码

setInterval()

需要两个参数

要执行的代码
间隔的时间

取消间隔调用：clearInterval()

# Location 对象

location 对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。

href 属性：

href 属性可以获取或修改当前页面的完整的 URL 地址，使浏览器跳转到指定页面。

assign() 方法

所用和 href 一样，使浏览器跳转页面，新地址错误参数传递到 assign () 方法中

replace() 方法

功能一样，只不过使用 replace 方法跳转地址不会体现到历史记录中。

reload() 方法

用于强制刷新当前页面

# Navigator 对象

navigator 对象包含了浏览器的版本、浏览器所支持的插件、浏览器所使用的语言等各种与浏览器相关的信息。我们有时会使用 navigator 的 userAgent 属性来检查用户浏览器的版本。

# Screen 对象

screen 对象基本上只用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等。该对象作用不大，我们一般不太使用。

# History 对象

history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。

go() 方法可以在用户的历史记录中任意跳转，可以向后也可以向前。

向后跳转：back()

向前跳转：forward()

# Document

document 对象也是 window 的一个属性，这个对象代表的是整个网页的文档对象。

我们对网页的大部分操作都需要以 document 对象作为起点。

# DOM

DOM，全称 Document Object Model 文档对象模型。

JS 中通过 DOM 来对 HTML 文档进行操作。只要理解了 DOM 就可以随心所欲的操作 WEB 页面。

文档

文档表示的就是整个的 HTML 网页文档

对象

对象表示将网页中的每一个部分都转换为了一个对象。

模型

使用模型来表示对象之间的关系，这样方便我们获取对象。

# 节点

节点 Node，是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。比如：html 标签、属性、文本、注释、整个文档等都是一个节点。

虽然都是节点，但是实际上他们的具体类型是不同的。比如：标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。节点的类型不同，属性和方法也都不尽相同。

常用节点分为四类

文档节点：整个 HTML 文档
元素节点：HTML 文档中的 HTML 标签
属性节点：元素的属性
文本节点：HTML 标签中的文本内容

# 节点属性

文档节点 (document)

代表的是整个 HTML 文档，网页中的所有节点都是它的子节点。document 对象作为 window 对象的属性存在的，我们不用获取可以直接使用。

通过该对象我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点对象。

元素节点 (Element)

HTML 中的各种标签都是元素节点，这也是我们最常用的一个节点。浏览器会将页面中所有的标签都转换为一个元素节点，我们可以通过 document 的方法来获取元素节点。比如：

// 根据 id 属性值获取一个元素节点对象。
document.getElementById()

1
2

文本节点 (Text)

文本节点表示的是 HTML 标签以外的文本内容，任意非 HTML 的文本都是文本节点。它包括可以字面解释的纯文本内容。

文本节点一般是作为元素节点的子节点存在的。获取文本节点时，一般先要获取元素节点。在通过元素节点获取文本节点。例如：

元素节点.firstChild;
获取元素节点的第一个子节点，一般为文本节点

属性节点

属性节点表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。

可以通过元素节点来获取指定的属性节点。例如：元素节点.getAttributeNode("属性名");

注意：我们一般不使用属性节点。

# 获取元素节点

通过 document 对象调用

// 通过 id 属性获取一个元素节点对象
document.getElementById();

// 通过标签名获取一组元素节点对象
document.getElementsByTagName();

// 通过 name 属性获取一组元素节点对象

document.getElementsByName();

1
2
3
4
5
6
7
8
9
10
11

通过具体的元素节点调用

// 返回当前节点的指定标签名后代节点
var div=document.getElementsByTagName("div");

// 属性，表示当前节点的所有子节点
var nodes=div.childNodes;

// 属性，表示当前节点的第一个子节点
var fnode=div.firstChild;

// 属性，表示当前节点的最后一个子节点
var lnode=div.lastChild;

// 属性，表示当前节点的父节点
var pnode=div.parentNode;

// 属性，表示当前节点的前一个兄弟节点
var prenode=div.previousSibling;

// 属性，表示当前节点的后一个兄弟节点
var nnode=div.nextSibling;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 元素节点的属性

获取，元素对象。属性名

var element=document.getElementById("mydiv");
// 获取节点属性
element.value

element.id

element.className

1
2
3
4
5
6
7
8

设置，元素对象。属性名 = 新的值

var element=document.getElementById("mydiv");
// 设置节点属性
element.value ="hello";
element.id = "id01";
element.className = "newClass";

1
2
3
4
5
6

# 其他属性

nodeValue

文本节点可以通过 nodeValue 属性获取和设置文本节点的内容

innerHTML

元素节点通过该属性获取和设置标签内部的 html 代码

# 使用 CSS 选择器进行查询

querySelector()

querySelectorAll()

这两个方法都是用 document 对象来调用，两个方法使用相同，都是传递一个选择器字符串作为参数，方法会自动根据选择器字符串去网页中查找元素。

不同的地方是 querySelector() 只会返回找到的第一个元素，而 querySelectorAll() 会返回所有符合条件的元素。

# 节点的修改

创建节点：document.createElement（标签名）

删除节点：父节点.removeChild（子节点）

替换节点：父节点.replaceChild（新节点，旧节点）

插入节点：

父节点.appendChild（子节点）
父节点.insertBefore（新节点 , 旧节点）

# 事件

就是文档或浏览器窗口中发生的一些特定的交互瞬间。

JavaScript 与 HTML 之间的交互是通过事件实现的。对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键，等等。

我们通过为指定事件绑定回调函数的形式来处理事件，当指定事件触发以后我们的回调函数就会被调用，这样我们的页面就可以完成和用户的交互了。

# 事件处理程序

我们可以通过两种方式为一个元素绑定事件处理程序：

通过 HTML 元素指定事件属性来绑定
通过 DOM 对象指定的属性来绑定

这两种方式都是我们日常用的比较多的，但是更推荐使用第二种方式。还有一种方式比较特殊我们称为设置事件监听器。使用如下方式：

元素对象.addEventListener()

通过 HTML 标签的属性设置

通过 HTML 属性来绑定事件处理程序是最简单的方式。<button onclick="alert('hello');alert('world')">按钮</button>

这种方式当我们点击按钮以后，onclick 属性中对应的 JS 代码将会执行，也就是点击按钮以后，页面中会弹出两个提示框。这种方式我们直接将代码编写到了 onclick 属性中，可以编写多行 js 代码，当然也可以事先在外部定义好函数。

这种方式的优点在于，设定步骤非常简单，并且能够确保事件处理程序会在载入时被设定。如果在函数的最后 return false 则会取消元素的默认行为

通过 DOM 对象的属性绑定

上面的写法虽然简单，但却将 JS 和 HTML 的代码编写到了一起，并不推荐使用，我们更推荐如下的写法：

var btn = document.getElementById('btn');

btn.onclick = function(){
    alert("hello");
};

1
2
3
4
5

这种写法将 HTML 代码和 JS 写在不同的位置，维护起来更加容易。

# 事件监听器

前边两种方式都可以绑定事件处理程序，但是它们都有一个缺点就是都只能绑定一个程序，而不能为一个事件绑定多个程序。这是我们就可以使用 addEventListener() 来处理，这个方法需要两个参数：一个是事件字符串，一个是响应函数。

btn.addEventListener('click' , function(){
    alert("hello");
});

1
2
3

但是要注意的是 ie8 以下的浏览器是不支持上边的方法的，需要使用 attachEvent 代替。也可以使用 removeEventListener() 和 detachEvent() 移除事件。

事件处理中的 this

在事件处理程序内的 this 所引用的对象即是设定了该事件处理程序的元素。也就是事件是给那个对象绑定的 this 就是哪个对象。

# 事件对象

在 DOM 对象上的某个事件被触发时，会产生一个事件对象 Event，这个对象中包含着所有事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。例如，鼠标操作导致的事件对象中，会包含鼠标位置的信息，而键盘操作导致的事件对象中，会包含与按下的键有关的信息。所有浏览器都支持 event 对象，但支持方式不同。

DOM 标准的浏览器会将一个 event 对象传入到事件的处理程序当中。无论事件处理程序是什么都会传入一个 event 对象。可以通过这种方式获取：

btn.onclick = function(event){
    alert(event.type);
};

1
2
3

Event 对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法也不一样。

Event 对象的通用属性 / 方法

# IE 中的事件对象

与访问 DOM 中的 event 对象不同，要访问 IE 中的 event 对象有几种不同的方式，取决于指定事件处理程序的方法。

在 IE 中 event 对象作为 window 对象的属性存在的，可以使用 window.event 来获取 event 对象。在使用 attachEvent() 的情况下，也会在处理程序中传递一个 event 对象，也可以按照前边的方式使用。

Event 对象的通用属性 / 方法（IE）

# 事件的三个阶段

1、事件执行的三个阶段依次为：事件捕获、执行当前点击的元素、事件冒泡


    <!-- 当我们给这三个元素绑定事件时，会依次从内到外执行事件，这种情况称为事件冒泡 -->
    <div id="div3">
        <div id="div2">
            <div id="div1">最内侧的 DIV</div>
        </div>
    </div>

    <script type="text/javascript">
        var div1=document.getElementById("div1");
        // 第三个参数的含义为产生事件冒泡，如果值为 true 则为产生事件捕获
        div.addEventListener("click",function(){},false)
    </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

给某个元素绑定事件 (onclick) 没有办法产生捕获，只能实现事件冒泡

2、事件委托：当前处理事件的对象无法处理或者不进行处理，将事件的处理交由其他对象对象来处理事件


<ul id="ul">
    <li>事件委托</li>
    <li>事件委托</li>
    <li>事件委托</li>
</ul>

<script type="text/javascript">
    var div1=document.getElementById("ul");
    // 第三个参数的含义为产生事件冒泡，如果值为 true 则为产生事件捕获
    ul.onclick=function(e){

        //e 为事件对象，当事件发生时可以通过该对象获取一些和事件相关的数据
        //e.target 为真正出发事件的对象（可以理解为事件源）

        e.target.style.color="red";
    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 事件的触发

事件的发生主要是由用户操作引起的。比如 mousemove 这个事件就是由于用户移动鼠标引起的，在鼠标指针移动的过程中该事件会持续发生。

当指定事件被触发时，浏览器就会调用对应的函数去响应事件，一般情况下事件没触发一次，函数就会执行一次。因此设置鼠标移动的事件可能会影响到鼠标的移动速度。所以设置该类事件时一定要谨慎。

# 事件的传播

关于事件传播网景和微软的不同理解

微软公司认为事件是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件然后依次向祖先元素传播
网景公司认为事件是由外向内传播，也就是当事件触发时，应该先触发最顶层的祖先元素然后一直到当前元素
W3C 综合了两个公司的方案将事件分为三个阶段
捕获阶段
- 在捕获阶段时，从最外层的祖先元素向目标元素进行事件捕获，但是默认不会触发事件
目标阶段
- 事件捕获到目标元素，捕获结束开始在目标元素上触发事件
事件冒泡
- 事件从目标元素向祖先元素传递，依次触发祖先元素的事件

注意：如果希望在捕获阶段就触发事件，可以将 addEventListener 的第三个参数设置为 true

IE8 及以下版本不支持事件捕获

在网页中标签与标签之间是有嵌套关系的，比如这样一个页面：

<html>
    <body>
        <div id="foo">
            <button id="bar">sample</button>
        </div>
    </body>
</html>

1
2
3
4
5
6
7

如果这时用户点击了 sample 按钮，则会以该按钮作为事件目标触发一次点击事件。这时，事件的处理将会分为捕获阶段、目标阶段、事件冒泡这三个阶段。

事件传播流程

捕获阶段：这一阶段会从 window 对象开始向下一直遍历到目标对象，如果发现有对象绑定了响应事件则做相应的处理。

目标阶段：这一阶段已经遍历结束，则会执行目标对象上绑定的响应函数。

事件冒泡阶段

这一阶段，事件的传播方式和捕获阶段正好相反，会从事件目标一直向上遍历，直至 window 对象结束，这时对象上绑定的响应函数也会执行。

# 取消事件传播

我们可以使用 event 对象的两个方法完成：

stopPropagation()
stopImmediatePropagation()

取消默认行为：

preventDefault()

← CSS基础服务器-Servlet→