JavaScript基础+Web APIs+jQuery+ECharts

JS的组成-

1. ECMAScript

JavaScript：网景公司
Jscript：微软

2. DOM - 文档对象模型

Document ObjectModel

3. BOM - 浏览器对象模型

Browser ObjectModel

JS初识-

1. 行内式的js，直接写到元素的内部

<input type="button" value="唐伯虎" onclick="alert('秋香姐')">

2. 内嵌式的js

```html
<script>
  alert("hello javascript!")
  alert("hello world!")
</script>
```

3. 外部js文件

4. JS属于解释型语言

运行时及时解释，并立即执行

5. 标识符

开发人员为变量、属性、函数、参数取的名字
命名要有意义
变量一般用名词
函数一般用动词

6. 关键字

JS本身已经使用了的字，不能再用他们充当变量名、方法名。

7. 保留字

预留的关键字，未来可能会成为关键字

注释-

1. 单行注释

// 注释内容

2. 多行注释

/* 注释内容 */

输入输出语句-

1. prompt()

输入框
prompt('请输入您的年龄：')

2. alert()

弹出警示框
js
```
alert("hello javascript!")
```
1

3. console

控制台输出

console.log('这是程序员能看到的')

变量-

1. 概述

存放数据的容器，通过变量名获取数据
本质是内存空间
Diagram Designer

2. 使用

先声明再使用【推荐】
不声明也可以直接赋值,但会变成全局变量

3. 语法扩展

4. 命名规范

驼峰命名法，myFirstName
name可能在有的浏览器有特殊含义，尽量不要作为变量名

5. 交换变量的案例

6. const 与 let

ES6 新增加了两个重要的关键字: let 和 const。
let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量，一旦声明，常量的值就不能改变。
- 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改
const 定义常量、let 定义的变量相同点：
- 二者都是块级作用域
- 都不能和它所在作用域内的其他变量或函数拥有相同的名称(不能再其作用域内重复声明)
区别：
- const 声明的常量必须初始化，let声明的变量不用
- const 定义常量的值不能通过再赋值修改，也不能再次声明。而 let 定义的变量值可以修改。
  js
```
  try {
      const PI = 3.141592653589793;
      PI = 3.14;
  }
  catch (err) {
      console.log(err);
  }
```
  1
  2
  3
  4
  5
  6
  7

数据类型-

1. js是动态语言，变量的数据类型是可以变化的

2. 简单数据类型：也叫值类型；放在栈立面。

Number 默认：0
1. 八进制数字前面加0
2. 十六进制数字前面加0x
3. 数字型的最大值/最小值
  js
```
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);
```
  1
  2
4. Infinity/-Infinity 表示无穷大/无穷小
  js
```
console.log(Number.MAX_VALUE*2);
console.log(-Number.MAX_VALUE*2);
```
  1
  2
5. NaN 非数字的
  js
```
console.log('huang'-100);
```
  1
6. isNaN()
  - 是数字返回false
  - 不是数字返回true
7. 常用方法
  js
```
// amount 保留2位小数
amount.toFixed(2)
```
  1
  2
String ""
1. 字符串嵌套，外单内双或外双内单
2. 转义字符
3. 字符串长度
4. 字符串的拼接
5. 双引号还是单引号？ 1）html中属性规范是用双引号，js中字符串规定是用单引号 2）js中单引号区别和php很像：单引号快，双引号可转义字符，双引号可解析变量
Boolean false
Undefined undefined - 声明变量未赋值
Null null - 也是object类型(特殊，设计js时的错误，没有改过来) - 如果有个变量以后打算存储为对象，暂时没想好放啥，可以先赋值null

3. typeof检测数据类型

4. 数据类型的转换

转换为字符串 - toString - String() - 加号拼接字符串【常用】
转换为数值型 - parseInt()【常用】 - parseFloat() 【常用】 - Number() - 利用算数运算进行隐式转换 - * /
转换为布尔型 - Boolean()，输出为false的5种情况，其他全是true js console.log(Boolean('')); console.log(Boolean(0)); console.log(Boolean(NaN)); console.log(Boolean(null)); console.log(Boolean(undefined));

5. 复杂数据类型：也叫引用类型；放在堆立面。

object

运算符-

也称为操作符
运算符两侧有留一个空格，便于阅读代码

1. 算数运算符

+：加
-：减
*：乘
/：除
%：取余用于判断是否能够整除
浮点数有精度问题，不要直接判断两个浮点数是否相等
表达式和返回值 - 由数字、运算符、变量等组成的式子，我们成为表达式

2. 递增递减运算符

递增++
- 前置递增：前自加，后返回值
- 后置递增：前返回值，后自加
递减--
- 特性同递增
必须和变量搭配使用，简化代码
前置与后置区别
- 单独使用时，运行结果相同
- 与其他代码使用时，执行结构不同
- 常用后置，且代码最好单独放一行，便于阅读代码

3. 比较运算符

小于：<
大于：>
大于等于：>=
小于等于：<=
等于：== (默认有隐式数据类型转换)
- console.log(18 == '18'); //true
不等于：!=
全等：=== !-
- 要求值和数据类型都一致
- console.log(18 == '18'); //false

4. 逻辑运算符

与：&&
或：||
非：!
短路运算（逻辑中断）
- 当有多个表达式（值）时，左边的值可以确定运算，右边的表达式（值）不再计算

5. 赋值运算符

=
+= -=
*= /= %=

6. 运算符优先级

1. ()
2. 一元运算符：++   --  !
3. 算数运算符：先*  /   % 后 + -
4. 关系运算符：>    >=  <   <=
5. 相等运算符：==   !=  === !-
6. 逻辑运算符: 先&& 后||
7. 赋值运算符：=
8. 逗号运算符：,

流程控制-

1. 流程控制

顺序结构
分支结构
循环结构

2. 顺序流程控制

3. 分支流程控制if语句

if
if else
if else if else if else : 比较值和范围值匹配

4. 三元表达式

条件表达式 ? 表达式1 : 表达式2

5. 分支流程控制switch语句

比较值和特定的值匹配
比较值和特定的值必须全等(===),才执行对应的语句
break如果不写，后面的语句不再判读case而继续执行语句，直至执行完switch中的所有语句或遇见break后退出。

6. 循环

for

for：可遍历元素
forEach：不可遍历元素
for-in：不可遍历元素
for-of：可遍历元素

  var arr1 = [1, 2, 3, 4, 'huang', true, 3.2];
  for (var i = 0; i < arr1.length; i++) {
      console.log('for ' + arr1[i]);
  }

  arr1.forEach(element => {
      console.log('forEach ' + element);
  });

  for (const key in arr1) {
      if (Object.hasOwnProperty.call(arr1, key)) {
          const element = arr1[key];
          console.log('for-in ' + element);
      }
  }

  for (const iterator of arr1) {
      console.log('for-of ' + iterator);
  }

双重for
while
do while
continue break

数组-

1. 概念

一组数据的集合存放在单个变量下

2. 创建数组

var arr = new Array();
var arr = [];
数组里面的数据用逗号分隔
数组元组可以是各种数据类型

3. 获取数组元素

