JavaScript–前后端交互Ajax&jQuery

本文介绍: Ja vaScri p t 前后端交互与jQue ry

1.认识接口 文档

配置信息

请求基准地址：http://localhost:端口号
一.状态码
二.开局测试
2.1测试请求1
- 2.1.1请求地址
- 2.1.2请求方式
- 2.1.3携带参数
- 2.1.4响应数据
- …

完整请看「接口文档.md」https://www.aliyundrive.com/s/6ojLLVycHdU

（仅用作查看，具体测试请学会 node.js或者使用自己的后端）

2.Aja x

注：之后我们一般使用 jquery或者axios 插件完成相关操作

1.创建 ajax 对象

var xhr = new XMLHttpRequest()

2.配置本次请求信息

xhr.open(请求方式，请求地址，是否异步)

3.注册请求完成时间

xhr.onload = function(){}

4.把请求发出去

xhr.send()

var xhr = new XMLHttpRequest()
xhr.open('GET','xxx',true)
xhr.onload = function(){
    console.log('请求完成')
}
xhr.send()

    /*
      第一次尝试 ajax
    */

    // 1. 创建一个 ajax 对象
    var xhr = new XMLHttpRequest()

    // 2. 配置本次的请求信息
    // 请求方式: 按照接口文档来进行书写
    // 请求地址: 按照接口文档来进行书写
    // 是否异步: 默认是 true 表示异步请求, 选填为 false, 表示同步请求
    xhr.open('GET', 'http://localhost:8888/test/first', true)

    // 3. 配置一个请求完成后触发的事件
    // 请求完整: 本次请求发送出去, 服务器接收到了我们的请求, 并且服务器返回的信息已经回到了浏览器
    xhr.onload = function () {
      // 如何拿到后端返回的信息
      // 语法: xhr.responseText
      console.log(xhr.responseText)
    }

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

获取的是json 数据格式

   /*
      第二次测试 ajax
    */

    // 1. 创建ajax 对象
    var xhr = new XMLHttpRequest()

    // 2. 配置本次的请求信息
    xhr.open('GET', 'http://localhost:8888/test/second', true)

    // 3. 配置请求完成的事件
    xhr.onload = function () {
      // 当后端返回的是 json 格式字符串的时候, 我们需要进行单独的解析
      // 语法: JSON.parse(json格式字符串)
      // 返回值: 解析好的 js 格式的数据
      var res = JSON.parse(xhr.responseText)
      console.log(res)
    }

    // 4. 发送出去
    xhr.send()

3.请求方式

GET–偏向获取的语义化
- 参数是查询字符串
- 大小限制2KB左右
- 参数位置在地址后面
POST–偏向提交的语义化
- 参数格式多样，但是需要特殊说明
- 理论上没有限制
- 参数位置在请求体内

   /*
      GET 和 POST 请求
    */

    // 1. GET 请求
    // var xhr = new XMLHttpRequest()
    // // 需要携带参数
    // // 因为是 GET 请求, 直接在地址后面进行参数的书写
    // xhr.open('GET', 'http://localhost:8888/test/third?name=前端小灰狼&amp;age=18', true)
    // xhr.onload = function () {
    //   console.log(JSON.parse(xhr.responseText))
    // }
    // xhr.send()

    // 2. POST 请求
    var xhr = new XMLHttpRequest()
    // 注意: 因为是 POST 请求, 不需要在地址后面拼接参数
    xhr.open('POST', 'http://localhost:8888/test/fourth', true)
    xhr.onload = function () {
      console.log(JSON.parse(xhr.responseText))
    }

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

    // send 后面的() 就是书写请求体的位置
    xhr.send('name=前端小灰狼&amp;age=18')

4.登录 案例

