diff --git "a/04 \346\235\216\346\230\216\345\201\245/20231213 jQuery\347\254\224\350\256\260.md" "b/04 \346\235\216\346\230\216\345\201\245/20231213 jQuery\347\254\224\350\256\260.md"
new file mode 100644
index 0000000000000000000000000000000000000000..4b59109dc247855e1d4c6c5f6b3a3393da078591
--- /dev/null
+++ "b/04 \346\235\216\346\230\216\345\201\245/20231213 jQuery\347\254\224\350\256\260.md"	
@@ -0,0 +1,355 @@
+# jQuery
+
+
+
+### 1 关于原生js对象（DOM对象）和jQuery对象的误区：
+
+```js
+1.javascript对象又称dom对象，是指使用javascript操作的对象，
+例如：
+         document.getElementById("id值")方法 获得的对象就是dom对象
+         document.querySelectorAll("")
+2.jquery对象是指使用jquery操作的对象，
+例如：
+         $("选择器");
+3.关于javascript对象与jquery对象之间的转换
+         因为jquery对象默认是集合或者数组，所以可以使用数组或者集合的取值方法
+         
+         dom->jquery:  $(dom对象);
+         jquery->dom: jquery对象[0]或者jquery对象.get(0)
+
+4.dom对象只能使用javascript方法，jquery对象只能使用jquery方法
+
+```
+
+### 2 jQuery 是第三方库，使用前要先引入
+
+```js
+ <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
+```
+
+### 3 选择器
+
+```js
+<h1>我是一个标题</h1>
+<p>我是有id的p段落</p>
+<script>			
+			// 元素选择器：$("元素名") ，也就是标签选择器			
+            // alert($("h1").html());
+    
+            // id选择器：$("#id值")			
+            // alert($("#p1").html());
+
+            // 类选择器：$(".类名")
+            // alert($(".s1").html());
+
+            // 并集选择器：$("选择器1,选择器2")，表示或的意思
+            // alert($("#p1,#p2").length); // 选中id值为p1或p2的元素
+
+            // 交集选择器：$("选择器1选择器2选择器n")，表示同时满足
+            // alert($("p#p2").html()); // 表示选中id值为p2的p标签
+
+            // 全局选择器：$("ul *")，表示选中全部元素
+            // alert($("*").length);
+    		// $('.content *').css('background', 'red'); 选择页面中class为content的div下所有元素，设置其背景为红色。
+
+            /*
+                层次选择器
+                    -相邻选择器（只选择后面的那个元素）：$("选择器1+选择器2")
+                    -同辈选择器（只选择后面的那些元素）:$("选择器1~选择器2")
+                    -后代选择器：$("选择器1 选择器2")
+                    -子代选择器：$("选择器1>选择器2")
+            */
+             // 相邻选择器
+                alert($("#l2+li").html()); // 选中紧挨着id属性值为l2的li元素
+                alert($(".l1~li").length); // 选中紧挨着后面的li元素
+                alert($("ul>li").length); // 选中ul的子代元素
+
+        
+            // 属性选择器
+            // $("[属性名]")：选中所有带有该属性的元素
+            // alert($("[class]").length); // 选中所有带有class属性的元素
+            /*
+                $("[属性名='属性值']")：选中属性值等于该属性值的元素
+                $("[属性名!='属性值']")：选中属性值不等于该属性值的元素
+                $("[属性名^='属性值']")：选中以该属性名开头的元素
+                $("[属性名$='属性值']")：选中以该属性值结尾的元素
+                $("[属性名*='属性值']")：选中包含该属性值的元素
+            */
+
+            // alert($("[id^='p']").length); // 选中id属性以p开头的元素
+            // alert($("[id*='s']").length); // 选中id属性包含s的元素
+
+            /*
+                过滤选择器（不经常使用）注意顺序由0开始
+                nth-child(自然数)
+                :first：最开头那一个（即0）
+                :last:最后那一个
+                :even：偶数(索引的奇偶)
+                :odd：奇数
+                :eq(index)：第index个
+                :gt(index)：大于第index个的全部元素
+                :lt(index)：小于第index个的全部元素
+                :not：除了什么以外的全部元素
+            */
+            alert($("ul>li:first").html()); // 选择ul的所有li后代中的第一个
+            alert($("ul>li:last").html()); // 选择ul的所有li后代中的第一个
+            alert($("ul>li:even").length); // 选择ul的所有li后代中的偶数元素
+            alert($("ul>li:eq(2)").html()); // 选择ul的所有li后代中的第二个，从0开始
+            alert($("li:not(ul>li:eq(2))").length); // 选择ul的所有li中等于第三个以外的元素
+
+</script>
+```
+
+### 4 jQuery事件
+
+***1.js事件回顾***
+
+```js
+javascript事件
+                1.以on开头，比如鼠标单击事件onclick，onchange,onready,onblur,oninput,
+                    javascript事件一般通过注册事件句柄实现绑定
+                2.js事件通常是一个函数，通过事件驱动执行，js函数内部可以使用jquery方式进行选中元素
+                3.位置：js事件函数写在<javascript>标签内，ready()外
+        
+            定义onclick事件函数
+            
+            
+            
+            function jsClick(){
+                alert("js鼠标单击事件...");
+                // 使用jquery选中选中其它元素
+                $("#myText").css("background-color","red");
+            }
+
+```
+
+***2.jQuery事件***
+
+```js
+/*
+            jquery事件：
+            1.没有on，直接以js事件去掉相应的on即可
+            2.位置：ready()内
+                ready(function){
+                    $("jquery选择器").事件类型(function(){
+                        事件体...
+                    })
+                }
+        */
+        $(document).ready(function(){            
+            // 鼠标单击事件
+            $("#myButton").click(function(){
+                $("#myText").css("background-color","red");
+            })
+        })// ready()结束标记
+
+```
+
+***3.常见的jQuery事件***
+
+```js
+				鼠标事件
+                    -click：鼠标单击
+				-- dblclick 双击
+                    -mouseover：鼠标进入（进入子元素也会触发）
+                    -mouseout：鼠标离开（离开子元素也会触发）
+                    -focus：元素获得焦点
+                    -blur：元素失去焦点
+                
+                键盘事件
+                    -keydown：键盘按下事件，从上到下的过程
+                    -keyup：松开键盘
+                    -keypress：键盘被按到最底部
+            	绑定事件
+                1.形式 addEventLister("事件名",函数)
+                    $("jquery选择器").bind("事件名",函数)
+                    好处：更加通用
+                2.多组事件绑定：
+                    $("jquery选择器").bind({"事件名":函数，"事件名":函数，"事件名":函数，})
+          		
+
+显示效果：
+                    -show(参数1，参数2)：显示
+				-hide(参数1，参数2)：隐藏
+
+
+                    -fadeIn(参数1，参数2)：淡入
+                    -slideDown(参数1，参数2)：展开
+                    关于参数：参数1表示速度，可选值有slow、fast、normal
+                            参数2表示回调函数
+                隐藏效果：
+                    
+                    -fadeOut(参数1，参数2)：淡出
+                    -slideUp(参数1，参数2)：拉升 (压缩) 
+                
+                $("p").one( "click", fun...) //one 绑定一个一次性的事件处理函数
+				$("p").unbind( "click" ) //解绑一个事件
+
+```
+
+### 5 jQuery操作DOM对象
+
+***1.jQuery操作样式***
+
+```js
+i.设置css
+				  获取对象的某个样式的属性对应的值jquery对象.css("属性名")  style
+                    设置单个样式：jquery对象.css("属性名","属性值")
+                    设置多个样式：jquery对象.css({"属性名":"属性值",属性名":"属性值,属性名":"属性值})
+classList.add .remove toggle .contains
+ii.追加或移出预定义样式
+                    addClass("xxx")：追加单个属性
+                    addClass("xxx xxx xxx")：追加多个属性
+                    removeClass("xxx")：移除单个属性
+                    removeClass("xxx xxx xxx")：移除多个属性
+                    toggleClass("xxx xxx xxx")：轮换属性
+                    可以在style标签预定义一些样式，通过add或remove方法进行追加或移除属性
+
+```
+
+***2.jQuery操作内容***
+
+```js
+i.jquery操作DOM之内容 
+                    取值(文本)：
+                    html()：获取值，获取的是元素的内容，包括元素内部的各种标签 innerHTML
+                    text()：获取值，只获取内容值，不包括各种标签 innerText
+                    赋值：
+                    html("xxx")：先渲染，后显示 innerHTML= xxx
+                    text("xxx")：原封不动显示，不进行渲染  innerText = xxx
+                    
+                    表单的：
+                    val()：获取属性值 .value
+                    val("xxx")：赋值 .value =xxx
+
+
+ii.jquery工厂$()的作用
+                    -$("jquery选择器")：jquery选择器：
+                    -$(document)：类型转换，DOM对象转换为jquery对象
+                    -$(html字符串)：创建节点
+
+                插入节点：
+                    -内部插入：
+                        $("A").append($("B"))：将B插入到A尾部
+                        $("A").prepend($("B"))：将B插入到A头部
+                        
+                    外部插入：
+                        $("A").before($("B"))：将B插入到A前面（外部）
+                        $("A").after($("B"))：将B插入到A后面（外部）
+                
+                替换节点
+                    -$("A").replaceWith($("B"))：用B替换A
+
+				删除节点
+                    -remove()：彻底删除，包括节点关联的一切
+                    -empty()：只删除节点内容
+
+                克隆节点
+                    -clone(true|false)
+                    其中true代表克隆节点的同时克隆节点所绑定的事件，false代表只克隆节点
+
+iii.属性操作
+                    attr("属性名")：根据属性名获取属性值
+                    attr("属性名","属性值")：设置单个属性值
+                    attr({"属性名":"属性值","属性名":"属性值","属性名":"属性值"})：设置多个属性值
+                    removeAttr("属性名")：删除属性值
+                    
+iiii.jquery获取集合和遍历集合
+                    获取子节点集合：$("选择器").children("过滤")
+                  
+
+                    同辈集合：
+                        -next()：下一个
+                        -prev()：前一个
+                        -sublings()：左右
+
+                    前辈集合：
+                        -parent()：父辈
+                        -parents()：祖先
+
+iiiii.集合遍历：
+                    $("选择器").each(function(index,element){
+
+                    })
+                    其中参数index表示当前是第几个元素，element代表当前元素，注意element是dom对象，必须进行jquery工厂进行转换
+
+```
+
+### 6 jQuery表单验证（后端必会知识)
+
+***1.关于表单验证***
+表单验证是java后端程序员必须要掌握的前端技能，表单验证减轻了前端对服务器的访问量。
+表单验证三大步：
+-获取要校验的元素值（选择器）
+-要触发校验的事件或方法：blur或是submit,或change
+-验证：采用字符串处理方法或是正则表达式
+***2.采用字符串验证表单（传统模式）***
+————————————————
+
+```js
+// 采用字符串处理方法对表单进行校验
+            $("#uname").blur(function(){
+                if($(this).val().length<2 || $(this).val().length>6){
+                    if($(this).val().length==0 || $(this).val()==""){
+                        $("#nameTip").css("display","none");
+                    }else{
+                        $("#nameTip").css("display","inline");
+                    }
+                }else{
+                    $("#nameTip").css("display","none");
+                }    
+            })
+```
+
+***3.采用正则表达式验证表单***
+————————————————
+
+```js
+// 使用正则验证邮箱
+            $("#uemail").blur(function(){
+                var $email = $(this).val();
+                // 定义正则规则
+                var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/; 
+                // 调用方法校验
+                if(!reg.test($email)){
+                    if($email=="" || $email.length==0){
+                        $("#emailTip").css("display","none");
+                    }else{
+                        $("#emailTip").css("display","inline");
+                    }
+                }else{
+                    $("#emailTip").css("display","none");
+                } 
+            })
+```
+
+### 7 对象访问
+
+```js
+$.trim(对象) 　　//去除字符串两端的空格
+$.map(data,(item)=>{})
+
+$.each(对象) 　　//遍历一个数组或对象，for循环
+
+$.inArray(对象) //返回一个值在数组中的索引位置，不存在返回-1
+
+$.grep() 　 //返回数组中符合某种标准的元素
+
+$.extend() //将多个对象，合并到第一个对象
+
+$.makeArray() //将对象转化为数组
+
+$.type() //判断对象的类别（函数对象、日期对象、数组对象、正则对象等等
+
+$.isArray() //判断某个参数是否为数组
+
+$.isEmptyObject() //判断某个对象是否为空(不含有任何属性)
+
+$.isFunction() //判断某个参数是否为函数
+
+$.isPlainObject() //判断某个参数是否为用"{}"或"new Object"建立的对象
+
+$.support() //判断浏览器是否支持某个特性
+```
+
diff --git "a/04 \346\235\216\346\230\216\345\201\245/20231214 jQuery\344\275\234\344\270\232.md" "b/04 \346\235\216\346\230\216\345\201\245/20231214 jQuery\344\275\234\344\270\232.md"
new file mode 100644
index 0000000000000000000000000000000000000000..d71cbf17ba183c7fcea92cc9342d13f45963fc91
--- /dev/null
+++ "b/04 \346\235\216\346\230\216\345\201\245/20231214 jQuery\344\275\234\344\270\232.md"	
@@ -0,0 +1,249 @@
+### tab栏切换
+
+~~~ js
+// 1. 给 ul 添加点击事件（事件委托）
+$('ul').on('click','a',function(){
+    // 先删除 li里的 active
+    $('a.active').removeClass('active')
+    // 自己添加 active 类
+    $(this).addClass('active')
+
+    // 先删除 有item类 里的 active
+    $('.item.active').removeClass('active') 
+    // 获取当前点击的 a 的索引
+    const id = $('a').index($(this))
+    // 根据 id 指定某个div添加 active 类
+    $(`.item:eq(${id})`).addClass('active')
+})
+~~~
+
+### 轮播图
+
+~~~ js
+// 定义起始值
+let i = 0
+// 1. 给 > 按钮 添加点击事件
+$('.next').bind('click', () => {
+    // 判断 i 是否大于数组长度
+    i = i >= sliderData.length - 1 ? 0 : i + 1
+    // 调用切换函数
+    toggleData()
+})
+
+// 2. 给 < 按钮添加点击事件
+$('.prev').bind('click', () => {
+    // 判断 i 是否大于数组长度
+    i = i <= 0 ? sliderData.length - 1 : i - 1
+    // 调用切换函数
+    toggleData()
+})
+
+// 3. 添加定时器
+let time = setInterval(() => {
+    $('.next').click()
+}, 1000)
+
+// 4. 添加 鼠标经过、移出事件
+$('.slider-wrapper,.slider-footer').bind({
+    'mouseover': () => {
+        // console.log(111);
+        // 暂停定时器
+        clearInterval(time)
+    },
+    'mouseout': () => {
+        // console.log(222);
+        // 开启定时器
+        time = setInterval(() => {
+            $('.next').click()
+        }, 1000)
+    }
+})
+
+// 分装一个切换（图片、标题、背景颜色、小圆点）的类
+function toggleData() {
+    // 切换图片
+    $('.slider-wrapper img').attr('src', sliderData[i].url)
+    // 切换标题
+    $('.slider-footer p').html(sliderData[i].title)
+    // 切换标题背景颜色
+    $('.slider-footer').css('background', sliderData[i].color)
+    // 切换小圆点
+    // 先删除 active 类
+    $('.slider-indicator li.active').removeClass('active')
+    // 自己添加 active 类
+    $(`.slider-indicator li:eq(${i})`).addClass('active')
+}
+~~~
+
+### 图书管理系统
+
+~~~ js
+/**
+  *  目标一： 获取接口数据并渲染
+  *  1.1 定义自己的外号
+  *  1.2 通过自己的外号，发送异步请求，获取数据
+  *  1.3 将获取的数据渲染
+ */
+
+// 1.1 定义自己的外号
+const creator = '墨下皆是心酸'
+
+// 因为，添加、删除、编辑后都要渲染一遍，所有分装一个渲染函数
+function getBooksList() {
+    // 1.2 通过自己的外号，发送异步请求，获取数据
+    $.ajax({
+        url: 'https://hmajax.itheima.net/api/books',
+        data: {
+            creator
+        },
+        success: (result) => {
+            const data = result.data
+            // 将获取的数据渲染到页面上
+            const htmlStr = $.map(data, (item, index) => {
+                // 解构数据
+                const { id, bookname, author, publisher } = item
+                return `
+                    <tr>
+                        <td>${index + 1}</td>
+                        <td>${bookname}</td>
+                        <td>${author}</td>
+                        <td>${publisher}</td>
+                        <td data-id =${id}>
+                            <span class="del">删除</span>
+                            <span class="edit">编辑</span>
+                        </td>
+                    </tr>
+                `
+            }).join('')
+            $('tbody').html(htmlStr)
+        }
+    })
+}
+getBooksList()
+
+
+/**
+ *  目标二：添加图书
+ *  2.1 获取添加弹框d对象
+ *  2.2 给保存按钮添加点击事件，收集表单信息，隐藏弹框
+ *  2.3 通过获取的表单内容，发送异步请求
+ *  2.4 清空表单，刷新图书列表
+*/
+
+// 2.1 获取 添加弹框 对象
+const addModal = new bootstrap.Modal($('.add-modal'))
+
+// 2.2 给保存按钮添加点击事件，收集表单信息，隐藏弹框
+$('.add-btn').bind('click', () => {
+    // 获取 添加弹框 中的表单对象
+    const addForm = $('.add-form')[0]
+    // 使用表单插件，获取表单信息
+    const objBook = serialize(addForm, { hash: true, empty: true })
+    console.log(objBook);
+    // 2.3 通过获取的表单内容，发送异步请求
+    $.ajax({
+        url: 'https://hmajax.itheima.net/api/books',
+        type: 'post',
+        data: {
+            ...objBook,
+            creator
+        },
+        success: () => {
+            // 2.4 清空表单，刷新图书列表
+            // console.log(result);
+            // 刷新图书列表
+            getBooksList()
+            // 隐藏 添加弹框
+            addModal.hide()
+            // 清空表单
+            addForm.reset()
+        }
+    })
+})
+
+
+/**
+ *  目标三：删除图书
+ *  3.1 给 tbody 添加点击事件（事件委托）
+ *  3.2 通过自定义属性，向接口发送异步请求，删除图书
+ *  3.3 刷新图书列表
+ */
+
+$('tbody').on('click', '.del', function () {
+    // 是否删除弹框（提高数据安全性）
+    if (confirm('你确定要删除吗？')) {
+        // 获得父级身上的自定义属性
+        const id = $(this).parent().data('id')
+        // console.log(id);
+        // 3.2 通过自定义属性，向接口发送异步请求，删除图书
+        $.ajax({
+            url: `https://hmajax.itheima.net/api/books/${id}`,
+            type: 'delete',
+            success: () => {
+                // 3.3 刷新图书列表
+                getBooksList()
+            }
+        })
+    }
+})
+
+
+/**
+ *  目标四：修改图书
+ *  4.1 给 tbody 添加点击事件（事件委托），显示弹框
+ *  4.2 通过 id 发送异步请求，获取当前图书的信息，回显在表单上
+ *  4.3 点击 修改 将修改后的数据提交给异步请求，隐藏弹框，刷新表单页面
+ */
+
+
+// 获取 编辑弹框对象
+const editModal = new bootstrap.Modal($('.edit-modal'))
+// 4.1 给 tbody 添加点击事件（事件委托），显示弹框
+$('tbody').on('click', '.edit', function () {
+    // 获得父级身上的自定义属性
+    const id = $(this).parent().data('id')
+    // 4.2 通过 id 发送异步请求，获取当前图书的信息，回显在表单上
+    $.ajax({
+        url: `https://hmajax.itheima.net/api/books/${id}`,
+        success: result => {
+            // 因为，获取到的数据的 key 名刚好是每个表单的 类名
+            // 所以，可以先获取响应数据中的所有 key，遍历回显
+            const bookInfo = result.data
+            // console.log(bookInfo);
+            const keys = Object.keys(bookInfo)
+            // console.log(keys);
+            keys.forEach(key => {
+                document.querySelector(`.edit-form .${key}`).value = bookInfo[key]
+            })
+            // 显示弹框
+            editModal.show()
+        }
+    })
+})
+
+
+// 获取编辑弹框中的表单对象
+const editForm = $('.edit-form')[0]
+// 4.3 点击 修改 将修改后的数据提交给异步请求，隐藏弹框，刷新表单页面
+$('.edit-btn').bind('click', () => {
+    // 使用插件获取表单信息,并解构
+    const objBook = serialize(editForm, { hash: true, empty: true })
+    // console.log(objBook);
+    // 将修改后的数据提交给异步请求
+    $.ajax({
+        url: `https://hmajax.itheima.net/api/books/${objBook.id}`,
+        type: 'put',
+        data: {
+            ...objBook,
+            creator
+        },
+        success: result => {
+            // 隐藏弹框
+            editModal.hide()
+            // 刷新图书列表
+            getBooksList()
+        }
+    })
+})
+~~~
+