diff --git "a/29 \350\267\257\347\216\262/20231214 \345\244\247\345\244\215\344\271\240.md" "b/29 \350\267\257\347\216\262/20231214 \345\244\247\345\244\215\344\271\240.md"
new file mode 100644
index 0000000000000000000000000000000000000000..f3da47be696f3ef3895a899bc7063487a55d6767
--- /dev/null
+++ "b/29 \350\267\257\347\216\262/20231214 \345\244\247\345\244\215\344\271\240.md"	
@@ -0,0 +1,276 @@
+tab栏切换
+
+```html
+  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
+<script>
+
+$(()=>{
+
+$('ul').on('click','a',function(){
+
+  $('a.active').removeClass('active');
+  $(this).addClass('active');
+
+  $('.item.active').removeClass('active');
+  const i = $('a').index($(this));
+  $(`.item:eq(${i})`).addClass('active')
+
+
+})
+
+})
+
+
+</script>
+```
+
+轮播图
+
+```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 i = 0 ;
+
+    //下一页按钮
+    $(()=>{
+     
+      //下一
+      $('.next').bind('click',() => {
+       
+        //i++；不能使用，因为当i的值超过了7，不会再进行效果所以要做判断
+        i = i >= data.length - 1 ? 0 : i + 1;
+        $('.slider-wrapper>img').attr('src',data[i].url);
+        $('.slider-footer>p').text(data[i].title);
+        $('slider-footer').css('background',data[i].color);
+
+        //去除原来的大点
+        $('li.active').removeClass('active');
+        $(`li:eq(${i})`).addClass('active');
+
+      })
+      
+
+      //上一
+      $('.prev').bind('click',() => {
+
+         //i--；不能使用，因为当i的值超过了7，不会再进行效果所以要做判断
+         i = i <= data.length - 1 ? 0 : i - 1;
+        $('.slider-wrapper>img').attr('src',data[i].url);
+        $('.slider-footer>p').text(data[i].title);
+        $('slider-footer').css('background',data[i].color);
+
+        //去除原来的大点
+        $('li.active').removeClass('active');
+        $(`li:eq(${i})`).addClass('active');
+
+      })
+
+       //定时器
+       let timeID = setInterval(() => {
+       
+        //自动点击
+         $('.next').click()
+       },1000)
+
+       
+       //暂停功能，鼠标移动到图片就发生停止移动，移出继续
+       $('.slider-wrapper,.next,.prev').bind({'mouseover':() =>{
+
+        //清除定时器
+        clearInterval(timeID)
+
+       },
+       'mouseout':() => {
+
+        //重新开启定时器
+        timeID = setInterval(() => {
+
+          //自动点击
+          $('.next').click()
+    
+        },1000)
+       }
+      
+      })
+       
+
+
+    })
+</script>
+```
+
+图书管理
+
+```js
+
+const creator = '小鹿666'
+
+function getBookListAndShow(){
+
+  //获取数据
+  $.ajax({
+    url:'https://hmajax.itheima.net/api/books',
+    type:'get',
+    data:{
+      creator
+
+    },success: (result) => {
+    //get和post都要data
+    const data = (result.data);
+console.log(result.data);
+    //渲染数据
+    const str = $.map(data,(item,i) => {
+  
+      return `
+      <tr>
+            <td>${i+1}</td>
+            <td>${item.bookname}</td>
+            <td>${item.author}</td>
+            <td>${item.publisher}</td>
+            <td data-id=${item.id}>
+              <span class="del">删除</span>
+              <span class="edit">编辑</span>
+            </td>
+          </tr>
+      `
+    }).join('')
+
+    $('.list').html(str);
+  }
+ })
+}
+
+getBookListAndShow()
+
+   //添加按钮
+   const modal = new bootstrap.Modal($('.add-modal'));
+   const form = $('add-form');
+      $('.add-btn').bind('click',() => {
+        const inputData = {}
+        inputData.bookname = $('.bookname').val();
+        inputData.author = $('.author').val();
+        inputData.publisher = $('.publisher').val();
+         
+          $.ajax({
+
+             url:'https://hmajax.itheima.net/api/books',
+             type:'post',
+             data:{
+                 ...inputData,
+                 creator
+             },success:(result) => {
+
+               getBookListAndShow();
+                
+               modal.hide()
+
+             }
+
+          })
+
+      })
+
+       //删除
+      $('.list').on('click','.del', function (){
+
+        //确认一次是否真的删除
+        if (confirm('是否真的要删除？')) {
+          
+          const id = $(this).parent().data('id');
+          $.ajax(
+            {
+              url:`https://hmajax.itheima.net/api/books/${id}`,
+              type:'delete',
+              success:() => {
+                getBookListAndShow()
+              }
+            }
+          )
+        }
+
+      })
+
+
+    //编辑
+    $('.list').on('click','.edit',function(){
+     
+      const modal = new bootstrap.Modal($('.edit-modal'));
+      const id = $(this).parent().data('id');
+
+      //通过接口，获取数据回显到表单
+      $.ajax({
+        url:`https://hmajax.itheima.net/api/books/${id}`,
+        type:'get',
+        success:result => {
+
+          const {id,bookname,author,publisher } = result.data;
+          $('.edit-from .bookname').val(bookname);
+          $('.edit-from .id').val(id);
+          $('.edit-from .author').val(author);
+          $('.edit-from .publisher').val(publisher);
+        }
+      })
+
+      modal.show()
+
+        $('.edit-btn').bind('click',() => {
+
+              // const form = $('edit-form');
+              // const inputData = {}
+              // inputData.bookname = $('edit-form .bookname').val();
+              // inputData.author = $('edit-form .author').val();
+              // inputData.publisher = $('edit-form .publisher').val();
+              // inputData.id = $('edit-form .id').val();
+              
+              const inputData = serialize($('.edit-form')[0],{hash:true,empty:true})
+                $.ajax({
+
+                  url:`https://hmajax.itheima.net/api/books/${inputData.id}`,
+                  type:'PUT',
+                  data:{
+                      ...inputData,
+                      creator
+                  },success:(result) => {
+
+                    getBookListAndShow();
+                      
+                    modal.hide()
+
+                  }
+                })
+              })
+
+      })
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+