<!DOCTYPE html&gt;
<html lang="en"&gt;
<head&gt;
  <meta charset="UTF-8"&gt;
  <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  <meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
  <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;
      left: 50%;
      top: 5px;
      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="text">
    </label>
    <button>登录</button>
  </form>

  <script>
    /*
      案例 - 登录

      分析需求:
        + 问题1: 什么时候进行发送请求 ?
          => 点击登录按钮的时候
          => 需要给 form 标签绑定一个表单提交事件
        + 问题2: 需要拿到哪些信息 ?
          => 需要拿到用户填写的用户名和密码
        + 问题3: 需要如何发送给后端 ?
          => 按照接口文档的规范进行发送
        + 问题4: 请求完成以后, 我们需要做什么 ?
          => 根据后端返回的信息, 进行一些后续的操作
          => 如果后端返回的信息是登录成功, 那么我们进行页面跳转
          => 如果后端返回的是登录失败, 那么我们提示用户错误
    */

    // 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.preventDefault()

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

      // 2-2. 验证用户名和密码
      if (!name || !pwd) return alert('请完整填写表单')

      // 3. 发送 ajax 请求
      var xhr = new XMLHttpRequest()
      xhr.open('POST', 'http://localhost:8888/users/login', true)
      xhr.onload = function () {
        // 因为后端返回的是 json 格式数据
        var res = JSON.parse(xhr.responseText)
        console.log(res)

        // 进行条件判断
        if (res.code === 0) {
          // 登录失败了
          errBox.style.display = 'block'
        } else {
          // 登录成功了
          window.location.href = './home.html'
        }
      }

      // 注意: POST 请求携带参数需要提前说明
      xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')

      // 因为 POST 请求携带参数是在请求体内
      xhr.send('username=' + name + '&amp;password=' + pwd)
    }

  </script>
</body>
</html>

5.jQuery

一个大型的简单的类库
对DOM操作进行了封装
- 获取DOM节点
- 操作节点文本
- 操作节点样式
- 操作节点类名
- 操作节点属性
- 获取节点尺寸
- 获取节点偏移量
- 操作节点事件
- 节点动画操作
- ajax封装
- …
官网：https://jquery.com/

6.引入jQuery


  <script src="./jquery/jquery.js"></script>
  <script>
    /*
      当你引入 jQuery 文件以后
        + 会在全局暴露两个变量名
          => $
          => jQuery
    */
    console.log($)
    console.log(jQuery)
  </script>

7.jQuery的选择器

<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>
</head>
<body>

  <ul>
    <li>1</li>
    <li class="a">2</li>
    <li>3</li>
    <li class="b">4</li>
    <li>5</li>
    <li class="a">6</li>
    <li>7</li>
    <li id="box">8</li>
    <li>9</li>
    <li>10</li>
  </ul>


  <script src="./jquery/jquery.js"></script>
  <script>
    // 注意: 不管使用任何选择器, 获取到的元素都是一个元素集合

    // id 选择器
    console.log($('#box'))

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

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

    // 结构选择器
    console.log($('li:nth-child(odd)'))
    console.log($('li:nth-child(even)'))
  </script>
</body>

8.jQuery的筛选器

first()
last()
eq()
next()
nextAll()
prev()
prevAll()
parent()
parents()
sibl in gs()
find()
…

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5
      <i>子两级</i>
    </li>
    <i>子一级</i>
    <span>我是 ul 内的一个 span 标签</span>
    <li>6</li>
    <li>7
      <p>
        <i>子三级</i>
      </p>
    </li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>

  <script src="./jquery/jquery.js"></script>
  <script>
    /*
      筛选器
    */

    // 1. first()
    // console.log($('li').first())

    // 2. last()
    // console.log($('li').last())

    // 3. eq(索引)
    // 注意: 索引从0 开始, 依次 +1
    // console.log($('li').eq(3))

    // 4. next()
    // console.log($('span').next())

    // 5. nextAll()
    // console.log($('span').nextAll())

    // 6. prev()
    // console.log($('span').prev())

    // 7. prevAll()
    // console.log($('span').prevAll())

    // 8. parent()
    // console.log($('span').parent())

    // 9. parents()
    // 注意: 获取到的是该元素所有父级结构, 逐层获取, 直到 html 标签为止
    // console.log($('span').parents())

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

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

  </script>
</body>

9.jQuery操作文本 内容

html()
text()
val()

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <div>
    hello
    <p>你好 世界</p>
    world
  </div>

  <input type="text" value="hello world">

  <script src="./jquery/jquery.js"></script>
  <script>
    /*
      操作文本内容
    */

    // 1. html()
    // 等价于我们原生 JS 中的 innerHTML
    // 1-1. html() 获取
    // console.log($('div').html())

    // 1-2. html() 设置
    // 语法: 元素集合.html(你要设置的内容)
    // 注意: 可以识别并解析 html 结构字符串
    // $('div').html('<h2>我是后来设置的内容</h2>')

    // 2. text()
    // 等价于我们原生 JS 中的 innerText
    // 2-1. text() 获取
    // console.log($('div').text())

    // 2-2. text() 设置
    // 语法: 元素集合.text(你要设置的内容)
    // 注意: 不可以识别并解析 html 结构字符串
    // $('div').text('<h2>我是后来设置的内容</h2>')

    // 3. val()
    // 等价于我们原生 JS 中 value，一般用在表单中
    // 3-1. val() 获取
    console.log($('input').val())

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

  </script>
