JavaScript--跟随pink老师视频学习版（2022）

JavaScript

一、JavaScript简介
- 1.什么是JavaScript
- 2.JavaScript用途
- 3.浏览器执行JavaScript简介
- 3.JavaScript组成
- 4.JavaScript代码位置
- 5.JavaScript输入输出语句
二、JavaScript变量
- 1.什么是变量
- 2.变量使用
- 3.变量命名规范
三、数据类型
- 1.为什么需要数据类型
- 2.JavaScript变量的数据类型
- 3.JavaScript简单数据类型
- - 1.Number数字型
  - 2.String字符串型
- 4.JavaScript获取变量数据类型
- 5.JavaScript数据类型转换
三、解释语言和编译语言的区别
四、标识符、关键字和保留字
五、JavaScript运算符
- 1、算数运算符
- 2、递增和递减运算符
- 3、比较运算符
- 4、逻辑运算符
- 5、短路运算
- 6、赋值运算符
- 7、运算符优先级
六、JavaScript流程控制---分支结构
- 1、if
- 2、三元表达式
- 3、switch
七、JavaScript流程控制---循环结构
- 1、for循环
八、JavaScript命名规范和语法格式
九、JavaScript数组
- 1、创建数组
- 2、获取数组元素
- - 1、通过下标索引
  - 2、通过遍历获取所有数组元素
- 3、数组中新增元素
十、JavaScript函数
- 1、什么是函数
- 2、函数的使用
- 3、函数的封装
- - 1、形参和实参
  - 2、形参和实参个数不匹配
- 4、函数的return
- 5、函数的arguments
- 6、函数的两种封装方式
十一、JavaScript作用域
- 1、什么是作用域
- 2、局部变量和全局变量（ES6之前）
- 3、作用域链
十二、JavaScript预解析
- 1、变量提升和函数提升
十三、JavaScript对象
- 1、什么是JavaScript对象
- 2、创建JavaScript对象的三种方法
- 3、对象的遍历 for...in
- 4、JavaScript内置对象
十四、JavaScript简单数据类型和复杂数据类型
- 1、简单数据类型和复杂数据类型
- 2、简单数据类型传参
- 3、复杂数据类型传参
十五、WEB API
- 1、BOM和DOM
- 2、什么是WebAPI
十六、DOM
- 1、什么是DOM
- 2、什么是DOM树
- 3、获取元素
- 4、事件
- 5、操作元素
- 6、节点操作
- 7、创建元素
- 8、DOM核心重点
- 9、DOM高级事件
十七、BOM
- 1、什么是BOM
- 2、Windows对象常用的事件
- - 1.窗口加载事件
  - 2.调整窗口大小事件
- 3、定时器
- 4、JS执行队列
- 5、location对象
- - 5秒后跳转新的页面
  - 获取URL参数
- 6、navigator对象
- 7、history对象
十八、PC端网页特效
- 1、元素偏移量offset系列
- - 计算鼠标在盒子内的坐标
  - 模态框拖拽
- 2、元素可视区client系列
- - 立即执行函数
  - 淘宝flexible.js源码分析
- 3、元素滚动scroll系列
- - 仿淘宝固定侧边栏
- 总结
- mouseenter 和mouseover的区别
- 4、动画函数封装
十九、移动端网页特效
二十、jQuery
- 1.JavaScript库
- 2.jQuery概述
- 3.jQuery的基本使用
- 3.jQuery常用的API
- 4.jQuery事件
- 5.jQuery其他方法
二二、数据可视化
- 1、什么是数据可视化
- 2、常见的数据可视化库
- 3、ECharts简介
- 4、ECharts的基本使用
- 5、ECharts的相关配置

一、JavaScript简介

1.什么是JavaScript

在这里插入图片描述

2.JavaScript用途

在这里插入图片描述

3.浏览器执行JavaScript简介

在这里插入图片描述

3.JavaScript组成

在这里插入图片描述

1.ECMAScript

在这里插入图片描述

2.DOM

在这里插入图片描述

3.BOM

在这里插入图片描述

4.JavaScript代码位置

1.行内

在这里插入图片描述

2.内嵌