4. 新增数组元素

修改length长度
通过修改索引号的方式增加 - 已有索引号时 -- 修改 - 原来没有索引号 -- 增加

5. 数组的方法

过滤方法:Array.prototype.filter()

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

拼接字符串:Array.prototype.join()

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

查找是否包含某元素:Array.prototype.indexOf()

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4

console.log(beasts.indexOf('giraffe'));
// expected output: -1

查找某个元素，并获取元素的代理内存地址，可以直接对元素进行修改：Array.prototype.find()

  const findResult = this.goodslist.find(x => x.id == id)
  if (findResult) {
    console.log(findResult)
    console.log(checked)
    findResult.goods_state = checked
  }

函数-

1. 概念

封装了一段可被重复调用的代码块
目的：让大量代码重复使用

2. 使用

调用函数的时候，函数名要加() eg: sayHi() getSum()

3. 参数

定时函数时，函数可以带参数也可以不带参数
形参：形式上的参数
实参：实际的参数
函数调用的时候，实参传递给形参
如果实参的个数多于形参的个数，会取到形参的个数
如果实参的个数少于形参的个数，多余的形参定义为undefined
【建议】尽量让形参的个数与实参的个数相匹配

4. 返回值

return
只要函数体内遇到return，就把后面的结果返回给函数的调用者
return会终止函数的执行，return后面的代码不会被执行
return只会返回一个值，如果写了多个值，返回最后一个值
可以使用数组返回一组值
函数没有return，则返回的是undefined

5. 声明的方式

1. function（命名函数）
    - 声明函数的关键字：function
    - 函数名一般是动词  eg：sayHi   getSum
    - 函数不调用自己不执行

2. 函数表达式(匿名函数)
    - var fun = function ()
    - fun是变量名，不是函数名
    - 函数表达式声明方式跟声明变量差不多，只不过变量里存的是函数   

3. => 函数
```js
    var elements = [
        'Hydrogen',
        'Helium',
        'Lithium',
        'Beryllium'
    ];
    
    elements.map(function(element) { 
        return element.length; 
    }); // 返回数组：[8, 6, 7, 9]
    
    // 上面的普通函数可以改写成如下的箭头函数
    elements.map((element) => {
        return element.length;
    }); // [8, 6, 7, 9]
    
    // 当箭头函数只有一个参数时，可以省略参数的圆括号
    elements.map(element => {
    return element.length;
    }); // [8, 6, 7, 9]
    
    // 当箭头函数的函数体只有一个 `return` 语句时，可以省略 `return` 关键字和方法体的花括号
    elements.map(element => element.length); // [8, 6, 7, 9]
    
    // 在这个例子中，因为我们只需要 `length` 属性，所以可以使用参数解构
    // 需要注意的是字符串 `"length"` 是我们想要获得的属性的名称，而 `lengthFooBArX` 则只是个变量名，
    // 可以替换成任意合法的变量名
    elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]
```

6. arguments

只有函数才有arguments对象，而且是每个函数都内置好了这个对象
arguments中存储了传递的所有实参
展示形式是一个伪数组 - 不是真正意义上的数组 - 具有数组的length属性 - 按照索引的方式进行存储 - 它没有真正数组的一些方法pop() push()等
可以按照数组的方式遍历arguments

7. 函数可以调用另外一个函数

跟函数的书写顺序无关

作用域-

1. 作用域

就是代码名字在某个范围内起作用和效果
目的:提高程序的可靠性/减少命名冲突
1. js的作用域(es6)之前:
  - 全局作用域:
    - 整个script标签
    - 单独的js文件
  - 局部作用域
    - 在函数内部
    - 代码的名字只在函数内部起作用
  - 没有块级作用域
2. js的作用域(es6)
  - 有块级作用域

2. 变量的作用域

全局变量 - 在全局作用域下var声明的变量；在全局下都可以使用 - 在函数内部没有声明直接使用的变量，也是全局变量 - 只有浏览器关闭的时候才会销毁，比较占内存
局部变量 - 在局部作用域下var声明的变量（在函数内部的变量）；仅在局部作用域下可以使用 - 函数的形参也可以看做是局部变量 - 程序执行完毕就会销毁，节约内存资源

3. 现阶段，js没有块级

3. 作用域链

只要是代码，就至少有一个作用域
写在函数内部的是局部作用域
如果函数中还有函数，那么在这个作用域中就可以诞生一个作用域
根据内部函数可以访问外部函数变量的这种机制，用链式查找决定决定哪些数据能被内部函数访问，就称为作用域链。
就近原则

预解析-

1. js引擎运行js分为两步：预解析代码执行

1. js引擎把js里面所有的var还有function提升到当前作用域的最前面
1. 按照代码书写的顺序从上往下执行

2. 变量预解析（变量提升）和函数预解析（函数提升）

1. 变量提升
  - 把所有的变量声明提升到当前作用域最前面
  - 只提升声明，不提升赋值
1. 函数提升
  - 把所有的命名函数声明提升到当前作用域最前面
  - 只提升声明，不调用函数
  - 匿名函数声明不提升

对象-

1. 概述

对象是一组无序的相关属性和方法的集合
字符串、数值、数组、函数都是对象
属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为，在对象中用方法来表示（常用动词）
为什么需要对象？ - 保存一个值时，可以使用变量，保存多个值(一组值)时，可以使用数组。如果要保存一个人的完整信息呢? - JS中的对象表达结构更清晰,更强大。

2. 创建对象的三种方式

利用字面量 {} - 里面的属性或者方法采用键值对的方式 - 多个属性或者方法中间用逗号隔开 - 方法冒号后面跟的是一个匿名函数
利用new Object - var obj = new Object(); - obj.uname = 'choudan'; - obj.age = 3; - obj.sex = '男'; - obj.sayHi = function(){}
利用构造函数 - 前面两种一次只能创建一个对象，创建多个需要复制大量重复代码 - 构造函数就是把对象里面的一些相同的属性和方法抽象出来封装到函数里面 - 构造函数首字母要大写【规范】 - 构造函数不需要return就可以返回结果 - 调用构造函数，必须使用new - 方法和函数前面必须添加：this. ```js function Star(uname, age, sex) { this.name = uname; this.age = age; this.sex = sex; this.sing = function (sang) { console.log(sang); } } var ldh = new Star('刘德华', 18, '男'); console.log(typeof (ldh)); console.log(ldh.name); console.log(ldh.sex); ldh.sing('冰雨');
```
      var zxy = new Star('张学友', 28, '男');
      console.log(zxy.name);
      console.log(zxy.sex);
      zxy.sing('李香兰')
  ```
```

...展开对象运算符 ```js var obj = { 'name': 'zs', 'gender': 'nan', 'age': 18 }

  obj2 = {
      ...obj,
      'city': 'shangqiu'
  }
  
  // console(...obj)     // 报错
  console.log(obj)
  console.log(obj2)
  ```

3. 使用

调用对象的属性1：对象名.属性名 obj.uname
调用对象的属性2：对象名['属性名'] obj['uname']
调用对象的方法1：对象名.方法名 obj.sayHi()
调用对象的方法2：对象名'方法名' obj'sayHi'

