【前后端交互】

前端JS无法和数据库进行操作,但可以通过服务器沟通数据库客户端

前端由前端工程师负责,服务器由后端工程师负责。

【接口文档】

后端开发人员写好服务器后,需要给前端人员的接口文档。

前端按照接口文档的规范,就可以拿到后端数据了。

【第一次测试Ajax】

Ajax是众多请求方式的一种。

标准Ajax步骤:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 1. 创建Ajax对象
var xhr = new XMLHttpREquest()

// 2. 配置本次请求信息
// xhr.open(请求方式, 请求地址, 是否异步)
xhr.open('get', 'xxx', true)

// 3. 注册请求完成的事件(会在本次请求完成之后触发)
xhr.onload = function () {
console.log('请求完成')
}

// 4. 把请求发出去
xhr.send()
  • 配置请求信息:
    1. 请求方式:按照接口文档,GETPOST,大小写都行
    2. 请求地址:基准地址+相对地址
    3. 是否异步:true是异步请求,false是同步请求

如何拿到后端返回的信息呢?

xhr对象内有个成员叫做xhr.resposeText,表示后端给我们的信息

1
2
3
4
5
6
7
8
9
10
// 1. 创建Ajax对象
var xhr = new XMLHttpREquest()
// 2. 配置本次请求信息(请求方式, 请求地址, 是否异步)
xhr.open('GET', 'xxx', true)
// 3. 注册请求完成的事件(会在本次请求完成之后触发)
xhr.onload = function () {
console.log('xhr.resposeText')
}
// 4. 把请求发出去
xhr.send()

【第二次测试Ajax】

很多时候后端返回给前端的不是普通字符串,而是json格式的字符串(数据类型)

1
2
3
4
5
6
7
8
9
10
11
12
13
// 1. 创建Ajax对象
var xhr = new XMLHttpREquest()

// 2. 配置本次请求信息(请求方式, 请求地址, 是否异步)
xhr.open('GET', 'http://localhost:8888/test/second', true)

// 3. 配置请求完成的事件(会在本次请求完成之后触发)
xhr.onload = function () {
console.log(xhr.resposneText)
}

// 4. 把请求发出去
xhr.send()

当后端返回json格式字符串的时候,我们需要单独解析。

解析语法:JSON.parse(json格式字符串)

返回值:是解析好的js格式的数据

1
2
3
4
5
// 3. 配置请求完成的事件(会在本次请求完成之后触发)
xhr.onload = function () {
var res = JSON.parse(xhr.resposneText)
console.log(res)
}

解析好后会发现拿到一个对象数据类型,里面是后端返回的信息

【请求方式】

GET POST
偏向获取的语义化 偏向提交的语义化
参数是查询字符串 参数格式多样,但需要特殊说明
大小限制在 2KB 左右 理论上没有限制
参数位置在地址后面
直接书写查询字符串格式
参数位置在请求体内
也就是xhr.send()后面的小括号里

【GET和POST请求】

示例:GET请求

1
2
3
4
5
6
7
8
9
// GET请求
var xhr = new XMLHttpREquest()
// 因为是get请求,直接在地址后面进行参数的书写(按照说明文档)
xhr.open('GET', 'http://localhost:8888/test/third?name=百里飞洋&age=18', true)

xhr.onload = function () {
console.log(JSON.parse(xhr.resposneText))
}
xhr.send()

示例:POST请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// POST请求
var xhr = new XMLHttpREquest()
// 因为是post请求,不需要在地址后面拼参数
xhr.open('POST', 'http://localhost:8888/test/fourth', true)

xhr.onload = function () {
console.log(JSON.parse(xhr.resposneText))
}

// 注意:当发送post请求,并且需要携带参数的时候,需要进行特殊说明(按照说明文档)
// 语法:xhr.setRequestHeader('content-type', 你传递的格式)
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')

// 书写请求的位置
xhr.send('name=百里飞洋&age=18')

【案例-登录】

  • 【分析需求】:
    1. 什么时候发送请求?
      => 点击登录按钮的时候
      => 需要给 form 标签绑定一个表单提交时间
    2. 需要拿到哪些信息?
      => 拿到用户填写的用户名和密码
    3. 需要如何发送给后端?
      => 按照接口文档的规范进行发送
    4. 请求完成以后我们需要做什么?
      => 根据后端返回的信息,进行一些后续的操作
      => 如果后端返回的信息是登陆成功,进行页面跳转
      => 如果后端返回的信息是登陆失败,提示用户错误
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="ch-Zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}