在这里插入图片描述

3.外部引入

在这里插入图片描述

5.JavaScript输入输出语句

在这里插入图片描述

二、JavaScript变量

1.什么是变量

在这里插入图片描述

2.变量使用

在这里插入图片描述

3.变量命名规范

在这里插入图片描述

三、数据类型

1.为什么需要数据类型

在这里插入图片描述

2.JavaScript变量的数据类型

在这里插入图片描述

3.JavaScript简单数据类型

在这里插入图片描述

1.Number数字型

在这里插入图片描述

isNaN（）

在这里插入图片描述

2.String字符串型

在这里插入图片描述

4.JavaScript获取变量数据类型

在这里插入图片描述

5.JavaScript数据类型转换

1.转换为字符串型

在这里插入图片描述

2.转换为数字型

在这里插入图片描述

3.转换为布尔型

在这里插入图片描述

三、解释语言和编译语言的区别

在这里插入图片描述

四、标识符、关键字和保留字

在这里插入图片描述

五、JavaScript运算符

在这里插入图片描述

1、算数运算符

在这里插入图片描述

浮点数存在精度问题，所以运算的时候不要直接使用浮点数进行运算

在这里插入图片描述

2、递增和递减运算符

在这里插入图片描述

第一个age是10 ，第二个是11

在这里插入图片描述

3、比较运算符

在这里插入图片描述

4、逻辑运算符

在这里插入图片描述

5、短路运算

在这里插入图片描述

从左往右开始，

与要假的，或要真的

只要符合条件了，就不往后运算了。

在这里插入图片描述

这个num最后还是0

6、赋值运算符

在这里插入图片描述

7、运算符优先级

在这里插入图片描述

六、JavaScript流程控制—分支结构

在这里插入图片描述

1、if

在这里插入图片描述

2、三元表达式

在这里插入图片描述

3、switch

在这里插入图片描述

这里Switch(num)中的变量与case中的value判断的时候用的是 ===

在这里插入图片描述

七、JavaScript流程控制—循环结构

在这里插入图片描述

1、for循环

在这里插入图片描述

八、JavaScript命名规范和语法格式

在这里插入图片描述

九、JavaScript数组

1、创建数组

利用对象创建数组
在这里插入图片描述

利用字面量创建数组

在这里插入图片描述

2、获取数组元素

1、通过下标索引

在这里插入图片描述

2、通过遍历获取所有数组元素

在这里插入图片描述

3、数组中新增元素

1、通过修改length长度新增数组元素

在这里插入图片描述

2、通过修改数组索引新增数组元素

把一个数组中的数据往另一个数组中存

1、定义一个变量为0 作为索引变量++
2、直接使用新数组的长度作为索引
3、直接push()方法

在这里插入图片描述

冒泡排序

在这里插入图片描述

十、JavaScript函数

1、什么是函数

在这里插入图片描述

2、函数的使用

在这里插入图片描述

3、函数的封装

在这里插入图片描述

## 4、函数的参数

1、形参和实参

在这里插入图片描述

2、形参和实参个数不匹配

在这里插入图片描述

4、函数的return

在这里插入图片描述
如果需要返回多个值，可以封装到一个数组里面返回

在这里插入图片描述

5、函数的arguments

在这里插入图片描述

6、函数的两种封装方式

在这里插入图片描述

十一、JavaScript作用域

1、什么是作用域

在这里插入图片描述

2、局部变量和全局变量（ES6之前）

在这里插入图片描述

3、作用域链

在这里插入图片描述

结果是20

十二、JavaScript预解析

在这里插入图片描述

1、变量提升和函数提升

在这里插入图片描述

结果是undefined

在这里插入图片描述
结果是 999 99undefined

在这里插入图片描述

变量和函数提升后

在这里插入图片描述

十三、JavaScript对象

1、什么是JavaScript对象

在这里插入图片描述

2、创建JavaScript对象的三种方法

在这里插入图片描述

1、利用字面量创建对象

在这里插入图片描述

2、利用new Object创建对象

在这里插入图片描述

3、利用构造函数创建对象

在这里插入图片描述

构造函数new对象的时候