4. 变量、属性、函数、方法的区别

变量、属性相同点：都是用来存储数据的
变量、属性不同点： - 变量：单独声明并赋值，使用的时候直接写变量名，单独存在 - 属性：在对象里面的，不需要声明的，使用的时候必须是：对象名.属性名
函数、方法的相同点：都是实现某种功能，做某件事
函数、方法的不同点： - 函数：单独声明并调用，使用的时候直接写函数名，单独存在 - 方法：在对象里面的，调用的时候必须是：对象名.属性名

3. new关键字

利用new关键字创建对象的过程，也成为对象的实例化
new构造函数可以在内存中创建了一个空的对象
在执行时会做四件事情: 1. 在内存中创建一个新的空对象。 2. 让 this 指向这个新的对象。 3. 执行构造函数里面的代码，给这个新对象添加属性和方法。 4. 返回这个新对象（所以构造函数里面不需要return)。

4. 遍历对象属性

for-in js for(var k in zxy){}

js内置对象-

js中对象分为三种：自定义对象内置对象浏览器对象
自定义对象、内置对象属于ECMScript 浏览器对象属于JS独有的，属于JS API内容

1. 内置对象

2. 查文档

https://developer.mozilla.org/zh-CN/

3. Math对象

Math不是一个构造函数，所有的属性与方法都是静态的。所以不需要new来调用，而是直接使用里面的属性和方法即可。
Math.PI
Math.max()
Math.min()
Math.abs()
Math.floor()
Math.ceil()
Math.round()
Math.random()

4. 日期对象

Date()日期对象是有一个构造函数，必须使用new来调用创建日期对象
如果没有参数，返回当前系统的当前时间
参数常用的写法 - 2022,7,3 var date1 = new Date(2019, 10, 1); - '2022-10-3 22:30:20' var date2 = new Date('2022-7-3 22:30:20');
getFullYear()
getMonth() //月份返回的是0~11，用的时候用要+1
getDate() //返回几日？
getDay() //返回星期几
getHours()
getMinutes()
getSeconds()
getTime() //现在时间距离1970.1.1总的毫秒数(时间戳)
valueOf() //现在时间距离1970.1.1总的毫秒数
var date1 = +new Date(); //现在时间距离1970.1.1总的毫秒数
Date.now() //H5新增的获得总的毫秒数

5. 数组对象

var arr1 = new Array(); //创建了一个空数组
var arr1 = new Array(2); //2表示数组长度为2，里面有两个空的数组元素
var arr1 = new Array(2, 3); //等价与[2,3],表示创建的数组里面有2个元素，分别为2、3
检测是否为数组,是否为什么对象？ - isntanceof console.log(arr instanceof Array); - Array.isArray() console.log(Array.isArray(arr));
添加删除数组元素
push()
- 在数组的末尾，添加一个或者多个数组元素 - push()参数直接写数组元素就可以了 - 返回值：新数组长度 - 原数组也会发生变化
unshift() - 在数组的开头，添加一个或者多个数组元素 - unshift()参数直接写数组元素就可以了 - 返回值：新数组长度 - 原数组也会发生变化
pop() - 可以删除数组的最后一个元素，一次只能删一个 - 没有参数 - 返回值：删除的元素 - 原数组也会发生变化
shift() - 可以删除数组的第一个元素，一次只能删一个 - 没有参数 - 返回值：删除的元素 - 原数组也会发生变化
indexOf() - 查找给定元素的第一个索引 - 不存在则返回 -1
lastIndexOf() - 查找给定元素的最后一个索引 - 不存在则返回 -1
数组转换为字符串 - toString() 无参数，采用逗号分隔 js console.log(arr.toString()); - join() 有参数，默认采用逗号分隔 js console.log(arr.join('')); console.log(arr.join('-')); console.log(arr.join('&'));
concat() 连接两个或多个数组，不影响原数组，返回一个新的数组
slice() - 数组截取slice(begin,end) - 返回被截取项目的新数组 - 原数组不会改变
splice() - 数组删除splice(第几个开始，要删除的个数) - 返回被删除项目的新数组 - 会影响原数组

6. 字符串对象

基本包装类型：把简单数据类型包装成了复杂数据类型，这个基本数据类型就有了属性和方法：js提供了三种基本包装类型：String、Number、Boolean。实现形式如下： js var temp = new String('andy'); str = temp; temp = null;
字符串具有不可变性：因为字符串不可变，所以不要大量的拼接字符串
字符串所有的方法，都不会修改字符本身，操作完成会返回一个新的字符串
indexOf(要查找的字符,【起始的位置】)
charAt(index) 根据位置返回字符
charCodeAt(index) 根据位置返回字符的ASCII。判断用户按下了哪个键
str[index] H5新增的
concat(str1,str2,str3,...) 拼接字符串，实际开发中用+拼接比较多
substr(start,length)
slice(start,end)
substring(start,end) //基本和slice相同，但不接收负值
replace('被替换的字符','替换为的字符') - 只会替换第一个匹配到的字符
split('分隔符')
- 把字符串转换为数组 - 不给参数为空，字符转换为1个元素的数组 - 参数为''，将每个字符转换为数组元素
RegExpObject.exec(string) 用于检索字符串中的正则表达式的匹配 - 返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为null

Web APIs-

1. Web APIs和JS基础关联性

2. API和Web API

Web API：浏览器的API，一套操作浏览器功能和页面元素的API（DOM和BOM）

3. DOM

1. 简介
    - Document Object Model
    - W3C组织推荐的处理扩展标记语言（HTML和XML）的接口
    - DOM树（文档、元素、节点都看做是对象）：
        - 文档：一个页面就是一个文档，DOM中使用document表示
        - 元素：页面中的所有标签都是元素，DOM中使用element表示
        - 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

2. 获取元素
    - 根据ID获取
        - getElementById()
        - 参数id是大小写敏感的字符串
        - 返回的是一个元素对象
        - console.dir()打印元素对象，更好的查看里面的属性和方法
        ```js
            var time = document.getElementById('time');
            console.log(time);
        ```
    - 根据标签名获取
        - getElementsByTagName()    返回带有指定标签名的对象的集合
        ```js
        var ol = document.getElementsByTagName('ol');
        console.log(ol[0].getElementsByTagName('li'));
        ```
    - 通过HTML5新增的方法获取
        - getElementsByClassName()
        - querySelector()       返回选择器的第一个对象
        - querySelectorAll()    返回选择器的所有对象
        ```js
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);

        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        console.dir(firstBox)

        var nav = document.querySelector('#nav');
        console.log(nav);
        console.dir(nav)

        var li  = document.querySelector('li');
        console.log(li);

        var allbox = document.querySelectorAll('.box');
        console.log(allbox);
        ```
    - 特殊元素获取
        - body元素获取: 
        - html元素获取：
        ```js
        var bodyEle = document.body;
        var htmlEle = document.documentElement;
        ```
    - 因为文档页面从上往下加载，所以先得有标签，所以我们script写到标签的下面