</body>

10.JQ操作元素类名

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <div class="a b c d"></div>

  <button>切换</button>

  <script src="./jquery/jquery.js"></script>
  <script>
    /*
      操作元素类名
    */

    // 1. addClass()
    // 语法: 元素集合.addClass(需要添加的类名)
    // $('div').addClass('e')

    // 2. removeClass()
    // 语法: 元素集合.removeClass(你要删除的类名)
    // $('div').removeClass('b')

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

11.JQ操作元素样式

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      height: 200px;
      background-color: skyblue;
    }
  </style>
</head>
<body>

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

  <script src="./jquery/jquery.js"></script>
  <script>
    /*
      操作元素样式
        + css()
    */

    // 1. css 获取样式
    // 注意: 可以获取到元素的行内样式, 也可以获取到元素的非行内样式
    // 语法: 元素集合.css(你要获取的样式名称)
    // 返回值: 该样式的样式值
    // console.log($('div').css('width'))
    // console.log($('div').css('height'))
    // console.log($('div').css('background-color'))


    // 2. css 设置样式
    // 语法: 元素集合.css(样式名, 样式值)
    // 注意: 当你需要给一个元素设置样式值为 px 单位的时候, 可以省略单位不写
    // $('div').css('width', '300px')
    // $('div').css('height', 500)
    // $('div').css('background-color', 'red')


    // 3. css 批量设置样式
    // 语法: 元素集合.css({ 你所有需要设置的样式 })
    $('div').css({
      width: 260,
      height: 320,
      opacity: 0.68,
      'background-color': 'purple'
    })
  </script>
</body>

12.JQ操作属性

attr()
removeAttr()
prop()
removeProp()

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <div id="box" hello="world"> 我是一个 div 标签 </div>

  <script src="./jquery/jquery.js"></script>
  <script>
    /*
      操作元素属性

      1. attr()
        => 可以进行设置和获取元素的属性
        => 注意: 一般用于操作元素的自定义属性
        => 注意: attr 操作的所有属性都会直接出现在元素的标签身上
        => 获取:
          -> 语法: 元素.attr(你要获取的属性名)
          -> 返回值: 该属性名对应的属性值
        => 设置:
          -> 语法: 元素.attr(属性名, 属性值)

      2. removeAttr()
        => 对元素的属性进行删除操作
        => 语法: 元素集合.removeAttr(你要删除的属性名)
    */

    // 1-1. attr() 获取
    // console.log($('div').attr('hello'))
    // console.log($('div').attr('id'))

    // 1-2. attr() 设置
    // $('div').attr('a', 100)
    // $('div').attr('id', 'container')

    // 1-3. removeAttr()
    // $('div').removeAttr('hello')
    // $('div').removeAttr('id')

    /*
      1. prop()
        + 可以获取和设置元素的属性
        + 注意:
          => 当 prop 设置元素的原生属性, 会直接响应在元素标签身上
          => 当 prop 设置元素自定义属性, 不会直接响应在元素标签身上, 会响应在元素对象身上
        + 注意: prop 方法不能获取元素标签身上的自定义属性, 只能获取到 prop 方法自己设置的自定义属性
        + prop() 设置
          => 语法: 元素集合.prop(属性名, 属性值)
        + prop() 获取
          => 语法: 元素集合.prop(你要获取的属性名)
          => 返回值: 该属性对应的值

      2. removeProp()
        + 用来删除元素属性的方法
        + 注意:
          => 不能删除原生属性
          => 只能删除由 prop 方法设置的自定义属性
        + 语法: 元素集合.removeProp(你要删除的属性名)
    */

    // 1-1. prop() 设置
    // $('div').prop('id', 'container')
    // $('div').prop('a', 100)
    // console.log($('div'))

    // 1-2. prop() 获取
    // console.log($('div').prop('id'))
    // console.log($('div').prop('hello'))
    // console.log($('div').prop('a'))

    // 1-3. removeProp()
    // $('div').removeProp('id')
    // $('div').removeProp('a')
    // console.log($('div'))


  </script>
</body>

13.JQ获取元素尺寸

width()–是content区里面的width
height()
innerWidth()–是包括border+content的width
innerHeight()
outerWidth()–是包括margin+border+content的width
outerHeight()

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 300px;
      height: 300px;
      padding: 20px;
      border: 20px solid #333;
      margin: 20px;
      background-color: skyblue;
      background-clip: content-box;

      /* display: none; */
      /* visibility: hidden; */

      box-sizing: border-box;
    }
  </style>