在这里插入图片描述

3、对象的遍历 for…in

在这里插入图片描述

4、JavaScript内置对象

在这里插入图片描述

1、Math

在这里插入图片描述

2、Date()

在这里插入图片描述

3、Array

监测是否为数组

在这里插入图片描述

往数组中添加元素 —push和unshift

在这里插入图片描述

删除数组中的元素—pop和shift

在这里插入图片描述

数组排序和翻转数组

在这里插入图片描述

数组索引方法

在这里插入图片描述

数组去重

在这里插入图片描述

数组转换为字符串

在这里插入图片描述

4、String – 字符串对象

基本包装类型

在这里插入图片描述

字符串不可变 – 不要大量拼接字符串

在这里插入图片描述

根据字符返回位置

在这里插入图片描述

查找字符串中某个字符出现的位置和次数

在这里插入图片描述

根据位置返回字符

在这里插入图片描述

判断字符串中出现次数最多的字符并统计次数

在这里插入图片描述

拼接和截取字符串

在这里插入图片描述

替换字符和字符串转换为数组

在这里插入图片描述

十四、JavaScript简单数据类型和复杂数据类型

1、简单数据类型和复杂数据类型

在这里插入图片描述

2、简单数据类型传参

在这里插入图片描述

3、复杂数据类型传参

在这里插入图片描述

十五、WEB API

1、BOM和DOM

在这里插入图片描述

2、什么是WebAPI

在这里插入图片描述

十六、DOM

1、什么是DOM

在这里插入图片描述

2、什么是DOM树

在这里插入图片描述

3、获取元素

在这里插入图片描述

getElementById

在这里插入图片描述

getElementsByTagName

在这里插入图片描述

HTML5新增的三个

在这里插入图片描述

获取body和html元素

在这里插入图片描述

4、事件

加粗样式

在这里插入图片描述

5、操作元素

在这里插入图片描述

1、改变元素内容

在这里插入图片描述

2、修改元素属性

在这里插入图片描述

分时问候

在这里插入图片描述

修改表单属性

在这里插入图片描述

密码框小眼睛

在这里插入图片描述

3、改变元素样式

在这里插入图片描述

关闭二维码

在这里插入图片描述

循环精灵图

在这里插入图片描述

显示隐藏文本框内容

在这里插入图片描述

4、样式属性操作

在这里插入图片描述

总结

在这里插入图片描述

百度换肤

在这里插入图片描述

表格隔行换色

在这里插入图片描述

全选和取消全选

在这里插入图片描述

5、自定义属性

在这里插入图片描述

Tab栏切换

在这里插入图片描述

6、节点操作

在这里插入图片描述

1、节点层级

在这里插入图片描述

2、节点层级–父级节点

在这里插入图片描述

3、节点层级–字级节点

在这里插入图片描述

鼠标经过的下拉菜单

在这里插入图片描述

4、节点层级–兄弟节点

在这里插入图片描述

5、创建和新增节点

在这里插入图片描述

发布评论

在这里插入图片描述

6、删除节点

在这里插入图片描述

删除评论

在这里插入图片描述

7、复制节点

在这里插入图片描述

7、创建元素

在这里插入图片描述
如果使用innerHTML拼接字符串的话，大概3000
如果使用creatHTML 的话大概 30
如果使用innerHTML但是使用数组拼接字符串的话，大概8

在这里插入图片描述

8、DOM核心重点

在这里插入图片描述

9、DOM高级事件

1、注册事件

在这里插入图片描述

IE9以后才支持的事件监听

在这里插入图片描述

IE9以前支持的事件监听（了解不常用）

在这里插入图片描述

2、删除事件

在这里插入图片描述

3、DOM事件流

在这里插入图片描述

4、事件对象

什么是事件对象

在这里插入图片描述

事件对象的使用和用法

在这里插入图片描述

事件对象的常见属性和方法

在这里插入图片描述

e.target – 返回触发事件的对象

在这里插入图片描述

e.type – 返回事件类型

在这里插入图片描述

e.preventDefault(); – 阻止默认行为

在这里插入图片描述

e.stopPropagation(); – 阻止冒泡

