diff --git "a/33\351\227\253\347\273\247\345\221\250/20231213jQuery\345\233\276\344\271\246\347\256\241\347\220\206.md" "b/33\351\227\253\347\273\247\345\221\250/20231213jQuery\345\233\276\344\271\246\347\256\241\347\220\206.md"
new file mode 100644
index 0000000000000000000000000000000000000000..a24e65494241d8749e3f26582f23e42204f385fe
--- /dev/null
+++ "b/33\351\227\253\347\273\247\345\221\250/20231213jQuery\345\233\276\344\271\246\347\256\241\347\220\206.md"
@@ -0,0 +1,163 @@
+ * ```js
+ /**
+
+ * 目标1：渲染图书列表
+ * 1.1 获取数据
+ * 1.2 渲染数据
+ */
+ const creator = '阿念ee'
+ // 封装 获取并渲染图书列表函数
+ function booksList() {
+ // 获取数据
+ $.ajax({
+ url: 'http://hmajax.itheima.net/api/books',
+ params: {
+ // 获取外号的对应数据
+ creator
+ }
+ }).then(result => {
+ // console.log(result)
+ const bookList = result.data.data
+ // console.log(bookList);
+ // 渲染数据
+ $('.list').html($.map(list, (ele, i) => {
+ const { author, bookname, id, publisher } = ele
+ return `
+ | ${i + 1} |
+ ${bookname} |
+ ${author} |
+ ${publisher} |
+
+ 删除
+ 编辑
+ |
+
`
+ }).join('')
+ )
+ })
+ }
+ // 渲染列表，加载网页数据
+ booksList()
+
+ /**
+
+ * 目标2：新增图书
+
+ * 2.1 新增弹框->显示和隐藏
+
+ * 2.2 收集表单数据，并提交到服务器保存
+
+ * 2.3 刷新图书列表
+ */
+ // 2.1 创建弹框对象
+ const addModalDom = document.querySelector('.add-modal')
+ const addModal = new bootstrap.Modal(addModalDom)
+ // 保存按钮->点击->隐藏弹窗
+ $('.add-btn').click(() => {
+ // 2.2 收集表单数据，并提交到服务器保存
+ const addForm = $('.add_form')
+ const bookObj = serialize(addForm, { hash: true, empty: true })
+ // console.log(bookObj);
+ // 提交到服务器
+ $.ajax({
+ url: 'http://hmajax.itheima.net/api/books',
+ method: 'POST',
+ data: {
+ ...bookObj,
+ creator
+ }
+ }).then(result => {
+ // console.log(result);
+ addForm.reset()
+ addModal.hide()
+ booksList()
+ })
+ })
+ /**
+
+ * 目标3：删除图书
+
+ * 3.1 删除元素绑定点击事件->获取图书id
+
+ * 3.2 调用删除接口
+
+ * 3.3 刷新图书列表
+ */
+ // 3.1 删除元素->点击（事件委托）
+ $('.list').click(e => {
+ // 获取触发事件目标元素
+ // 判断点击的是删除元素
+ if(e.target.classList.contains('del')){
+ const theId = e.target.parentNode.dataset.id
+ // 3.2 调用删除接口
+ axios({
+ url: `http://hmajax.itheima.net/api/books/${theId}`,
+ method: 'DELETE'
+ }).then(() => {
+ booksList()
+ })
+ }
+ })
+ /**
+
+ * 目标4：编辑图书
+
+ * 4.1 编辑弹框->显示和隐藏
+
+ * 4.2 获取当前编辑图书数据->回显到编辑表单中
+
+ * 4.3 提交保存修改，并刷新列表
+ */
+ // 4.1 编辑弹框->显示和隐藏
+ const editDom = document.querySelector('.edit-modal')
+ const editModal = new bootstrap.Modal(editDom)
+ // 编辑元素->点击->弹框显示
+ $('.list').click(e => {
+ // 判断点击的是否为编辑元素
+ if (e.target.classList.contains('edit')) {
+ // 4.2 获取当前编辑图书数据->回显到编辑表单中
+ const theId = e.target.parentNode.dataset.id
+ $ajax({
+ url: `http://hmajax.itheima.net/api/books/${theId}`
+ }).then(result => {
+ const bookObj = result.data.data
+ // 数据对象“属性”和标签“类名”一致
+ // 遍历数据对象，使用属性去获取对应的标签，快速赋值
+ const keys = Object.keys(bookObj) // ['id', 'bookname', 'author', 'publisher']
+ keys.forEach(key => {
+ document.querySelector(`.edit-form .${key}`).value = bookObj[key]
+ })
+ })
+ editModal.show()
+ }
+ })
+ // 修改按钮->点击->隐藏弹框
+ document.querySelector('.edit-btn').addEventListener('click', () => {
+ // 4.3 提交保存修改，并刷新列表
+ const editForm = document.querySelector('.edit-form')
+ $('.edit-form [name="id"]')[0].value = id
+ $('.edit-form [name="bookname"]')[0].value = bookname
+ $('.edit-form [name="author"]')[0].value = author
+ $('.edit-form [name="publisher"]')[0].value = publisher
+ // 保存正在编辑的图书id，隐藏起来：无需让用户修改
+ //
+ $ajax({
+ url: `http://hmajax.itheima.net/api/books/${id}`,
+ method: 'PUT',
+ data: {
+ bookname,
+ author,
+ publisher,
+ creator
+ }
+ }).then(() => {
+ // 修改成功以后，重新获取并刷新列表
+ getBooksList()
+
+ // 隐藏弹框
+ editModal.hide()
+ })
+ })
+ ```
+
+
\ No newline at end of file