From 9dfd92bab7054cf4b43183758748e34ecb954410 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=91=A8=E5=8E=9A=E8=BE=B0?=
 <7964342+zha_cai@user.noreply.gitee.com>
Date: Thu, 28 Dec 2023 12:46:55 +0000
Subject: [PATCH] =?UTF-8?q?add=2053=20=E5=91=A8=E5=8E=9A=E8=BE=B0/2023-12-?=
 =?UTF-8?q?16=20=E7=AC=AC=E4=BA=8C=E5=8D=81=E4=BA=94=E6=AC=A1=E6=AC=A1?=
 =?UTF-8?q?=E4=BD=9C=E4=B8=9A=20JQuery.md.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 周厚辰 <7964342+zha_cai@user.noreply.gitee.com>
---
 ...254\241\344\275\234\344\270\232 JQuery.md" | 143 ++++++++++++++++++
 1 file changed, 143 insertions(+)
 create mode 100644 "53 \345\221\250\345\216\232\350\276\260/2023-12-16 \347\254\254\344\272\214\345\215\201\344\272\224\346\254\241\346\254\241\344\275\234\344\270\232 JQuery.md"

diff --git "a/53 \345\221\250\345\216\232\350\276\260/2023-12-16 \347\254\254\344\272\214\345\215\201\344\272\224\346\254\241\346\254\241\344\275\234\344\270\232 JQuery.md" "b/53 \345\221\250\345\216\232\350\276\260/2023-12-16 \347\254\254\344\272\214\345\215\201\344\272\224\346\254\241\346\254\241\344\275\234\344\270\232 JQuery.md"
new file mode 100644
index 0000000..33509c7
--- /dev/null
+++ "b/53 \345\221\250\345\216\232\350\276\260/2023-12-16 \347\254\254\344\272\214\345\215\201\344\272\224\346\254\241\346\254\241\344\275\234\344\270\232 JQuery.md"	
@@ -0,0 +1,143 @@
+tab栏切换
+
+```html
+<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
+<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')
+   })
+})
+  </script>
+```
+
-- 
Gitee