在这里插入图片描述兼容性写法，了解就行，一般不写

在这里插入图片描述

5、事件委托

在这里插入图片描述

6、常用的鼠标事件

在这里插入图片描述

禁止选中文字和禁止右键菜单

在这里插入图片描述

鼠标事件对象

在这里插入图片描述

跟随鼠标的小月亮

在这里插入图片描述

7、常用的键盘事件

在这里插入图片描述

键盘事件对象

在这里插入图片描述

模拟京东按下s键，光标到搜索框

在这里插入图片描述

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按下s键，光标定位到搜索框title>
    <link rel="stylesheet" href="./css/index.css">
head>

<body>
    <input type="text">
body>
<script src="./js/index.js">script>

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

var search = document.querySelector('input');
document.addEventListener('keyup', function (e) {
    if (e.keyCode === 83) {
        search.focus();
    }
})
1
2
3
4
5
6

模拟京东快递单号查询

在这里插入图片描述

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入框内容放大title>
    <link rel="stylesheet" href="./css/index.css">
head>

<body>
    <div class="bg">
        <div class="bigger">
            <div class="rectangle">div>
            <div class="triangle">div>
        div>
        <input type="text" class="input_one"> 
        <input type="text" class="input_two"> 
    div>
body>
<script src="./js/index.js">script>

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

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bg{
  width: 300px;
  height: 200px;
  background-color: antiquewhite;
}
.bigger .rectangle {
  width: 260px;
  height: 40px;
  background-color: #fff;
  margin-left: 5px;
  font-size: 22px;
  line-height: 40px;
  border-radius: 3px;
  box-shadow: 2px 4px 2px 1px rgba(0, 0, 0, .2);;
}
.bigger .triangle{
  width: 10px;
  height: 10px;
  background-color: #fff;
  border: 1px solid #fff;
  border-top: 0;
  border-left: 0;
  transform: translate(36px,-6px) rotate(45deg);
}
.bigger{
  display: none;
  position: absolute;
}


