From 772d8e4597a6453922a9ee74dcecf052e1a66d9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=BF=97=E4=BC=9F?= <2152890632@qq.com>
Date: Thu, 28 Dec 2023 20:53:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...45\347\232\204\345\214\272\345\210\253.md" |  15 +
 ...03\345\211\215\345\244\215\344\271\240.md" | 426 ++++++++++++++++++
 ...243\345\234\260\345\235\200 httphmajax.md" |  40 ++
 3 files changed, 481 insertions(+)
 create mode 100644 "19\345\275\255\345\213\207\346\226\214/1.\345\220\214\346\255\245\344\270\216\345\274\202\346\255\245\347\232\204\345\214\272\345\210\253.md"
 create mode 100644 "19\345\275\255\345\213\207\346\226\214/\350\200\203\345\211\215\345\244\215\344\271\240.md"
 create mode 100644 "19\345\275\255\345\213\207\346\226\214/\350\216\267\345\217\226\346\234\272\345\231\250\344\272\272\345\233\236\347\255\224\346\266\210\346\201\257 - \346\216\245\345\217\243\345\234\260\345\235\200 httphmajax.md"
diff --git "a/19\345\275\255\345\213\207\346\226\214/1.\345\220\214\346\255\245\344\270\216\345\274\202\346\255\245\347\232\204\345\214\272\345\210\253.md" "b/19\345\275\255\345\213\207\346\226\214/1.\345\220\214\346\255\245\344\270\216\345\274\202\346\255\245\347\232\204\345\214\272\345\210\253.md"
new file mode 100644
index 0000000..0432ac2
--- /dev/null
+++ "b/19\345\275\255\345\213\207\346\226\214/1.\345\220\214\346\255\245\344\270\216\345\274\202\346\255\245\347\232\204\345\214\272\345\210\253.md"
@@ -0,0 +1,15 @@
+1.同步与异步的区别
+同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。
+
+异步提交：当用户发送请求时，当前页面还可以继续使用，当异步请求的数据响应给页面，页面把数据显示出来 。
+
+
+
+
+2.实现AJAX的基本步骤
+要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤:
+创建XMLHttpRequest对象,即创建一个异步调用对象.
+创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
+设置响应HTTP请求状态变化的函数.
+发送HTTP请求.
+获取异步调用返回的数据.
\ No newline at end of file
diff --git "a/19\345\275\255\345\213\207\346\226\214/\350\200\203\345\211\215\345\244\215\344\271\240.md" "b/19\345\275\255\345\213\207\346\226\214/\350\200\203\345\211\215\345\244\215\344\271\240.md"
new file mode 100644
index 0000000..418fb97
--- /dev/null
+++ "b/19\345\275\255\345\213\207\346\226\214/\350\200\203\345\211\215\345\244\215\344\271\240.md"
@@ -0,0 +1,426 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<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>tab栏切换</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+
+    .tab {
+      width: 590px;
+      height: 340px;
+      margin: 20px;
+      border: 1px solid #e4e4e4;
+    }
+    
+    .tab-nav {
+      width: 100%;
+      height: 60px;
+      line-height: 60px;
+      display: flex;
+      justify-content: space-between;
+    }
+    
+    .tab-nav h3 {
+      font-size: 24px;
+      font-weight: normal;
+      margin-left: 20px;
+    }
+    
+    .tab-nav ul {
+      list-style: none;
+      display: flex;
+      justify-content: flex-end;
+    }
+    
+    .tab-nav ul li {
+      margin: 0 20px;
+      font-size: 14px;
+    }
+    
+    .tab-nav ul li a {
+      text-decoration: none;
+      border-bottom: 2px solid transparent;
+      color: #333;
+    }
+    
+    .tab-nav ul li a.active {
+      border-color: #e1251b;
+      color: #e1251b;
+    }
+    
+    .tab-content {
+      padding: 0 16px;
+    }
+    
+    .tab-content .item {
+      display: none;
+    }
+    
+    .tab-content .item.active {
+      display: block;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="tab">
+    <div class="tab-nav">
+      <h3>每日特价</h3>
+      <ul>
+        <li><a class="active" href="javascript:;">精选</a></li>
+        <li><a href="javascript:;">美食</a></li>
+        <li><a href="javascript:;">百货</a></li>
+        <li><a href="javascript:;">个护</a></li>
+        <li><a href="javascript:;">预告</a></li>
+      </ul>
+    </div>
+    <div class="tab-content">
+      <div class="item active"><img src="./images/tab00.png" alt="" /></div>
+      <div class="item"><img src="./images/tab01.png" alt="" /></div>
+      <div class="item"><img src="./images/tab02.png" alt="" /></div>
+      <div class="item"><img src="./images/tab03.png" alt="" /></div>
+      <div class="item"><img src="./images/tab04.png" alt="" /></div>
+    </div>
+  </div>
+
+  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
+<script>
+
+$(document).ready(function(){
+
+     //获取所有最上面的标题（精选、美食、、百货、个护、预告），‘ ’空格代表下一级
+  let a = document.querySelectorAll('.tab-nav a');
+// console.log($('.tab-nav a'));
+    //   console.log(a);效果如下
+    //   NodeList(5) [a.active, a, a, a, a]
+    // 0: a.active
+    // 1: a
+    // 2: a
+    // 3: a
+    // 4: a
+    // length: 5
+    // [[Prototype]]: NodeList
+
+  //获取所有的照片
+    let img = document.querySelectorAll('.tab-content .item');
+      // console.log(img);效果如下
+      // NodeList(5) [div.item.active, div.item, div.item, div.item, div.item]
+      // 0: div.item.active
+      // 1: div.item
+      // 2: div.item
+      // 3: div.item
+      // 4: div.item
+      // length: 5
+      // [[Prototype]]: NodeList
+
+
+    for(let i=0;i<a.length;i++){
+      //因为之前是一次获取所有的值，所以a和img是数组
+      //现在要把数据拿出来，使用for循环是因为不仅可以全部拿出来，还节省代码
+      let arr = a[i];
+      let irr = img[i];
+      //给标题添加鼠标挪动触发事件
+      arr.addEventListener('mouseenter',function(){
+        //将原来的a标签添加的active给删除，使得去掉触发效果（标题变红并添加下划线）
+        // document.querySelector('.tab-nav .active').classList.remove('active');
+        $('.tab-nav .active')[0].classList.remove('active');
+    
+        //当你的鼠标挪动其他的标题时，展现触发效果（标题变红并添加下划线）
+        arr.classList.add('active');
+    
+        //将原来的照片添加的active给删除，使得去掉触发效果（将照片不显示）
+        // document.querySelector('.tab-content .active').classList.remove('active');
+        $('.tab-content .active')[0].classList.remove('active');
+    
+        //当你的鼠标挪动其他的标题时，展现触发效果（相应的照片出现）
+        irr.classList.add('active');
+      })
+    }
+  })
+
+</script>
+</body>
+
+</html>
+
+<!DOCTYPE html>
+<html lang="en">
+
+<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>轮播图点击切换</title>
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+
+    .slider {
+      width: 560px;
+      height: 400px;
+      overflow: hidden;
+    }
+    
+    .slider-wrapper {
+      width: 100%;
+      height: 320px;
+    }
+    
+    .slider-wrapper img {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+    
+    .slider-footer {
+      height: 80px;
+      background-color: rgb(100, 67, 68);
+      padding: 12px 12px 0 12px;
+      position: relative;
+    }
+    
+    .slider-footer .toggle {
+      position: absolute;
+      right: 0;
+      top: 12px;
+      display: flex;
+    }
+    
+    .slider-footer .toggle button {
+      margin-right: 12px;
+      width: 28px;
+      height: 28px;
+      appearance: none;
+      border: none;
+      background: rgba(255, 255, 255, 0.1);
+      color: #fff;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    
+    .slider-footer .toggle button:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
+    
+    .slider-footer p {
+      margin: 0;
+      color: #fff;
+      font-size: 18px;
+      margin-bottom: 10px;
+    }
+    
+    .slider-indicator {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      display: flex;
+      align-items: center;
+    }
+    
+    .slider-indicator li {
+      width: 8px;
+      height: 8px;
+      margin: 4px;
+      border-radius: 50%;
+      background: #fff;
+      opacity: 0.4;
+      cursor: pointer;
+    }
+    
+    .slider-indicator li.active {
+      width: 12px;
+      height: 12px;
+      opacity: 1;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="slider">
+    <div class="slider-wrapper">
+      <img src="./images/slider01.jpg" alt="" />
+    </div>
+    <div class="slider-footer">
+      <p>对人类来说会不会太超前了？</p>
+      <ul class="slider-indicator">
+        <li class="active"></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ul>
+      <div class="toggle">
+        <button class="prev">&lt;</button>
+        <button class="next">&gt;</button>
+      </div>
+    </div>
+  </div>
+  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
+  <script>
+$(document).ready(function(){
+
+
+
+// 1. 初始数据
+const data = [
+      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
+      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
+      { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
+      { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
+      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
+      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
+      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
+      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
+    ]
+    // 获取元素
+    let img=document.querySelector('.slider-wrapper img')
+    let p=document.querySelector('.slider-footer p')
+    let footer=document.querySelector('.slider-footer')
+    // let prebtn=document.querySelector('.toggle .prev')
+    // let nextbtn=document.querySelector('.toggle .next')
+
+
+
+    // 定义一个全局的图片位置的变量
+    let num=0
+
+   
+
+    // 先用定时器让其自动转换
+   let timer= setInterval(function(){
+      // nextbtn.click();
+      $('.toggle .next')[0].click();
+    },1000)
+
+
+    // 鼠标移动到图片，就暂时滚动
+    img.addEventListener('mouseenter',function(){
+      clearInterval(timer)
+    })
+    img.addEventListener('mouseleave',function(){
+      timer= setInterval(function(){
+        $('.toggle .next')[0].click();
+    },1000)
+    })
+      
+    // 下一页
+    $('.toggle .next').click(function(){
+    num++;
+    if(num>=data.length){
+      num=0}
+    img.src=data[num].url
+    p.innerHTML=data[num].title
+    footer.style.backgroundColor =data[num].color
+    // document.querySelector('.slider-indicator .active').classList.remove('active')
+    $('.slider-indicator .active')[0].classList.remove('active')
+    // document.querySelector(`.slider-indicator li:nth-child(${num+1})`).classList.add('active')
+    $(`.slider-indicator li:nth-child(${num+1})`)[0].classList.add('active')
+   })
+
+
+    // 上一页
+    $('.toggle .prev').click(function(){
+    num--;
+    if(num<0){
+      num=data.length}
+    img.src=data[num].url
+    p.innerHTML=data[num].title
+    footer.style.backgroundColor =data[num].color
+    // document.querySelector('.slider-indicator .active').classList.remove('active')
+    $('.slider-indicator .active')[0].removeClass('active')
+    // document.querySelector(`.slider-indicator li:nth-child(${num+1})`).classList.add('active')
+    $(`.slider-indicator li:nth-child(${num+1})`)[0].addClass('active')
+   })
+
+
+
+
+
+//原生代码
+// // 1. 初始数据
+// const data = [
+//       { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
+//       { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
+//       { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
+//       { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
+//       { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
+//       { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
+//       { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
+//       { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
+//     ]
+//     // 获取元素
+//     let img=document.querySelector('.slider-wrapper img')
+//     let p=document.querySelector('.slider-footer p')
+//     let footer=document.querySelector('.slider-footer')
+//     let prebtn=document.querySelector('.toggle .prev')
+//     let nextbtn=document.querySelector('.toggle .next')
+
+
+
+//     // 定义一个全局的图片位置的变量
+//     let num=0
+    
+
+//     // 先用定时器让其自动转换
+//    let timer= setInterval(function(){
+//       nextbtn.click();
+//     },1000)
+
+
+//     // 鼠标移动到图片，就暂时滚动
+//     img.addEventListener('mouseenter',function(){
+//       clearInterval(timer)
+//     })
+//     img.addEventListener('mouseleave',function(){
+//       timer= setInterval(function(){
+//       nextbtn.click();
+//     },1000)
+//     })
+
+//     // 下一页
+//    nextbtn.addEventListener('click',function(){
+//     num++;
+//     if(num>=data.length){
+//       num=0}
+//     img.src=data[num].url
+//     p.innerHTML=data[num].title
+//     footer.style.backgroundColor =data[num].color
+//     document.querySelector('.slider-indicator .active').classList.remove('active')
+//     document.querySelector(`.slider-indicator li:nth-child(${num+1})`).classList.add('active')
+//    })
+
+
+//     // 上一页
+//     prebtn.addEventListener('click',function(){
+//     num--;
+//     if(num<0){
+//       num=data.length}
+//     img.src=data[num].url
+//     p.innerHTML=data[num].title
+//     footer.style.backgroundColor =data[num].color
+//     document.querySelector('.slider-indicator .active').classList.remove('active')
+//     document.querySelector(`.slider-indicator li:nth-child(${num+1})`).classList.add('active')
+//    })
+
+
+
+
+
+
+
+})
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/19\345\275\255\345\213\207\346\226\214/\350\216\267\345\217\226\346\234\272\345\231\250\344\272\272\345\233\236\347\255\224\346\266\210\346\201\257 - \346\216\245\345\217\243\345\234\260\345\235\200 httphmajax.md" "b/19\345\275\255\345\213\207\346\226\214/\350\216\267\345\217\226\346\234\272\345\231\250\344\272\272\345\233\236\347\255\224\346\266\210\346\201\257 - \346\216\245\345\217\243\345\234\260\345\235\200 httphmajax.md"
new file mode 100644
index 0000000..c999e24
--- /dev/null
+++ "b/19\345\275\255\345\213\207\346\226\214/\350\216\267\345\217\226\346\234\272\345\231\250\344\272\272\345\233\236\347\255\224\346\266\210\346\201\257 - \346\216\245\345\217\243\345\234\260\345\235\200 httphmajax.md"	
@@ -0,0 +1,40 @@
+  <script>
+    // 获取机器人回答消息 - 接口地址: http://hmajax.itheima.net/api/robot
+    // 查询参数名: spoken
+    // 查询参数值: 我说的消息
+​    
+
+    //获取发送按钮的元素 获取input的内容
+    const input = document.querySelector('.chat_input')
+    const sendBox = document.querySelector('.send_box')
+    sendBox.addEventListener('click',e=>{
+      //添加点击事件 判断点的是不是发送那个图标
+  if(e.target.tagName==='IMG'){
+
+        axios({
+  url:'http://hmajax.itheima.net/api/robot',
+  params:{
+    spoken:input.value
+  }
+})
+.then(result => {
+  console.log('查询成功');
+  document.querySelector('.chat_list').innerHTML +=`
+  <li class="left">
+          <img src="./assets/you.png" alt="">
+          <span>${input.value}</span>
+        </li>
+        <li class="right">
+          <span>${result.data.data.info.text}</span>
+          <img src="./assets/me.png" alt="">
+        </li>`
+        input.value=''
+})
+.catch(error => {
+ return alert(error.response.data.message)
+})
+      }
+    })
+
+
+  </script>
\ No newline at end of file
-- 
Gitee