form {
width: 500px;
padding: 20px;
margin: 50px auto;
border: 3px solid pink;

/* 纵向排列 */
display: flex;
flex-direction: column;

font-size: 30px;
padding-top: 50px;
position: relative;
}

form > span {
/* 横向居中 */
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);

width: 100%;
text-align: center;
color: red;

display: none;
}

form > label {
height: 50px;
}

form > label > input {
font-size: 24px;
height: 40px;
padding-left: 20px;
}
</style>
</head>
<body>

<form>
<span class="error">用户名或者密码错误!
</span>
<label>
用户名:<input class="username" type="text">
</label>
<label>
密码:<input class="password" type="password">
</label>
<button>登录</button>
</form>

<script>
// 0. 获取元素
// 0-1 form 标签
var loginForm = document.querySelector('form')
// 0-2 用户名文本框
var nameInp = document.querySelector('.username')
// 0-3 密码文本框
var pwdInp = document.querySelector('.password')
// 0-4 错误提示文本
var errBox = document.querySelector('.error')

// 1. 给form绑定提交事件
loginForm.onsubmit = function (e) {
// 注意:阻止表单的默认提交行为(这里用了参数e)
e.preventDefault()
// console.log('我要发送 Ajax 请求')

// 2. 拿到用户填写的用户名和密码
var name = nameInp.value
var pwd = pwdInp.value
// console.log(name, pwd)

// 2-2. 验证用户名和密码
// 非空验证:空字符串取反后值为true
if (!name || !pwd) return alert('请完整填写表单')

// 3. 发送 Ajax 请求
var xhr = new XMLHttpREquest()
xhr.open('POST', 'http://localhost:8888/users/login', true)
xhr.onload = function () {
var res = JSON.parse(xhr.resposneText)
console.log(res)

// 进行条件判断
if (res.code === 0) {
// 登录失败
errBox.style.display = 'block'
} else {
// 登陆成功
window.location.href = './home.html'
}
}
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
xhr.send('username=' + name + '&password=' + pwd)


}

</script>

</body>
</html>

【引入jQuery】

一个大型的、简单的第三方类库

就是把常用的操作封装在一起,用的时候直接使用就行了。

jQuery对DOM操作进行了完善的封装,常见的DOM操作封装到了一起,包括各种元素操作以及rejects操作。

bZ4Nb4.jpg

【jQuery在线引用地址】

  • 官网jquery压缩版引用地址:
    • 3.1.1版本:<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    • 3.0.0版本:<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    • 2.1.4版本:<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>  
  • 百度压缩版引用地址:<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  • 微软压缩版引用地址:<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>

当引入jQuery文件后,会在全局暴露两个变量名,打印时显示出的内容是一样的。

  1. $
  2. jQuery

【获取DOM节点】

》 jQuery的选择器

语法:$('选择器')

不管使用任何选择器,获取到的元素都是一个元素集合。

1
2
3
4
5
6
7
8
9
10
11
12
// id选择器
console.log($('#box'))

// 类名选择器
console.log($('.a'))

// 标签选择器
console.log($('li'))

// 结构选择器
console.log($('li:nth-child(odd)')) //奇数个li
console.log($('li:nth-child(even)')) //偶数个li

》 jQuery的筛选器

语法:$('选择器').筛选器名称()

对选择器获取到的元素进行二次筛选

bZ4IRP.jpg

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
// first()
console.log($('li').first()) //第一个

// last()
console.log($('li').last()) //最后一个

// eq(索引)
console.log($('li').eq(3)) //索引从0开始

// next()
console.log($('span').next()) //下一个元素

// prev()
console.log($('span').prev()) //前一个元素

// prevAll()
console.log($('span').prevAll()) //前所有元素

// parent()
console.log($('span').parent()) //它的父元素

// parents()
//截取到的的该元素所有父级结构,逐层获取,直到HTML标签为止
console.log($('span').parent())

// siglings()
//拿到该元素的所有兄弟元素
console.log($('span').siglings())