</head>
<body>

  <div></div>

  <script src="./jquery/jquery.js"></script>
  <script>
    /*
      获取元素尺寸
        + 注意:
          1. 不管该元素是否隐藏, 都能获取到该元素的值
          2. 不管盒子模型是什么状态, 拿到的尺寸区域不变
    */

    // 1. width() 和 height()
    // 获取到的就是元素内容区域的尺寸
    console.log($('div').width())
    console.log($('div').height())

    console.log('------------------')
    // 2. innerWidth() 和 innerHeight()
    console.log($('div').innerWidth())
    console.log($('div').innerHeight())

    console.log('------------------')
    // 3. outerWidth() 和 outerHeight()
    console.log($('div').outerWidth())
    console.log($('div').outerHeight())

    console.log('------------------')
    // 4. outerWidth(true) 和 outerHeight(true)
    // 拿到的包含你设置的 margin 尺寸值
    console.log($('div').outerWidth(true))
    console.log($('div').outerHeight(true))
  </script>
</body>

14.JQ获取元素偏移量

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 500px;
      height: 500px;
      margin: 30px;
      background-color: skyblue;
      overflow: hidden;
    }

    p {
      width: 300px;
      height: 300px;
      margin: 30px;
      background-color: orange;
      overflow: hidden;

      position: relative;
    }

    span {
      display: block;
      width: 100px;
      height: 100px;
      /* margin: 30px; */
      background-color: pink;

      position: absolute;
      right: 30px;
      bottom: 30px;
    }
  </style>
</head>
<body>

  <div>
    <p>
      <span></span>
    </p>
  </div>

  <script src="./jquery/jquery.js"></script>
  <script>
    /*
      操作元素偏移量
    */

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

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

15.JQ绑定事件

on
one
hover

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      width: 500px;
      height: 500px;
      background-color: skyblue;
    }

    p {
      width: 300px;
      height: 300px;
      background-color: orange;
    }
  </style>
</head>
<body>

  <div>我是 div 标签
    <p>我是 div 内的 p 标签</p>
  </div>

  <script src="./jquery/jquery.js"></script>
  <script>
    /*
      绑定事件
    */

    // 1. on() 方法绑定事件
    // 1-1. 基础绑定事件
    // 语法: 元素集合.on('事件类型', 事件处理函数)
    // $('div').on('click', function () { console.log('我是div 的点击事件') })
    // 1-2. 事件委托绑定事件
    // 语法: 元素集合.on('事件类型', 选择器, 事件处理函数)
    // 把事件绑定给 div 元素, 当你在 div 内的 p 元素触发事件的时候, 执行事件处理函数
    // 事件委托, 把 p 元素的事件委托给了 div 元素来绑定
    // $('div').on('click', 'p', function () { console.log('我是事件委托形式的事件') })
    // 1-3. 批量绑定事件
    // 语法: 元素集合.on({ 事件类型1: 处理函数, 事件类型2: 处理函数 })
    // 注意: 不能进行事件委托了
    // $('div').on({
    //   click: function () { console.log('点击事件') },
    //   mouseover: function () { console.log('鼠标移入事件') },
    //   mouseout: function () { console.log('鼠标移出事件') }
    // })



    // 2. one()
    // 用来绑定事件, 和 on 方法绑定事件的方式是一样的
    // 区别: one 方法绑定的事件, 只能执行一次
    // 2-1. 基础绑定事件
    // $('div').one('click', function () { console.log('基础绑定事件') })
    // 2-2. 事件委托
    // $('div').one('click', 'p', function () { console.log('事件委托绑定事件') })
    // 2-3. 批量绑定事件
    // $('div').one({
    //   click: function () { console.log('点击事件') },
    //   mouseover: function () { console.log('鼠标移入事件') },
    //   mouseout: function () { console.log('鼠标移出事件') }
    // })


    // 3. hover()
    // 注意: jQuery 里面一个特殊的事件
    // 语法: 元素集合.hover(移入时触发的函数, 移出时触发的函数)
    //       当你只传递一个函数的时候, 会在移入移出都触发
    // $('div').hover(
    //   function () { console.log('函数1') },
    //   function () { console.log('函数2') }
    // )


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

16.JQ事件的解绑和触发

off
trigger

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <div>我是 div 标签</div>

  <script src="./jquery/jquery.js"></script>
  <script>
    /*
      事件的解绑和触发
    */

    // 准备事件处理函数
    function handlerA() { console.log('我是 handlerA 事件处理函数') }
    function handlerB() { console.log('我是 handlerB 事件处理函数') }
    function handlerC() { console.log('我是 handlerC 事件处理函数') }

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


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


    // 2. trigger() 事件触发
    // 使用代码的方式, 来触发事件
    // 语法: 元素集合.trigger(事件类型)
    // 就会触发该元素的该事件
    setInterval(function () {
      // 表示每 1000ms 触发一次 div 的 click 事件
      $('div').trigger('click')
    }, 1000)

  </script>
