From aecfee4bd27cb2f73b93b6c436fd674195be8e7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=96=E5=BF=83=E5=A6=8D?= <2392642810@qq.com>
Date: Thu, 14 Dec 2023 12:36:52 +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

---
 .../20231213 jQuery.md"                       | 143 ++++++++++++++++++
 1 file changed, 143 insertions(+)
 create mode 100644 "03 \350\265\226\345\277\203\345\246\215/20231213 jQuery.md"

diff --git "a/03 \350\265\226\345\277\203\345\246\215/20231213 jQuery.md" "b/03 \350\265\226\345\277\203\345\246\215/20231213 jQuery.md"
new file mode 100644
index 0000000..09300e3
--- /dev/null
+++ "b/03 \350\265\226\345\277\203\345\246\215/20231213 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