input {
  position: relative;
  top: 48px;
  width: 200px;
  display: block;
  margin: 3px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

var input_one = document.querySelector('.input_one');
var bigger = document.querySelector('.bigger');
input_one.addEventListener('keyup',function(){
    //内容不为空 就放大
    if (this.value == '') {
        bigger.style.display = 'none';
    } else {
        bigger.style.display = 'block';
        bigger.children[0].innerHTML = this.value;
    }
})
input_one.addEventListener('blur', function () {
    bigger.style.display = 'none';
})
input_one.addEventListener('focus', function () {
    if (this.value != '') {
        bigger.style.display = 'block';
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

十七、BOM

1、什么是BOM

在这里插入图片描述

2、Windows对象常用的事件

1.窗口加载事件

在这里插入图片描述

在这里插入图片描述
第一个不会触发

在这里插入图片描述 两个都可以触发

在这里插入图片描述

2.调整窗口大小事件

在这里插入图片描述

3、定时器

1.两种定时器

在这里插入图片描述

倒计时

在这里插入图片描述

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东倒计时title>
    <link rel="stylesheet" href="./css/index.css">
head>

<body>
    <div class="bg">
        <div class="timer">
            <div class="hour">00div>
            <div class="minute">00div>
            <div class="second">00div>
        div>
        <div class="brs">div>
    div>
    
body>
<script src="./js/index.js">script>

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

* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bg{
  position: relative;
  width: 500px;
  height: 200px;
  background: #000;

}
.timer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 340px;
  height: 100px;
  background-color: #000;
}

.brs {
  position: absolute;
  z-index: 2;
  width: 490px;
  height: 3px;
  background-color: black;
  top: 50%;
  transform: translateY(-50%);
}
.timer .hour {
  display: inline-block;
  text-align: center;
  line-height: 100px;
  margin: 0 5px;
  width: 100px;
  height: 100px;
  background-color:  rgb(66, 62, 62);;
  color: #fff;
  font-size: 80px;
  font-weight: 700;
  border-radius: 10px;
}
.timer .minute {
  display: inline-block;
  text-align: center;
  line-height: 100px;
  margin: 0 5px;
  width: 100px;
  height: 100px;
  background-color:  rgb(66, 62, 62);;
  color: #fff;
  font-size: 80px;
  font-weight: 700;
  border-radius: 10px;
}
.timer .second {
  display: inline-block;
  text-align: center;
  line-height: 100px;
  margin: 0 5px;
  width: 100px;
  height: 100px;
  background-color: rgb(66, 62, 62);
  color: #fff;
  font-size: 80px;
  font-weight: 700;
  border-radius: 10px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var inputTime = new Date('2022-11-10 21:45:00');
countDown(); //先调用一次,可以不让他显示初始内容

function countDown() {
    var nowTime = new Date();
    var times = (inputTime - nowTime) / 1000;
    var h = parseInt(times / 60 / 60 % 24);
    var m = parseInt(times / 60 % 60);
    var s = parseInt(times % 60);
    if (h < 0) {
        h = '00';
    } else {
        h = h < 10 ? '0' + h : h;
    }
    if (m < 0) {
        m = '00';
    } else {
        m = m < 10 ? '0' + m : m;
    }
    if (s < 0) {
        s = '00';
    } else {
        s = s < 10 ? '0' + s : s;
    }
    hour.innerHTML = h;
    minute.innerHTML = m;
    second.innerHTML = s;
}

setInterval(countDown,1000)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

发送验证码，按钮禁用60秒

在这里插入图片描述

2.this指向问题

在这里插入图片描述

4、JS执行队列

在这里插入图片描述

5、location对象

在这里插入图片描述

5秒后跳转新的页面

在这里插入图片描述

获取URL参数

在这里插入图片描述

6、navigator对象

在这里插入图片描述

7、history对象

在这里插入图片描述

十八、PC端网页特效

1、元素偏移量offset系列

在这里插入图片描述

在这里插入图片描述
需要练习

在这里插入图片描述

计算鼠标在盒子内的坐标

在这里插入图片描述

模态框拖拽

在这里插入图片描述

2、元素可视区client系列

在这里插入图片描述

立即执行函数

在这里插入图片描述

淘宝flexible.js源码分析

在这里插入图片描述

3、元素滚动scroll系列

在这里插入图片描述

仿淘宝固定侧边栏

在这里插入图片描述

总结

在这里插入图片描述

mouseenter 和mouseover的区别

在这里插入图片描述

4、动画函数封装

1、动画实现原理

在这里插入图片描述

2、简单动画函数封装

在这里插入图片描述

3、给不同元素记录不同定时器

可以用对象属性的方法，这样他就不会重新开辟内存空间，而且没有歧义

在这里插入图片描述

4、缓动动画原理

在这里插入图片描述

改进：让盒子可以左右移动到整数上
在这里插入图片描述

5、缓动动画添加回调函数

在这里插入图片描述

6、动画函数的封装和使用

在这里插入图片描述

轮播图

返回顶部

筋斗云

十九、移动端网页特效

二十、jQuery

1.JavaScript库

在这里插入图片描述

2.jQuery概述

在这里插入图片描述

3.jQuery的基本使用

1.jQuery的下载

在这里插入图片描述

2.jQuery的入口函数

在这里插入图片描述

3.jQuery的顶级对象$

在这里插入图片描述

4.jQuery对象和DOM对象

在这里插入图片描述

5.jQuery对象转换为DOM对象

在这里插入图片描述

3.jQuery常用的API

1.jQuery选择器

1.jQuery基础选择器
在这里插入图片描述

在这里插入图片描述

2.jQuery层级选择器

在这里插入图片描述

3.jQuery的隐式迭代

在这里插入图片描述

补充：
在这里插入图片描述

4.jQuery的筛选选择器

在这里插入图片描述

5.jQuery的筛选方法

在这里插入图片描述

在这里插入图片描述

6.jQuery的排它思想

在这里插入图片描述

新浪下拉菜单 jQuery

在这里插入图片描述

$(function () {
    $('.nav li').mouseover(function () {
        $(this).children('ul').show();
    });
    $('.nav li').mouseout(function () {
        $(this).children('ul').hide();
    })
})
1
2
3
4
5
6
7
8