diff --git "a/21 \345\215\242\344\272\250\350\200\200/jQuery\344\275\234\344\270\232.md" "b/21 \345\215\242\344\272\250\350\200\200/jQuery\344\275\234\344\270\232.md"
new file mode 100644
index 0000000000000000000000000000000000000000..e705637409a6d48bede539266c383869a88b30fc
--- /dev/null
+++ "b/21 \345\215\242\344\272\250\350\200\200/jQuery\344\275\234\344\270\232.md"	
@@ -0,0 +1,248 @@
+### 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()
+        }
+    })
+})
+~~~
\ No newline at end of file
diff --git "a/21 \345\215\242\344\272\250\350\200\200/jQuery\351\242\204\344\271\240.md" "b/21 \345\215\242\344\272\250\350\200\200/jQuery\351\242\204\344\271\240.md"
new file mode 100644
index 0000000000000000000000000000000000000000..ea98903eddc7e8153258ce7b8d3117eea63aa25b
--- /dev/null
+++ "b/21 \345\215\242\344\272\250\350\200\200/jQuery\351\242\204\344\271\240.md"	
@@ -0,0 +1,232 @@
+## jQuery 
+
+jQuery 是一个JavaScript库
+
+jQuery极大简化JavaScript编程
+
+### jQuery 库特性
+
+jQuery 是一个 JavaScript 函数库。
+
+jQuery 库包含以下特性：
+
+- HTML 元素选取
+- HTML 元素操作
+- CSS 操作
+- HTML 事件函数
+- JavaScript 特效和动画
+- HTML DOM 遍历和修改
+- AJAX
+- Utilities
+
+### 添加 jQuery库
+
+jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。
+
+可以通过下面的标记把 jQuery 添加到网页中：
+
+~~~html
+<head>
+<script type="text/javascript" src="jquery.js"></script>
+</head>
+~~~
+
+请注意，<script> 标签应该位于页面的 <head> 部分。
+
+## 库的替代
+
+Google 和 Microsoft 对 jQuery 的支持都很好。
+
+如果您不愿意在自己的计算机上存放 jQuery 库，那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。
+
+### 使用 Google 的 CDN
+
+```html
+<head>
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
+/jquery/1.4.0/jquery.min.js"></script>
+</head>
+```
+
+### 使用 Microsoft 的 CDN
+
+```html
+<head>
+<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
+/jquery-1.4.min.js"></script>
+</head>
+```
+
+### 使用百度的CDN
+
+<head>
+<script type="text/javascript" src="<head>
+<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
+/jquery-1.4.min.js"></script>
+</head>"></script>
+</head>
+
+## jQuery 语法实例
+
+- [$(this).hide()](https://www.w3school.com.cn/tiy/t.asp?f=jquery_hide_this)
+
+  演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
+
+- [$("#test").hide()](https://www.w3school.com.cn/tiy/t.asp?f=jquery_hide_id)
+
+  演示 jQuery hide() 函数，隐藏 id="test" 的元素。
+
+- [$("p").hide()](https://www.w3school.com.cn/tiy/t.asp?f=jquery_hide_p)
+
+  演示 jQuery hide() 函数，隐藏所有 <p> 元素。
+
+- [$(".test").hide()](https://www.w3school.com.cn/tiy/t.asp?f=jquery_hide_class)
+
+  演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。
+
+## jQuery 语法
+
+jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
+
+基础语法是：*$(selector).action()*
+
+- 美元符号定义 jQuery
+- 选择符（selector）“查询”和“查找” HTML 元素
+- jQuery 的 action() 执行对元素的操作
+
+### 示例
+
+$(this).hide() - 隐藏当前元素
+
+$("p").hide() - 隐藏所有段落
+
+$(".test").hide() - 隐藏所有 class="test" 的所有元素
+
+$("#test").hide() - 隐藏所有 id="test" 的元素
+
+**提示：**jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。
+
+关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。
+
+jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。
+
+选择器允许您对 HTML 元素组或单个元素进行操作。
+
+在 HTML DOM 术语中：
+
+选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。
+
+## jQuery 元素选择器
+
+jQuery 使用 CSS 选择器来选取 HTML 元素。
+
+$("p") 选取 <p> 元素。
+
+$("p.intro") 选取所有 class="intro" 的 <p> 元素。
+
+$("p#demo") 选取所有 id="demo" 的 <p> 元素。
+
+## jQuery 事件函数
+
+jQuery 事件处理方法是 jQuery 中的核心函数。
+
+事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。
+
+通常会把 jQuery 代码放到 <head>部分的事件处理方法中：
+
+### 实例
+
+```html
+<html>
+<head>
+<script type="text/javascript" src="jquery.js"></script>
+<script type="text/javascript">
+    $(document).ready(function(){
+      $("button").click(function(){
+        $("p").hide();
+      });
+    });
+</script>
+</head>
+
+<body>
+    <h2>This is a heading</h2>
+    <p>This is a paragraph.</p>
+    <p>This is another paragraph.</p>
+    <button>Click me</button>
+</body>
+
+</html>
+```
+
+## 单独文件中的函数
+
+如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。
+
+当我们在教程中演示 jQuery 时，会将函数直接添加到 <head> 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：
+
+### 实例
+
+```html
+<head>
+<script type="text/javascript" src="jquery.js"></script>
+<script type="text/javascript" src="my_jquery_functions.js"></script>
+</head>
+```
+
+## jQuery 名称冲突
+
+jQuery 使用 $ 符号作为 jQuery 的简介方式。
+
+某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。
+
+jQuery 使用名为 noConflict() 的方法来解决该问题。
+
+*var jq=jQuery.noConflict()*，帮助您使用自己的名称（比如 jq）来代替 $ 符号。
+
+## axios 封装
+
+~~~html
+<script>
+    // 分装一个 axios 函数，接收一个对象
+    function myaxios(config) {
+        // 1. 返回 promise 对象
+        return new Promise((resolve, reject) => {
+            // 2. 创建 XHR 对象
+            const xhr = new XMLHttpRequest()
+            // 3 调用 open 方法，规定请求格式，URL地址
+            xhr.open(config.method || 'get', config.url)
+            // 4. 添加 loadend 事件
+            xhr.addEventListener('loadend', () => {
+                // console.log(xhr);
+                // 5. 判断 XHR 是否请求成功(通过状态码)
+                if (xhr.status >= 200 && xhr.status < 300) {
+                    // 告诉外面请求成功了，使用 resolve 传入响应的结果
+                    resolve(JSON.parse(xhr.response))
+                } else {
+                    // 告诉外面请求失败了，使用 erject 传入失败信息
+                    reject(new Error(xhr.response))
+                }
+            })
+            // 6. 设置请求头，告诉服务器内容类型（JSON字符串）
+            xhr.setRequestHeader('Content-Type', 'application/json')
+            // 7. 提交请求
+            xhr.send(JSON.stringify(config.data))
+        })
+    }
+
+    // 8. 调用自己分装的 axios 函数
+    myaxios({
+        url: 'https://hmajax.itheima.net/api/register',
+        method: 'post',
+        data: {
+            username: '觉得时间da都浪',
+            password: '123456'
+        }
+    }).then(result => {
+        console.log(result);
+    }).catch(error => {
+        console.log(error);
+    })
+</script>
+~~~
\ No newline at end of file