3. 事件基础
    - JS使我们有能力创建动态页面，而事件是可以被JS侦测到的行为。
    - 简单理解：触发————响应机制
    - 页面中的每个元素都可以触发事件
    - 事件由三部分组成，事件三要素
        - 1. 事件源：事件被触发的对象
        - 2. 事件类型：如何触发 什么事件 比如点击鼠标（onclick) 还是鼠标经过 还是键盘按下   onfocus/onblur
        - 3. 事件处理程序：通过一个函数赋值的方式完成

4. 操作元素
    - 更改元素内容
        - innerText：不识别html标签 非标准  去除空格和换行
        - innerHTML【W3C标准】：识别html标签
        - 区别：这两个属性是可读写的，可以获取、写入元素里面的内容
    - 元素的属性操作
    - 表单的属性操作：type、value、checked、selected、disabled
    - 样式属性操作
        - element.style     行内样式操作
        - element.className 类名样式操作
        - js里面的样式采取驼峰命名法(自动转换css中的样式名为驼峰命名)：font-size -> fontSize    background-color -> backgroundColor
        - js修改style样式操作，产生的是行内样式，css权重比较高
    - 排他思想
        - 所有元素全部清除样式
        - 给当前元素设置样式
    - 属性操作
        - 获取属性值
            - element.属性                  ：无法获取自定义属性
            - element.getAttribute('属性')  ：可以获取自定义属性
        - 设置属性值
            - element.属性 = '值'               ：只能设置css内置属性
            - element.setAttribute('属性','值') ：可以设置css内置属性和自定义属性
        - 移除属性
            - removeAttribute('属性')
        - H5的自定义属性
            - 是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
            - H5规定自定义属性data-开头作为属性名并赋值。原因：有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
            - H5新增的获取自定义属性的方法：div[3].dataset.index  (必须是以data-开头，仅IE11以上才支持)
            ```js
                // css中自定义的以"-"连接的变量，用此法获取时，需转换成驼峰命名法
                div[3].dataset.index
                等同：
                div[3].getAttribute('data-index')
            ```

5. 节点操作
    - 获取元素的方法之一
    - 利用节点的层次关系获取元素
    - 网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示
    - HTML DOM树中所有的节点均可通过JavaScript访问，所有HTML元素（节点）均可被修改，也可以创建或删除。
    - 节点至少拥有三个基本属性：nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）
    - 节点类型：nodeType
        - 元素节点【常用】：1
        - 属性节点：2
        - 文本节点（文字、空格、换行等）：3
    - 父节点：node.parentNode
        - 得到的是离元素最近的父级节点（亲爸爸），如果找不到则返回null
    - 子节点【很少用】：parentNode.childNodes
        - 得到的是所有的子节点（包括元素节点、文本节点等）
        - 如果只想要获得立面的元素节点，则需要专门处理。所以一般不提倡使用childNodes
    - 字元素节点【常用、非标准】：parentNode.children
        - 获取所有的子元素节点
    - 第一个、最后一个子节点
        - firstChild：第一个子节点，不管是文本节点还是元素节点
        - lastChild：最后一个子节点，不管是文本节点还是元素节点
        - firstElementChild【IE9以上才支持】：第一个子元素节点
        - lastElementChild【IE9以上才支持】：最后一个子元素节点
        - ul.children[0])：第一个子元素节点
        - ul.children[ul.children.length - 1])：最后一个子元素节点
    - 兄弟节点
        - node.nextSibling：返回当前元素的下一个兄弟节点(不管时文本还是元素等)，找不到则返回null。
        - node.previousSibling
        - node.nextElementSibling【IE9以上才支持】
        - node.previousElementSibling【IE9以上才支持】
    - 创建、添加节点
        - var li = document.createElement('li');
        - node.appendChild(child);  在后面追加元素  node:父级      child:子级
        - node.insertBefore(li, ul.children[0]);
    - 删除节点
        - node.removeChild()
    - 复制节点
        - node.cloneNode()  参数为空或者false，则是浅拷贝，只复制节点本身，不复制立面的子节点；括号内为true，则为深拷贝，会复制节点本身和里面所有的子节点.
    - 三种动态创建元素的区别
        - 1. document.write()   创建元素.
            - document.write('<div>123</div>');
            - 如果页面文档流加载完毕，再调用此方法会导致页面重绘
            - 利用数组
        - 2. innerHTML
            - 拼接字符串创建：td.innerHTML += '<a href="javascript:;">删除</a>';
            - 数组存储字符串然后转换为拼接字符串：for -> arr.push('<a href="javascript:;">删除</a>') -> arr.join('')
            - 创建多个元素效率更高（不要采用拼接字符串，应采用数组存储字符串然后转换为拼接字符串），结构稍微复杂
        - 3. document.createElement()
            - var td = document.createElement('td');
            - 创建多个元素效率稍微低一点点，但是结构更清晰。
6. DOM重点核心
    - 文档对象模型( Document Object Model，简称DOM )，是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。
    - W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。
        - 1. 对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的dom编程接口。
        - 2. 对于HTML,dom使得html形成一棵dom树.包含文档、元素、节点。
    - 关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。
        - 创建
            - 1. document.write
            - 2. element.innerHTML
            - 3. document.createElement
        - 增
            - 1. appendChild
            - 2. inertBebore
        - 删除
            - removeChild
        - 改：  修改dom的元素属性，dom元素的内容、属性、表单的值的等
            - 1. 修改元素属性：src、hrf、title等
            - 2. 修改普通元素的内容：innerHTML、innerText
            - 3. 修改表单元素：value、type、disabled等
            - 4. 修改元素样式：style、className
        - 查
            - 1. DOM提供的API方法：getELementById、getElementsByTagName古老用法【不太推荐】
            - 2. H5提供的新方法：querySelector、querySelectorAll    【推荐】
            - 3. 利用节点操作获取元素：父（parentNode）、子（children）、兄（previousElementSibling、nextElementSibling）【推荐】
        - 属性操作：主要针对自定义属性
            - 1. setAttribute：设置dom的属性值
            - 2. getAttribute：得到dom的属性值
            - 3. removeAttribute：移除属性
        - 事件操作：给元素注册事件
            - 1. onclick        鼠标点击左键触发
            - 2. onmouseover    鼠标经过触发:mouseover鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter只会经过自身盒子触发，因为mouseenter不会冒泡
            - 3. onmouseout     鼠标离开触发
            - 4. onfocus        获得鼠标焦点触发
            - 5. onblur         失去鼠标焦点触发
            - 6. onmousemove    鼠标移动触发
            - 7. onmouseup      鼠标弹起触发
            - 8. onmousedown    鼠标按下触发

事件高级-

1. 注册事件（绑定事件）

利用on开头的事件 - 注册事件的唯一性 - 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
addEventListener() 【IE9之前不支持】 - eventTarget.addEventListener(type,listener[,useCapture]) - type：事件类型字符串，比如click、mouseover，注意这里不要带on - listener：事件处理函数，事件发生时，会调用该监听函数 - useCapture：可选参数，是一个布尔值，默认是false。 - 同一个元素、同一个事件可以添加多个监听器
attachEvent()【IE9之前的IE用此法】 - eventTarget.attachEvent(eventNameWithOn,callback) - 事件类型字符串，比如click、mouseover，这里要带on - 事件处理函数，当目标触发事件时回调函数被调用