</body>

17.JQ基本 动画函数

本质上是对width和height的控制

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <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 src="./jquery/jquery.js"></script>
  <script>
    /*
      基本动画
        1. show() 显示
        2. hide() 隐藏
        3. toggle() 切换
          => 本身如果是显示的, 就隐藏
          => 本身如果是隐藏的, 就显示
        + 对于以上三个运动函数, 有共同的参数
          => 第一个表示运动时间
          => 第二个表示运动曲线
          => 第三个表示运动结束的回调函数
    */

    $('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>

18.JQ折叠动画函数

本质上就是改变元素的高度

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <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 src="./jquery/jquery.js"></script>
  <script>
    /*
      基本动画
        1. slideDown() 显示
        2. slideUp() 隐藏
        3. slideToggle() 切换
          => 本身如果是显示的, 就隐藏
          => 本身如果是隐藏的, 就显示
        + 对于以上三个运动函数, 有共同的参数
          => 第一个表示运动时间
          => 第二个表示运动曲线
          => 第三个表示运动结束的回调函数
    */

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

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

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

19.JQ渐隐渐现动画函数

本质上改变元素的透明度（opticity）

fadeIn显示
fadeOut隐藏
fadeToggle切换
fadeTo（运动时间，指定的透明度，运动曲线，运动结束的回调函数）

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <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 src="./jquery/jquery.js"></script>
  <script>
    /*
      基本动画
        1. fadeIn() 显示
        2. fadeOut() 隐藏
        3. fadeToggle() 切换
          => 本身如果是显示的, 就隐藏
          => 本身如果是隐藏的, 就显示
        + 对于以上三个运动函数, 有共同的参数
          => 第一个表示运动时间
          => 第二个表示运动曲线
          => 第三个表示运动结束的回调函数
        4. fadeTo(运动时间, 指定的透明度, 运动曲线, 运动结束的回调函数)
    */

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

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

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

    $('button:nth-child(4)').click(function () {
      // 执行 fadeTo 函数
      $('div').fadeTo(1000, 0.68, 'linear', function () { console.log('运动到了指定的透明度') })
    })
  </script>
</body>

20.JQ综合动画函数

animate

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

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

  <button>开始 动画</button>

  <div></div>


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

    $('button').click(function () {
      // 利用 animate 函数来实现运动
      $('div').animate({
        width: 500,
        height: 600,
        // 'background-color': 'pink'
        // transform: 'rotate(45deg)'
        left: 300,
        top: 200,
        'border-radius': '50%'
      }, 1000, 'linear', function () { console.log('运动结束了') })
    })
  </script>
</body>

21.JQ结束动画函数

stop
finish

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

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

  <button>开始动画</button>

  <button>stop()</button>

  <button>finish()</button>

  <div></div>


  <script src="./jquery/jquery.js"></script>
  <script>
    /*
      结束动画
        + 需要用到运动结束的函数
        1. stop()
          => 当任何一个元素, 执行了 stop 方法以后
          => 会立即结束当前的所有运动, 目前运动到什么位置, 就停留在什么位置
          => 一般对于结束动画的时候, 都是在运动开始之前

        2. finish()
          => 放 任何一个元素, 执行了 finish 方法以后
          => 会立即结束当前的所有运动, 直接去到动画的结束位置
    */

    $("button:nth-child(1)").click(function () {
      // 开始一个动画
      // 使用一个简单的toggle动画
      // $('div').toggle(2000)

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

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

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

    $("button:nth-child(3)").click(function () {
      // 结束动画
      $('div').finish()
    })
  </script>
</body>

22.JQ Ajax请求

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <script src="./jquery/jquery.js"></script>
  <script>
    /*
      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',
    //   success: function (res) {
    //     // res 接受的就是后端给回的响应结果
    //     console.log(res)
    //   }
    // })

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

    // $.ajax({
    //   url: 'http://localhost:8888/test/third',
    //   data: { name: '前端小灰狼', age: 18 },
    //   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)
    //   }
    // })

    $.ajax({
      url: 'http://localhost:8888/test/fourth',
      method: 'POST',
      async: false,
      data: { name: '前端小灰狼', age: 18 },
      success: function (res) {
        // res 接受的就是后端给回的响应结果
        console.log(res)
      }
    })
  </script>
</body>