// find(选择器)
//找到该元素的所有后代元素中,满足选择器要求的元素
console.log($('ul').find('i'))

【操作DOM节点】

》 jQuery操作文本内容

  • html()等价于原生JS中的innerHTML

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <div>
    hello
    <p>你好 世界</p>
    world
    </div>

    <script>
    // 1. html() 获取
    console.log($('div').html())

    // 2. html() 设置
    // 语法:元素集合.html(你要设置的内容)
    $('div').html('我是后来设置的内容')
    // 注意:可以识别并解析HTML结构字符串
    // $('div').html('<h2>我是后来设置的内容</h2>')
    </script>
  • text()等价于原生JS中的innerText方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <div>
    hello
    <p>你好 世界</p>
    world
    </div>

    <script>
    // 1. text() 获取
    console.log($('div').text())

    // 2. text() 设置
    // 语法:元素集合.text(你要设置的内容)
    $('div').text('我是后来设置的内容')
    // 注意:不可以识别并解析HTML结构字符串
    </script>
  • val()等价于原生JS中的value属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <input type="text" value="hello world">

    <script>
    // 1. val() 获取
    console.log($('input').val())

    // 2. text() 设置
    // 语法:元素集合.val(你要设置的内容)
    // 作用:用来设置该表单元素的value值
    $('input').val('我是后来设置的内容')
    </script>

》 jQuery操作元素类名

  • addClass()等价于原生JS中的value属性

    1
    2
    3
    4
    5
    6
    <div class="a b c d"></div>

    <script>
    // 语法:元素集合.addClass(需要添加的类名)
    $('div').addClass('e')
    </script>
  • removeClass()等价于原生JS中的value属性

    1
    2
    3
    4
    5
    6
    <div class="a b c d"></div>

    <script>
    // 语法:元素集合.addClass(需要删除的类名)
    $('div').addClass('b')
    </script>
  • toggleClass()等价于原生JS中的value属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <div class="a b c d"></div>
    <button>切换</button>

    <script>
    // 语法:元素集合.addClass(你要切换的类名)
    // 如果本身有这个类名,就删除;若没有这个类名,就添加
    var btn = document.querySelector('button')
    button.onclick = function () {
    // 执行jQuery切换div类名的操作
    $('div').toggleClass('box')
    }
    </script>

》 jQuery操作元素样式

  • css()方法
    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
    <style>
    div {
    height: 200px;
    background-color: skyblue;
    }
    </style>

    <div style="width: 100px;"></div>

    <script>
    // 1. css() 获取样式
    // 语法:元素集合.css(你要获取的样式名称)
    // 可以获取到元素的行内样式,也可以获取到元素的非行内样式
    console.log($('div').css('width'))
    console.log($('div').css('height'))


    // 2. css() 获取样式
    // 语法:元素集合.css(样式名, 样式值)
    // 当设置的元素的样式值单位是px的时候,可以省略不写
    console.log($('div').css('width', '300px'))
    console.log($('div').css('height', 500))
    console.log($('div').css('background-color', 'red'))

    // 3. css() 批量设置样式
    // 语法:元素集合.css({ 你所有设置的样式 })
    // 写在一个用花括号{}包裹的对象里
    $('div').css({
    width: 200,
    height: 320,
    opacity: 0.68,
    'background-color': 'purple'
    })
    </script>

