diff --git "a/53 \345\221\250\345\216\232\350\276\260/2023-12-05 \347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\344\275\234\344\270\232 \346\234\272\345\231\250\344\272\272\350\201\212\345\244\251.md" "b/53 \345\221\250\345\216\232\350\276\260/2023-12-07 \347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\344\275\234\344\270\232 \346\234\272\345\231\250\344\272\272\350\201\212\345\244\251.md"
similarity index 100%
rename from "53 \345\221\250\345\216\232\350\276\260/2023-12-05 \347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\344\275\234\344\270\232 \346\234\272\345\231\250\344\272\272\350\201\212\345\244\251.md"
rename to "53 \345\221\250\345\216\232\350\276\260/2023-12-07 \347\254\254\344\272\214\345\215\201\344\270\200\346\254\241\344\275\234\344\270\232 \346\234\272\345\231\250\344\272\272\350\201\212\345\244\251.md"
diff --git "a/53 \345\221\250\345\216\232\350\276\260/2023-12-11 \347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\344\275\234\344\270\232 Library Manage.md" "b/53 \345\221\250\345\216\232\350\276\260/2023-12-11 \347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\344\275\234\344\270\232 Library Manage.md"
new file mode 100644
index 0000000000000000000000000000000000000000..ddb5c5df41c6fe0fedd2ba2b47a937f83c0e78f7
--- /dev/null
+++ "b/53 \345\221\250\345\216\232\350\276\260/2023-12-11 \347\254\254\344\272\214\345\215\201\344\272\214\346\254\241\344\275\234\344\270\232 Library Manage.md"
@@ -0,0 +1,125 @@
+2023年12月11日
+
+# 第二十二次作业 Library Manage
+
+
+```js
+ // 定义变量
+ let tbody = document.querySelector("body > div.container > table > tbody"); // 获取页面中的table的tbody元素
+ let addModal = document.querySelector("body > div.modal.fade.add-modal"); // 获取页面中的添加模态框
+ let editModal = document.querySelector("body > div.modal.fade.edit-modal"); // 获取页面中的编辑模态框
+tbody.innerHTML = ''; // 清空tbody元素的内容
+
+// 渲染函数
+function render() {
+ // 发送请求获取书籍数据
+ axios({
+ url: 'https://hmajax.itheima.net/api/books', // 请求地址
+ params: {
+ creator: 'zhc' // 请求参数
+ }
+ }).then(res => {
+ tbody.innerHTML = ''; // 清空tbody元素的内容
+ res.data.data.forEach((item, i) => { // 遍历返回的书籍数据
+ let {id, bookname, author, publisher} = item; // 解构赋值
+ let tr = document.createElement(`tr`); // 创建一个tr元素
+ tr.innerHTML = `
+ | ${i + 1} |
+ ${bookname} |
+ ${author} |
+ ${publisher} |
+
+ 删除
+ 编辑
+ |
+ `; // 设置td元素的内容
+
+ tbody.appendChild(tr); // 将tr元素添加到tbody中
+ })
+ }).catch(err => {
+ // console.log(err);
+ })
+}
+
+render(); // 调用渲染函数
+
+// 添加书籍函数
+function addBook() {
+ let addform = addModal.querySelector('.modal-body.form-wrap .add-form'); // 获取添加模态框中的表单元素
+ let inputs = serialize(addform, {hash: true, empty: true}); // 序列化表单的输入值
+ if (inputs.bookname.trim() === '' || inputs.author.trim() === '' || inputs.publisher.trim() === '') {
+ return alert('请填写完整'); // 如果有空项，则弹出提示框
+ } else {
+ axios({
+ url: 'https://hmajax.itheima.net/api/books', // 请求地址
+ method: 'post', // 请求方法为post
+ data: {
+ creator: 'zhc', // 请求参数
+ ...inputs // 将序列化后的表单值传递给请求数据
+ }
+ }).then(res => {
+ // console.log(res);
+ bootstrap.Modal.getOrCreateInstance(addModal).hide(); // 隐藏添加模态框
+
+ addform.reset(); // 清空表单数据
+ render(); // 重新渲染数据
+ }).catch(err => {
+ // console.log(err);
+ })
+ }
+}
+
+addModal.querySelector('.btn.btn-primary.add-btn').onclick = function () { // 给添加按钮添加点击事件
+ addBook(); // 调用添加书籍函数
+}
+
+tbody.addEventListener('click', e => { // 给tbody元素添加点击事件
+ if (e.target.className === 'del') { // 如果点击的目标元素的类名为del
+ if (confirm('确定要删除吗？')) { // 如果确认删除
+ let id = e.target.parentNode.dataset.id; // 获取删除按钮所在的行的id值
+ // console.log(id);
+ axios({
+ url: `https://hmajax.itheima.net/api/books/${id}`, // 请求地址，拼接书籍id
+ method: 'delete' // 请求方法为delete
+ }).then(res => {
+ // console.log(res);
+ render(); // 重新渲染数据
+ }).catch(err => {
+ // console.log(err);
+ })
+ }
+ }
+ if (e.target.className === 'edit') { // 如果点击的目标元素的类名为edit
+ let id = e.target.parentNode.dataset.id; // 获取编辑按钮所在的行的id值
+ let inputs = editModal.querySelector('.edit-form'); // 获取编辑模态框中的表单元素
+ axios({
+ url: `https://hmajax.itheima.net/api/books/${id}`, // 请求地址，拼接书籍id
+ method: 'get' // 请求方法为get
+ }).then(res => {
+ let {id, bookname, author, publisher} = res.data.data; // 获取书籍信息
+ inputs.querySelector('.id').value = id; // 设置表单的id值
+ inputs.querySelector('.bookname').value = bookname; // 设置表单的bookname值
+ inputs.querySelector('.author').value = author; // 设置表单的author值
+ inputs.querySelector('.publisher').value = publisher; // 设置表单的publisher值
+ }).catch(err => {
+ // console.log(err);
+ })
+ bootstrap.Modal.getOrCreateInstance(editModal).show(); // 显示编辑模态框
+ editModal.querySelector('.btn.btn-primary.edit-btn').onclick = function () { // 给编辑按钮添加点击事件
+ let editform = editModal.querySelector('.edit-form'); // 获取编辑模态框中的表单元素
+ let data = serialize(editform, {hash: true, empty: true}); // 序列化表单的输入值
+ axios({
+ url: `https://hmajax.itheima.net/api/books/${id}`, // 请求地址，拼接书籍id
+ method: 'put', // 请求方法为put，更新数据
+ data
+ }).then(res => {
+ // console.log(res);
+ bootstrap.Modal.getOrCreateInstance(editModal).hide(); // 隐藏编辑模态框
+ render(); // 重新渲染数据
+ }).catch(err => {
+ // console.log(err);
+ })
+ }
+ }
+})
+```
diff --git a/README.md b/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..b4d3e9378ff8079d1cdefda4ff7387fe3cc790b0
--- /dev/null
+++ b/README.md
@@ -0,0 +1,9 @@
+# JavaScript基础课程
+
+---
+
+## 学习JavaScript的方法
+1、上课认真听课，笔记可以不全部记，只记自己不懂的知识和重点知识；
+2、了解并学习自然拼读法，提高英语词汇以便提高代码可记力；
+3、课后作业必须独立完成，作业是是测验对当天知识理解；
+4、定时复习之前的代码与知识，因为人不可能过目不忘，可根据艾宾浩斯遗忘曲线复习。
\ No newline at end of file