【前后端交互】

前端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. 请求方式：按照接口文档，GET或POST，大小写都行
    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前端开发教程