》 jQuery操作元素属性

  • attr()方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div id="box" hello="world">我是一个 div 标签</div>

    <script>
    // attr()
    // 作用:设置和获取元素的属性,一般用于操作元素的自定义属性
    // 注意:attr()操作的所有属性都会直接出现在元素的标签上

    // attr() 获取
    // 语法:元素.attr(你要获取的属性名)
    // 返回值:该属性名对应的属性值
    console.log($('div').attr('hello'))
    console.log($('div').attr('id'))

    // attr() 设置
    // 语法:元素.attr(属性名, 属性值)
    console.log($('div').attr('a', 100))
    console.log($('div').attr('id', 'container'))
    </script>
  • removeAttr()方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div id="box" hello="world">我是一个 div 标签</div>

    <script>
    // removeAttr()
    // 作用:对元素的属性值进行删除操作
    // 语法:元素集合.removeAttr(你要删除的属性名)
    $('div').removeAttr('hello')
    $('div').removeAttr('id')

    </script>
  • prop()方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <div id="box" hello="world">我是一个 div 标签</div>

    <script>
    // prop()
    // => 当prop()设置元素的原生属性,会直接响应在元素标签上
    // => 当prop()设置元素自定义属性,不会直接响应在元素标签上,会响应在元素对象身上
    // 注意:prop()方法不能获取元素标签身上的自定义属性,只能获取到prop()自己设置的自定义属性

    // prop() 设置
    // 语法:元素集合.prop(属性名, 属性值)
    $('div').prop('id', 'container')
    $('div').prop('a', 100)

    // prop() 获取
    // 语法:元素集合.prop(属性名, 属性值)
    console.log($('div').prop('id'))
    console.log($('div').prop('hello')) //拿不到该自定义属性,因为不是prop自己设置的
    console.log($('div').prop('a')) //可以拿到该自定义属性,是prop刚刚自己设置的
    </script>
  • removeProp()方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <div id="box" hello="world">我是一个 div 标签</div>

    <script>
    // removeProp()
    // 作用:对元素的属性值进行删除操作
    // 注意:不能删除原生属性,只能删除由prop自定义的属性
    // 语法:元素集合.removeProp(你要删除的属性名)
    $('div').removeProp('id') //无法删除,因为是原生属性

    $('div').prop('a', 100)
    $('div').removeProp('a') //可以删除
    </script>

【jQuery获取元素尺寸】

视频教程

  • 内容区域
    • width()
    • height()
  • 内容+padding
    • innerWidth()
    • innerHeight()
  • 内容+padding+border
    • outerWidth()
    • outerHeight()
  • 拿到的包含你设置的margin值
    • outerWidth(true)
    • outerHeight(true)
  1. 不管元素是否隐藏,都能拿到值
  2. 不管盒子模型是什么状态,拿到的尺寸区域不变

【jQuery获取元素偏移量】

  • offset

    1
    2
    3
    // 获取元素相对于页面左上角的位置
    // 注意:返回值是一个对象数据类型{ top: yyy, left: xxx}
    console.log($('div').offset())
  • position

    1
    2
    3
    // 获取元素的定位位置
    // 注意:如果设置的是 right 和 bottom,会自动帮你算成 left 和 top 的值
    console.log($('span').position())