2. 删除事件（解绑事件）

event.Target = null; js divs[0].onclick = null; divs[1].removeEventListener('click', fn);

3. DOM事件流

事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

分为3个阶段 - 我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点)的捕获过程;之后会产生泡泡，会在最低点（最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。 - 1. 捕获阶段：事件捕获∶网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程 - 2. 当前目标阶段
- 3. 冒泡阶段：事件冒泡:IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到DOM最顶层节点的过程。

  - 1. Js 代码中只能执行捕获或者冒泡其中的一个阶段。
  - 2. onclick和attachEvent只能得到冒泡阶段。
  - 3. addEventListener(type,listener[,useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理福序：document->html->body->father->son;  如果是false(不写默认就是false )，表示在事件冒泡阶段调用事件处理程序。
  - 4. 实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
  - 5. 有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave
  - 6. 事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件，我们后面讲解。

4. 事件对象

div.onclick = function(event){}
1. event 就是一个事件对象，写到侦听函数的小括号里面，当形参来看
1. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
1. 事件对象是我们事件的一系列相关数据的集合跟事件相关的比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息比如判断用户按下了那个键。
1. 时间对象可以自己命名，比如event、evt、e
1. 事件对象也有兼容性问题，ie6 7 8浏览器不会给方法传递参数，如果需要的话，需要到window.event中获取查找。console.log(window.event)。
e.target 指向点击的那个对象（元素），谁触发了事件，指向的就是谁。有可能是子元素触发了父元素的事件，则返回的是子元素。
this/e.currentTarget 指向的是绑定事件的对象（元素）
其他常见事件对象的属性和方法 - e.target - e.type 返回事件的类型，比如click、mouseover，不带on - e.cancelBubble 该属性阻止冒泡（非标准、ie6-8使用） - e.returnValue 该属性阻止默认事件（默认行为）（非标准、ie6-8使用，比如不让链接跳转） - e.preventDefault() 该方法阻止默认事件（默认行为）（标准，比如不让链接跳转） - e.stopPropagation() 阻止冒泡（标准）【推荐】

5. 阻止事件冒泡

6. 事件委托（代理、委派）

事件委托的原理不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。 js var ul = document.querySelector('div.event-agent'); ul.addEventListener('click', function (e) { e.target.style.backgroundColor = 'pink'; })

7. 常用的鼠标事件

禁止鼠标右键菜单 js document.addEventListener('contextmenu', function (e) { e.preventDefault(); //禁用右键菜单 })
禁止选中文字 js document.addEventListener('selectstart', function (e) { e.preventDefault(); //禁止选中文字 })
MouseEvent js document.addEventListener('click', function (e) { console.log(e); console.log(e.clientX); //返回鼠标相对于浏览器窗口可视区的X坐标 console.log(e.clientY); //返回鼠标相对于浏览器窗口可视区的Y坐标 console.log(e.pageX); //返回鼠标相对于文档页面的X坐标 IE9+支持 console.log(e.pageY); //返回鼠标相对于文档页面的Y坐标 IE9+支持 console.log(e.screenX); //返回鼠标相对于电脑屏幕的X坐标 console.log(e.screenY); //返回鼠标相对于电脑屏幕的Y坐标 })
mousemove:只要鼠标移动1px，就会触发这个事件

8. 常用的键盘事件

onkeyup 某个键盘案件被弹起时触发
onkeydown 某个键盘按键被按下时触发
onkeypress 某个键盘按键被按下时触发（但不识别功能键，比如ctrl shift 箭头等）
三个事件的执行顺序：keydown -> keypress -> keyup
键盘事件对象中的keyCode属性可以得到相应键的ASCII码值 - 我们的keyup和keydown事件不区分字母大小写a和A得到的都是65 - 我们的keypress 事件区分字母大小写 a ->97 和 A -> 65

BOM浏览器对象模型-

1. BOM概述

BOM ( Browser Object Model )即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。
DOM - 文档对象模型 - DOM就是把「文档」当做一个「对象」来看待 - DOM的顶级对象是document - DOM主要学习的是操作页面元素 - DOM是W3C标准规范
BOM - 浏览器对象模型 - 把「浏览器」当做一个「对象」来看待 - BOM的顶级对象是window - BOM学习的是浏览器窗口交互的一些对象 - BOM是浏览器厂商在各自浏览器上定义的，兼容性较差
window对象是浏览器的顶级对象，它具有双重角色。 - 1. 它是JS访问浏览器窗口的一个接口。 - 2. 它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。 - 在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如 alert()、prompt()等。 - 注意:window下的一个特殊属性window.name

2. window对象的常见事件

页面加载事件 - load：等页面内容全部加载完毕，包含页面dom元素、图片、flash、css等 - DOMContentLoaded：事件触发时，仅当DOM加载完成。不包括样式表、图片、flash等。【ie9以上才支持】 - 如果页面的图片很多的话,从用户访问到onload触发可能需要较长的时间,交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适。 ```js window.addEventListener('load', function () { var btn = document.querySelector('button'); btn.addEventListener('click', function () { alert('11'); }) })
```
      document.addEventListener('DOMContentLoaded', function () {
          var btn = document.querySelector('button');
          btn.addEventListener('click', function () {
              alert('11');
          })
      })
      ```
```

调整窗口大小事件

    window.onresize = function(){}
    window.addEventListener('resize',function(){})

3. 定时器

setTimeout(调用函数,[延迟的毫秒数]) - [延迟的毫秒数]如果省略，默认为0立即调用 - 延迟时间到了就去调用函数，只调用一次 - clearTimeout(timeoutID) js function boom() { console.log('boom!!!'); } // 开始定时器 var time = setTimeout(boom, 1000); // 停止定时器 clearTimeout(time);
setInterval(调用函数,[延迟的毫秒数]) - 重复调用一个函数，每隔这个时间，就去调用一次回调函数 - clearInterval(iintervalID) - 代码用法砼setTimeout

3. 1. this指向问题

this 一般情况下this的最终指向的是那个调用它的对象
1．全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
2．方法调用中谁调用this指向谁
3．构造函数中this指向构造函数的实例

4. JS执行机制

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为Javascript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个路。这样所导致的问题是:如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
同步和异步：为了解决这个问题，利用多核CPU的计算能力，HTML5提出 Web Worker标准，允许JavaScript脚本创建多个线程。于是，JS中出现了同步和异步。 - 同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法∶我们要烧水煮饭，等水开了( 10分钟之后），再去切菜，炒菜。 - 异步：你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。
同步任务：同步任务都在主线程上执行，形成一个执行栈
异步任务：JS的异步是通过回调函数实现的。异步任务相关回调函数添加到任务队列中（任务队列也成为消息队列） - 普通事件：click、resize等 - 资源加载：load、error等 - 定时器：包括setInterval、setTimeout等
执行机制： - 1. 先执行执行栈中的同步任务 - 2. 异步任务（回调函数）放入任务队列中 - 3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

5. location对象

window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象。
protocol://host [:port]/path/ [ 2query] #fragment
http://www.itcast.cn/index.html?name=andy&age=18#link - protocol：通信协议，常用的http、https、ftp、mailto等 - host：主机（域名）：www.itcast.cn - port：端口号（可选），省略时使用方案默认的端口，如http的默认端口为80 - path：路径。由零或多个'/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址 - query：参数以键值对的形式，通过&符号分隔开来 - fragment：片段 #后面的内容，常见于连接、锚点
location对象的常用属性 - location.href 获取或设置整个URL - location.host 返回主机（域名） - location.port 返回端口号 - location.pathname 返回路径 - location.search 返回参数 - location.hash 返回片段

location对象中的方法 - location.assign() 跟href一样，可以跳转页面，记录浏览历史，可以实现后退 - location.replace() 替换当前页面，因为不记录历史，所以不能后退页面 - location.reload() 重新加载页面，相当于刷新按钮或者F5，如果参数为true强制刷新ctrl+F5

var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.addEventListener('click', function () {
    // console.log(location.href);
    var remainTime = 5;
    skip();
    var skipTime = setInterval(skip, 1000)
    function skip() {
        div.innerHTML = '您将在' + remainTime + '秒后进入IT之家首页...';
        if (remainTime <= 0) {
            clearInterval(skipTime);
            location.href = 'https://www.ithome.com';
        }
        remainTime--;
    }
})

6. navigator对象

navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值。

下面前端代码可以判断用户那个终端打开页面，实现跳转

  if ((navigator.userAgent.match((/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|WOSBrowser|BrowserNG|WebOS|Symbian|Window Phone)/i)))) {
    window.location.href = '';   //手机
  } else {
      window.location.href = '';    //电脑
  }

7. history对象

back() 后退功能
forward() 前进功能
go(参数) 前进后退功能，如果参数是1前进1个页面，参数是-1后退1个页面

PC端网页特效

1. 元素偏移量offset系列

offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移)、大小等。
获得元素距离带有定位父元素的位置
获得元素自身的大小(宽度高度)注意:返回的数值都不带单位
常用属性： - element.offsetParent 返回作为该元素带有定位的父级元素如果父级都没有定位则返回body - element.offsetTop 返回元素相对带有定位父元素上方的偏移 - element.offsetLeft 返回元素相对带有定位父元素左边框的偏移 - element.offsetWidth 返回自身包括padding 、边框、内容区的宽度，返回数值不带单位 - element.offsetHeight 返回自身包括padding、边框、内容区的高度，返回数值不带单位

offset与style区别 - offset可以得到任意样式表中的样式值offset系列获得的数值是没有单位的 - offsetWidth 包含padding+border +width - offsetWidth 等属性是只读属性，只能获取不能喊值 - 所以，我们想要获取元素大小位置，用offset更合适

  - style只能得到行内样式表中的样式值
  - style.width获得的是带有单位的字符串
  - style.width获得不包含padding和border的值
  - style.width是可读写属性，可以获取也可以赋值
  - 所以，我们想要给元素更改值，则需要用style改变

2. 元素可视区client系列

client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
element.clientTop 返回元素上边框的大小
element.clientLeft 返回元素左边框的大小
element.clientWidth 返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.clientHeight 返回自身包括padding、内容区的高度，不含边框，返回数值不带单位

2. 立即执行函数

不需要调用，立马就能执行的函数
(function(){})();
(function(){}());
立即执行函数最大作用就是，独立创建了一个作用域，里面所有的变量都是局部变量，不会有命名冲突的情况
flexible.js

3. 元素滚动scoll系列

scroll翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。
element.scrollTop 返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft 返被卷去的左侧距离，返回数值不带单位
element.scrollWidth 返回自身实际的宽度，不含边框，返回数值不带单位
element.scrollHeight 返回自身实际的高度，不含边框，返回数值不带单位
页面被卷去的头部:可以通过window.pageYOffset 获得如果是被卷去的左侧window.pageXOffset

4. 动画函数封装

核心原理:通过定时器setlnterval(不断移动盒子位置。
实现步骤∶ - 1. 获得盒子当前位置 - 2. 让盒子在当前位置加上1个移动距离3.利用定时器不断重复这个操作 - 4. 加一个结束定时器的条件 - 5. 注意此元素需要添加定位，才能使用element.style.left
缓动动画原理： - 缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来 - 1.让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。 - 2.核心算法∶(目标值-现在的位置)/ 10做为每次移动的距离步长
动画函数添加回调函数 - 回调函数原理∶函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。
节流阀以及逻辑中断应用 - if(flag){flag = false;do something};

5. 常见网页特效案例

本地存储-

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。

1. window.sessionStorage

生命周期为关闭浏览器窗口
在同一个窗口(页面)下数据可以共享
以键值对的形式存储使用
sessionStorage.setItem(key,value)
sessionStorage.getItem(key)
sessionStorage.removeItem(key) //删除指定数据
sessionStorage.clear() //删除所有数据

2. window.localStorage

生命周期永久生效，除非手动删除否则关闭页面也会存在
可以多窗口(页面)共享(同一浏览器可以共享，要求必须是同一个域名下)
以键值对的形式存储使用
localStorage.setItem(key,value)
localStorage.getItem(key)
localStorage.removeItem(key) //删除指定数据
localStorage.clear() //删除所有数据

JQuery-

1. JavaScript库

JavaScript库:即 library，是一个封装好的特定的集合（方法和函数)。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。简单理解:就是一个JS文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。
比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数(方法)。
常见的JavaScript库 - jQuery - Prototype - Yul - Dojo - Ext JS - 移动端的zepto

2. jQuery概述

概念 - jQuery是一个快速、简洁的JavaScript库，其设计的宗旨是“write Less , Do More”，即倡导写更少的代码，做更多的事情。 - j就是JavaScript ;Query查询;意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。 - jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。 - 学习jQuery本质:就是学习调用这些函数(方法)。
优点： - 轻量级。核心文件才几十kb，不会影响页面加载速度跨浏览器兼容。基本兼容了现在主流的浏览器 - 链式编程、隐式迭代 - 对事件、样式、动画支持，大大简化了DOM操作支持插件扩展开发。有着丰富的第三方的插件，例收∶树形菜单、日期控件、轮播图等 - 免费、开源

3. jQuery基本使用

$同时也是JQuery的顶级对象
1. 用原生JS获取来的对象就是DOM对象
1. jQuery方法获取的元素就是jQuery对象,jQuery是伪数组。
1. jQuery对象不能使用原生js的属性和方法
1. DOM对象与jQuery对象之间是可以相互转换的。因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装.要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
1. $('div')[0] jQuery转换为dom对象。
1. $(document.querySelector('div')) DOM对象转换为jQuery对象

4. jQuery常用API

jQuery 选择器 - 基本和层级选择器 - $(“选择器”）//里面选择器直接写CSS选择器即可，但是要加引号 - ID选择器 $("#id") 获取指定ID的元素 - 全选选择器 $('*') 匹配所有元素 - 类选择器 $(".class") 获取同一类class的元素 - 标签选择器 $("div") 获取同一类标签的所有元素 - 并集选择器 $("div,p,li") 选取多个元素 - 交集选择器 $("li.current") 交集元素 - 隐式迭代 - $("div").css("background","red"); - 遍历内部 DOM元素（伪数组形式存储)的过程就叫做隐式迭代。 - 简单理解∶给匹配到的所有元素进行循环遍万，执行相应的方法，而不用我们再进行循环，简化我们的操作方便我们调用。 - 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法 - jQuery 筛选选择器 - :first $('li:first') 获取第一个li元素 - :last $('li:last') 获取最后一个li元素 - :eq(index) $("li:eq(2)") 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。 - :odd $("li:odd") 获取到的li元素中，选择索引号为奇数的元素 - :even $("li:even") 获取到的li元素中，选择索引号为偶数的元素 - jQuery 筛选方法 - parent() $("1i").parent(); 查找父级 - children(selector) $("ul").children("li") 相当于$("u1>li")，最近一级(亲儿子) - find(selector) $("ul").find("li"); 相当于$("ul li"),后代选择器 - siblings(selector) $(".first").siblings("li"); 查找兄弟节点，不包括自己本身。 -> 可用于排他思想 - nextAll([expr]) $(".first").nextAll() 查找当前元素之后所有的同辈元素 - prevtAll([expr]) $(".last").prevAll() 查找当前元素之前所有的同辈元素 - hasClass(class) $('div').hasClass("protected") 检查当前的元素是否含有某个特定的类,如果有，则返回true - eq(index) $("1i").ea(2); 相当于$("li:ea(2)") ,index从0开始 - 链式编程 - $(this).css("color","red").siblings().css("color","");
jQuery 样式操作
- 操作css方法 - jQuery可以使用css方法来修改简单元素样式;也可以操作类，修改多个样式。 - 1. 参数只写属性名，则是返回属性值 - $(this).css("color"); - 2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号 - $(this).css("color", "red"); - 3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号，
- $(this).css("color":"white","font-size":"20px"}; - 示例： - ($("div")).css("width"); //获取样式 - ($("div")).css("width","300px"); //设置样式 - $("div").css({width: 400,height: 400,backgroundColor: 'purple'}) - 操作类 - 添加类：不会影响之前的类名 - $(this).addClass('current'); - 删除类 - $(this).removeClass('current'); - 切换类 - $(this).toggleClass('current'); - jQuery操作类与js原生className区别 - js原生className会覆盖原有的类名 - jQuery操作类不会覆盖原有的类名

jQuery 效果（动画效果） - 显示隐藏 - show([speed,[easing],[fn]]) - 参数都可以省略，无动画直接显示。 - speed：三种预定速度之一的字符串(“slow”,“normal",or “fast”)或表示动画时长的毫秒数值(如:1000)。 - easing：(Optional)用来指定切换效果，默认是“swing”，可用参数“linear"。 - fn：回调函数，在动画完成时执行的函数，每个元素执行一次。 - hide() - hide([speed,[easing],[fn]]) - toggle()

  - 滑动显示隐藏
      ```js
          slideDown([speed,[easing],[fn]])
          slideUp([speed,[easing],[fn]])
          slideToggle([speed,[easing],[fn]])
      ```

  - 事件切换
      - hover([over],out):
          - over:鼠标移到元素上要触发的函数
          - out:鼠标移出元素要触发的函数

  - 动画队列及其停止排队方法
      - 动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
      - stop()
          - stop(方法用于停止动画或效果。
          - 注意:stop()写到动画或者效果的前面，相当于停止结束上一次的动画。

  - 淡入淡出
      ```js
          fadeIn([speed,[easing],[fn]])
          fadeOut([speed,[easing],[fn]])
          fadeToggle([speed,[easing],[fn]])
          fateTo([speed],opacity,[easing],[fn])  // 修改透明度
      ```

  - 自定义动画：只有是元素才能用这个动画，document用不了
      - animate(params,[speed],[easing],[fn])
          - params:一组包含作为动画属性和终值的样式属性和及其值的集合
          - speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000) 
          - easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
          - fn:在动画完成时执行的函数，每个元素执行一次。
          - $("body,html").animate({scrollTop:0});        返回顶部

jQuery 属性操作 - 设置或获取元素固有属性 element.prop() //类似原生getAttribute() - 所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的href，比如<input>元素里面的type。 - console.log($("a").prop('href')); - 设置或获取元素自定义属性 element.attr() //类似原生setAttribute() js $("a").attr("index", 100); $("a").attr("data-index",121); console.log($("a").attr("index")); console.log($("a").attr("data-index")); console.log($("a").data("index")); //返回的是数字类型index值 - 数据缓存data() 这个里面的数据是存放在元素的内存里面 - $("a").data("uname","andy"); - console.log($("a").data("uname"));
jQuery 文本属性值 - 获取普通元素内容 js console.log($("a").html()); console.log($("a").text()); - 设置元素文本内容 js $("a").html("设置hi~"); $("a").text("设置hi~~~"); - 获取设置表单值 js console.log($("input").val()); $("input").val(182371);
jQuery 元素操作 - 遍历元素 - $("div").each(function(i,domEle){}) //只能遍历对象 - $.each($("div"),function(i, ele){}) //可以遍历对象，也可以遍历数组 js var arr = ["red", "green", "blue", "pink"]; var sum = ''; $("div").each(function (i, domEle) { console.log(i); console.log(domEle); $(domEle).css("background-color", arr[i]); sum += $(domEle).text(); console.log(sum); }); var sum = ''; $.each($("div"), function (i, ele) { sum += $(ele).text(); console.log(sum); }) $.each(arr, function (i, ele) { console.log(i); console.log(ele); }) - 创建元素 - var li = $("
我是后来创建的li

jQuery 尺寸、位置操作 - jQuery尺寸 - width()/ height() 取得/设置匹配元素宽度和高度值只算width / height - innerWidth()/ innerHieght() 取得/设置匹配元素宽度和高度值包含padding - outerWidth() / outerHeight() 取很/设置匹配元素宽度和高度值包含padding. border - nouterWidth(true)/ outerHeight(true) 取得/设置匹配元素宽度和高度值包含padding .borde、margin - 以上参数为空，则是获取相应值，返回的是数字型。 - 如果参数为数字，则是修改相应值。 - 参数可以不必写单位。
```
  - jQuery位置
      - offset()                  获取/设置距离文档的位置（偏移）
          - `offset().top`
          - `offset().left`
      - position()                获取距离带有定位的父盒子的位置
      - scrollTop()/scrollLeft()
          - `$(document).scrollTop();`
          - `$(window).scroll(function(){console.log($(document).scrollTop());})`
```

5. jQuery事件注册

jQuery 事件注册 - $("div").click(function(){})
jQuery 事件处理 - on()方法在匹配元素上绑定一个或多个事件的事件处理函数 - element.on(events,[selector],fn) - 1. events:一个或多个用空格分隔的事件类型，如"click"或"keydown”. - 2. selector:元素的子元素选择器。 - 3. fn:回调函数即绑定在元素身上的侦听函数。 - on可以给未来动态创建的元素绑定事件 - off()可以移除通过on()方法添加的事件处理程序 - $("ul").off() 解除ul上的所有事件 - $("ul").off("click"); 解除ul上的click事件 - 如果有的事件只想触发一次，可以使用one() - 自动触发事件 - 元素.事件() - 元素.trigger('事件')
- 元素.triggerHandler('事件') // 不会触发元素的默认行为,例如input元素获得焦点后的光标闪烁
jQuery 事件对象 - 事件被触发，就会有事件对象的产生

6. jQuery其他方法

jQuery拷贝对象 - 如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用$.extend(〉方法 - 语法∶$.extend ([deep], target,object1,[objectN ]) - 1. deep:如果设为true为深拷贝，默认为false 浅拷贝 - 2. target:要拷贝的目标对象 - 3. object1:待拷贝到第一个对象的对象。 - 4. objectN:待拷贝到第N个对象的对象。 - 5. 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。
多库共存 - jQuery使用$作为标示符，随着jQuery的流行,其他js 库也会用这$作为标识符，这样一起使用会引起冲突。 - 1. 如果$符号冲突，我们就使用jQuery - 2. 让jQuery释放对$控制权，让用户自己决定 - var suibian = jQuery.noConflict();
jQuery插件 - jQuery功能比较有限，想要更复杂的特效效果，可以借助于jQuery插件完成。 - 注意:这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为jQuery插件。 - jQuery插件常用的网站: - 1. jQuery插件库 http://www.jq22.com/ - 2.jQuery之家 http://www.htmleaf.com/ - jQuery插件使用步骤: - 1.引入相关文件。( jQuery文件和插件文件) - 2.复制相关html、css、js(调用插件)。
图片懒加载（图片使用延迟加载可提高网页下载速度。他也能帮助减轻服务器负载） - 当我们页面滑动达到可视区域，再加载图片。 - 我们使用jquery插件库EasyLazyload。注意，此时的js引入文件和js调用必须写到DOM元素(图片)最后面 - 全屏滚动(fullpage.js) - gitHub：https://github.com/alvarotrigo/fullPage.js - 中文翻译网站：http://www.dowebok.com/demo/2014/77/

数据可视化-

1. 什么是数据可视化

常见的数据可视化库 - D3.js目前 Web端评价最高的Javascript可视化工具库(入手难) - ECharts.js百度出品的一个并源Javascript 数据可视化库 - Highcharts.js国外的前端数据可视化库，非商用免费，被许多国外大公司所使用 - AntV蚂蚁金服全新一代数据可视化解决方案 - 等等

2. 数据可视化项目概述

学习这个项目的目的 - 市场需求和学习阶段需求项目用到的技术:以前学习过的技术和新技术
CSS3动画、渐变
jQuery库+原生JavaScript
flex布局和 rem适配方案
图片边框border-image
ES6模板字符
ECharts可视化库等等

JavaScript基础+Web APIs+jQuery+ECharts ​

JS的组成- ​

1. ECMAScript ​

2. DOM - 文档对象模型 ​

3. BOM - 浏览器对象模型 ​

JS初识- ​

1. 行内式的js，直接写到元素的内部 ​

2. 内嵌式的js ​

3. 外部js文件 ​

4. JS属于解释型语言 ​

5. 标识符 ​

6. 关键字 ​

7. 保留字 ​

注释- ​

1. 单行注释 ​

2. 多行注释 ​

输入输出语句- ​

1. prompt() ​

2. alert() ​

3. console ​

变量- ​

1. 概述 ​

2. 使用 ​

3. 语法扩展 ​

4. 命名规范 ​

5. 交换变量的案例 ​

6. const 与 let ​

数据类型- ​

1. js是动态语言，变量的数据类型是可以变化的 ​

2. 简单数据类型：也叫值类型；放在栈立面。 ​

3. typeof检测数据类型 ​

4. 数据类型的转换 ​

5. 复杂数据类型：也叫引用类型；放在堆立面。 ​

运算符- ​

1. 算数运算符 ​

2. 递增递减运算符 ​

3. 比较运算符 ​

4. 逻辑运算符 ​

5. 赋值运算符 ​

6. 运算符优先级 ​

流程控制- ​

1. 流程控制 ​

2. 顺序流程控制 ​

3. 分支流程控制if语句 ​

4. 三元表达式 ​

5. 分支流程控制switch语句 ​

6. 循环 ​

数组- ​

1. 概念 ​

2. 创建数组 ​

3. 获取数组元素 ​

4. 新增数组元素 ​

5. 数组的方法 ​

函数- ​

1. 概念 ​

2. 使用 ​

3. 参数 ​

4. 返回值 ​

5. 声明的方式 ​

6. arguments ​

7. 函数可以调用另外一个函数 ​

作用域- ​

1. 作用域 ​

2. 变量的作用域 ​

3. 现阶段，js没有块级 ​

3. 作用域链 ​

预解析- ​

1. js引擎运行js分为两步： 预解析 代码执行 ​

2. 变量预解析（变量提升）和函数预解析（函数提升） ​

对象- ​

1. 概述 ​

2. 创建对象的三种方式 ​

3. 使用 ​

4. 变量、属性、函数、方法的区别 ​

3. new关键字 ​

4. 遍历对象属性 ​

js内置对象- ​

1. 内置对象 ​

2. 查文档 ​

3. Math对象 ​

JavaScript基础+Web APIs+jQuery+ECharts

JS的组成-

1. ECMAScript

2. DOM - 文档对象模型

3. BOM - 浏览器对象模型

JS初识-

1. 行内式的js，直接写到元素的内部

2. 内嵌式的js

3. 外部js文件

4. JS属于解释型语言

5. 标识符

6. 关键字

7. 保留字

注释-

1. 单行注释

2. 多行注释

输入输出语句-

1. prompt()

2. alert()

3. console

变量-

1. 概述

2. 使用

3. 语法扩展

4. 命名规范

5. 交换变量的案例

6. const 与 let

数据类型-

1. js是动态语言，变量的数据类型是可以变化的

2. 简单数据类型：也叫值类型；放在栈立面。

3. typeof检测数据类型

4. 数据类型的转换

5. 复杂数据类型：也叫引用类型；放在堆立面。

运算符-

1. 算数运算符

2. 递增递减运算符

3. 比较运算符

4. 逻辑运算符

5. 赋值运算符

6. 运算符优先级

流程控制-

1. 流程控制

2. 顺序流程控制

3. 分支流程控制if语句

4. 三元表达式

5. 分支流程控制switch语句

6. 循环

数组-

1. 概念

2. 创建数组

3. 获取数组元素

4. 新增数组元素

5. 数组的方法

函数-

1. 概念

2. 使用

3. 参数

4. 返回值

5. 声明的方式

6. arguments

7. 函数可以调用另外一个函数

作用域-

1. 作用域

2. 变量的作用域

3. 现阶段，js没有块级

3. 作用域链

预解析-

1. js引擎运行js分为两步：预解析代码执行

2. 变量预解析（变量提升）和函数预解析（函数提升）

对象-

1. 概述

2. 创建对象的三种方式

3. 使用

4. 变量、属性、函数、方法的区别

3. new关键字

4. 遍历对象属性

js内置对象-

1. 内置对象

2. 查文档

3. Math对象