【jQuery绑定事件】

  • on()方法绑定事件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // 1. 基础绑定事件
    // 语法:元素集合.on('事件类型', 事件处理函数)
    $('div').on('click', function () {console.log('我是 div 的点击事件') })

    // 2. 事件委托绑定事件
    // 语法:元素集合.on('事件类型', 选择器, 事件处理函数)
    $('div').on('click', 'p', function () {console.log('我是事件委托形式的点击事件') })
    // 把事件绑定给 div 元素,当你在 div 内容的 p 元素触发事件的时候,会执行事件处理函数

    // 3. 批量绑定事件
    // 语法:元素集合.on({事件类型1: 处理函数, 事件类型2: 处理函数 })
    // 注意:不能进行事件委托
    $('div').on({
    click: function () {console.log('我是 div 的点击事件') }
    mouseover: function () {console.log('鼠标移入事件') }
    mouseout: function () {console.log('鼠标移出事件') }
    )
  • one()方法绑定事件(和on()一样,但只能执行一次)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // 1. 基础绑定事件
    // 语法:元素集合.on('事件类型', 事件处理函数)
    $('div').one('click', function () {console.log('我是 div 的点击事件') })

    // 2. 事件委托绑定事件
    // 语法:元素集合.on('事件类型', 选择器, 事件处理函数)
    $('div').one('click', 'p', function () {console.log('我是事件委托形式的点击事件') })
    // 把事件绑定给 div 元素,当你在 div 内容的 p 元素触发事件的时候,会执行事件处理函数

    // 3. 批量绑定事件
    // 语法:元素集合.on({事件类型1: 处理函数, 事件类型2: 处理函数 })
    // 注意:不能进行事件委托
    $('div').one({
    click: function () {console.log('我是 div 的点击事件') }
    mouseover: function () {console.log('鼠标移入事件') }
    mouseout: function () {console.log('鼠标移出事件') }
    )
  • hover()方法绑定事件

    1
    2
    3
    4
    5
    6
    7
    // 是jQuery里特殊的事件,只有一种,而且是自己独立的传参数方式
    // 语法:元素集合.hover('移入时触发的函数, 移出时触发的函数')
    // 当只传递一个参数时,移入移除都触发
    $('div').hover(
    function () { console.log('函数1') },
    function () { console.log('函数2') }
    )
  • 一些常用事件函数

    1
    2
    3
    4
    // jQuery把我们最常用到的一些事件,单独做成了事件函数
    // 我们通过这些事件函数,来达到绑定事件的效果
    // click(), mouseover(), change(), ...
    $('div').click(function () {console.log('点击事件')})

【jQuery事件的解绑和触发】

  • off()事件解绑

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    // 事件处理函数
    function handlerA() { console.log('我是 handlerA 事件处理函数') }
    function handlerB() { console.log('我是 handlerB 事件处理函数') }
    function handlerC() { console.log('我是 handlerC 事件处理函数') }

    // 给 div 元素绑定事件
    $('div')
    .click(handlerA)
    .click(handlerB)
    .click(handlerC)

    // off() 事件解绑:

    // 1. 解绑全部事件处理函数
    // 语法:元素集合.off(事件类型)
    $('div').off('click')
    // 会把 div 的 click 事件对应的 所有事件 处理函数全部移除

    // 2. 解绑指定的时间处理函数
    // 语法:元素集合.off(事件类型, 要解绑的事件处理函数)
    $('div').off('click', handlerB)
    // 会把 div 的 click 事件对应的 handlerB 事件处理函数移除
  • trigger()事件触发

    1
    2
    3
    // 使用代码的方式来触发事件
    // 语法:元素集合.trigger(事件类型)
    $('div').trigger('click')

    当与定时器结合使用时:

    1
    2
    3
    4
    // 每 1000ms 触发一次 div 的click 事件
    setInterval(function () {
    $('div').trigger('click')
    }, 1000)

【节点动画操作】

》 jQuery的基本动画

  • show()显示
  • hide()隐藏
  • toggle()切换
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
<!DOCTYPE html>
<html lang="ch-Zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}

div {
width: 500px;
height: 500px;
background-color: skyblue;
}
</style>
</head>
<body>

<button>show显示</button>
<button>hide隐藏</button>
<button>toggle切换</button>

<div></div>

<script>
/*这三个函数有共同的参数
=> 第一个表示运动时间
=> 第二个表示运动曲线
=> 第一个表示运动结束的回调函数
*/

$('button:nth-child(1)').click(function () {
// 执行 show 动画函数
$('div').show(1000, 'linear', function () { console.log('show动画函数结束了') })
})

$('button:nth-child(2)').click(function () {
// 执行 hide 动画函数
$('div').hide(1000, 'linear', function () { console.log('hide动画函数结束了') })
})

$('button:nth-child(3)').click(function () {
// 执行 toggle 动画函数
$('div').toggle(1000, 'linear', function () { console.log('toggle动画函数结束了') })
})

</script>

</body>
</html>

》 jQuery折叠动画

  • slideDown()显示
  • slideUp()隐藏
  • slideToggle()切换
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
<!DOCTYPE html>
<html lang="ch-Zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}

div {
width: 500px;
height: 500px;
background-color: skyblue;
}
</style>
</head>
<body>

<button>slideDown显示</button>
<button>slideUp隐藏</button>
<button>slideToggle切换</button>

<div></div>

<script>
/*这三个函数有共同的参数
=> 第一个表示运动时间
=> 第二个表示运动曲线
=> 第一个表示运动结束的回调函数
*/

$('button:nth-child(1)').click(function () {
// 执行 slideDown 动画函数
$('div').slideDown(1000, 'linear', function () { console.log('slideDown动画函数结束了') })
})

$('button:nth-child(2)').click(function () {
// 执行 slideUp 动画函数
$('div').slideUp(1000, 'linear', function () { console.log('slideUp动画函数结束了') })
})

$('button:nth-child(3)').click(function () {
// 执行 slideToggle 动画函数
$('div').slideToggle(10000, 'linear', function () { console.log('slideToggle动画函数结束了') })
})

</script>

</body>
</html>

》 jQuery渐隐渐显动画

  • fadeIn()渐显
  • fadeOut渐隐
  • fadeToggle()切换
  • fadeTo()指定透明度
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
<!DOCTYPE html>
<html lang="ch-Zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}

div {
width: 500px;
height: 500px;
background-color: skyblue;
}
</style>
</head>
<body>

<button>fadeIn</button>
<button>fadeOut</button>
<button>fadeToggle</button>
<button>fadeTo</button>

<div></div>

<script>
/*前三个函数有共同的参数
=> 第一个表示运动时间
=> 第二个表示运动曲线
=> 第一个表示运动结束的回调函数
第四个fadeTo()函数的参数有点变化:
=> (运动时间, 指定的透明度, 运动曲线, 运动结束的回调函数)
*/

$('button:nth-child(1)').click(function () {
// 执行 fadeIn 动画函数
$('div').fadeIn(1000, 'linear', function () { console.log('fadeIn动画函数结束了') })
})

$('button:nth-child(2)').click(function () {
// 执行 fadeOut 动画函数
$('div').fadeOut(1000, 'linear', function () { console.log('fadeOut动画函数结束了') })
})

$('button:nth-child(3)').click(function () {
// 执行 fadeToggle 动画函数
$('div').fadeToggle(1000, 'linear', function () { console.log('fadeToggle动画函数结束了') })
})

$('button:nth-child(4)').click(function () {
// 执行 fadeTo 动画函数
// fadeTo(运动时间, 指定的透明度, 运动曲线, 运动结束的回调函数)
$('div').fadeTo(1000, 0.68, 'linear', function () { console.log('fadeTo动画函数结束了') })
})
</script>

</body>
</html>

》 jQuery综合动画

  • animate()
    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
    <!DOCTYPE html>
    <html lang="ch-Zh">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
    * {
    margin: 0;
    padding: 0;
    }

    div {
    width: 300px;
    height: 300px;
    background-color: skyblue;
    position: absolute;
    }
    </style>
    </head>
    <body>

    <button>开始动画</button>

    <div></div>

    <script>
    /*综合动画animate()
    => 第一个参数:要运动的样式,以一个对象数据类型传递
    => 第二个参数:运动时间
    => 第三个参数:运动曲线
    => 第四个参数:运动结束的回调函数
    注意:
    => 关于 颜色 的相关样式是不能运动的
    => 关于 transform 相关的样式是不能运动的
    */

    $('button').click(function () {
    // 执行 animate() 函数实现运动
    $('div').animate({
    width: 500,
    height: 400,

    left: 100,
    top: 200,
    'border-radius': '50%'

    }, 1000, 'linear', function () { console.log('运动结束了') })
    })
    </script>

    </body>
    </html>

》 jQuery结束动画函数

  • stop()

    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
    <!DOCTYPE html>
    <html lang="ch-Zh">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
    * {
    margin: 0;
    padding: 0;
    }

    div {
    width: 500px;
    height: 500px;
    background-color: skyblue;
    position: absolute;
    }
    </style>
    </head>
    <body>

    <button>开始动画</button>

    <button>stop()停止</button>

    <div></div>

    <script>
    /*stop()结束动画:
    => 当任何一个元素使用了 stop() 方法以后,会立即结束当前所有运动
    => 目前运动到什么位置,就停留在什么位置
    */

    $('button:nth-child(1)').click(function () {
    // 开始一个动画
    // 使用一个简单的toggle(切换显示与隐藏)动画
    $('div').toggle(2000)
    })

    $('button:nth-child(2)').click(function () {
    // stop()停止动画
    $('div').stop()
    })
    </script>

    </body>
    </html>

    一般对于结束动画的时候,都是在运动之前。
    stop()toggle()动画写在一起,可以解决短时间内连续执行动画次数过多时的“延迟”问题:

    1
    2
    3
    4
    5
    6
    7
    8
    $('button:nth-child(1)').click(function () {
    // 开始一个动画
    // 使用一个简单的toggle(切换显示与隐藏)动画

    // 利用 结束动画 书写 动画函数
    $('div').stop().toggle(2000)
    // 每一次触发的时候,都会把之前的动画停止下来,只执行本次最新的动画
    })
  • finish()

    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
    <!DOCTYPE html>
    <html lang="ch-Zh">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
    * {
    margin: 0;
    padding: 0;
    }

    div {
    width: 500px;
    height: 500px;
    background-color: skyblue;
    position: absolute;
    }
    </style>
    </head>
    <body>

    <button>开始动画</button>

    <button>finish()结束动画</button>

    <div></div>

    <script>
    /*finish()完成动画:
    => 当任何一个元素使用了 finish() 方法以后,会立即结束当前所有运动
    => 直接去到动画的结束位置
    */

    $('button:nth-child(1)').click(function () {
    // 开始一个动画
    // 使用一个简单的toggle(切换显示与隐藏)动画
    $('div').toggle(2000)
    })

    $('button:nth-child(2)').click(function () {
    // finish()完成动画
    $('div').finish()
    })
    </script>

    </body>
    </html>

    同样地,把finish()toggle()动画写在一起,利用完成动画书写动画函数。

    1
    2
    3
    4
    5
    6
    7
    8
    $('button:nth-child(1)').click(function () {
    // 开始一个动画
    // 使用一个简单的toggle(切换显示与隐藏)动画

    // 利用 完成动画 书写 动画函数
    $('div').finish().toggle(2000)
    // 每一次触发的时候,都会把之前的动画瞬间完成,只执行本次最新的动画
    })

【jQuery的Ajax请求】

  • $.ajax()
    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
    /*jQuery的 ajax 请求:
    => 因为发送 ajax 请求不是操作DOM,所以不需要依赖选择器去获取到元素
    => 它直接依赖 $ 或 jQuery 变量来使用
    => 语法:$.ajax({ 本次发送Ajax的配置项 })
    配置项:
    => 1. url: 必填,表示请求地址
    => 2. method: 选填,默认GET,表示请求方式
    => 3. data: 选填,默认是''空字符串,表示携带给后端的参数
    => 4. async: 选填,默认是 true ,表示是否异步
    => 5. success: 选填,请求成功的回调函数
    => 6. error: 选填,请求失败的回调函数
    */
    $.ajax({
    url: 'http://localhost:8888/test/first',
    // method: 'GET'
    // data: ''
    // async: true
    success: function (res) {
    // res 接受的就是后端给回的响应结果
    console.log(res)
    }
    // error:
    })

    $.ajax({
    url: 'http://localhost:8888/test/second',
    success: function (res) {
    // res 接受的就是后端给回的响应结果
    console.log(res)
    }
    })

    $.ajax({
    url: 'http://localhost:8888/test/third',
    // method: 'GET',
    data: { name: '百里飞洋', age: 18 },
    success: function (res) {
    // res 接受的就是后端给回的响应结果
    console.log(res)
    }
    })

    $.ajax({
    url: 'http://localhost:8888/test/fourth',
    method: 'POST',
    data: { name: '百里飞洋', age: 18 },
    async: false, //同步请求(不建议)
    success: function (res) {
    // res 接受的就是后端给回的响应结果
    console.log(res)
    }
    })

    $.ajax({
    url: 'http://localhost:8888/test/fourth',
    method: 'POST',
    data: { name: '百里飞洋', age: 18 },
    success: function (res) {
    // res 接受的就是后端给回的响应结果
    console.log(res)
    }
    })

项目案例

项目案例视频教程(视频的P268~P286)

  • 首页结构布局
  • 登录注册页
  • 注册的逻辑
  • 登录页的逻辑
  • 首页的逻辑
  • 个人中心布局
  • 个人中心逻辑
  • 修改密码
  • 列表页结构布局
  • 列表页分类渲染
  • 列表页商品列表渲染
  • 列表页各种事件
  • 列表页加入购物车
  • 详情页布局
  • 详情页逻辑
  • 购物车结构布局
  • 购物车页面渲染
  • 购物车逻辑渲染

零碎知识点积累:

  • serialize()方法通过序列化表单值创建 URL 编码文本字符串。教程
  • localStorage可在页面之外存储信息。localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。教程
    用法:保存数据window.localStorage.setItem('token', res.token)
    用法:拿到数据const token = window.localStorage.getItem('token')

特别感谢
千锋HTML5前端开发教程