diff --git "a/49 \346\235\216\350\210\222\346\261\266/12.12jquery\345\233\276\344\271\246\347\256\241\347\220\206\347\263\273\347\273\237.md" "b/49 \346\235\216\350\210\222\346\261\266/12.12jquery\345\233\276\344\271\246\347\256\241\347\220\206\347\263\273\347\273\237.md"
new file mode 100644
index 0000000000000000000000000000000000000000..d79e8347ac27f1d67c5848cff283b4584040d480
--- /dev/null
+++ "b/49 \346\235\216\350\210\222\346\261\266/12.12jquery\345\233\276\344\271\246\347\256\241\347\220\206\347\263\273\347\273\237.md"
@@ -0,0 +1,348 @@
+### 笔记
+
+**jQuery 库可以通过一行简单的标记被添加到网页中。**
+
+## jQuery 库 - 特性
+
+jQuery 是一个 JavaScript 函数库。
+
+jQuery 库包含以下特性：
+
+- HTML 元素选取
+- HTML 元素操作
+- CSS 操作
+- HTML 事件函数
+- JavaScript 特效和动画
+- HTML DOM 遍历和修改
+- AJAX
+- Utilities
+
+## 向您的页面添加 jQuery 库
+
+jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。
+
+可以通过下面的标记把 jQuery 添加到网页中：
+
+```
+
+
+
+```
+
+请注意，
+```
+
+
+
+```js
+/**
+ * 目标1：图书列表
+ * 1.获取数据
+ * 2.渲染表格**/
+
+//获取公用对象
+// const tbody = document.querySelector('.list');
+
+//设置一个名字来接受数据,当你再次使用，记得改变名字，因为接口会记录名字
+const creator = '泰格瑞瑞123456';
+
+//创建一个渲染函数
+function getBook(){
+ //1.获取数据
+ axios({
+ url:'https://hmajax.itheima.net/api/books',
+ params:{
+ creator
+ }
+ }).then(result => {
+ // console.log(result);//打印result
+ //找到这个接口的数据
+ const bookList = result.data.data;
+ //将数据以接口里的数据以什么样的方式渲染出来
+ const listStr = bookList.map((item,i) => {
+ //查看是否获得数据，并查看数据是否正确
+ //console.log(item);
+ //拆解数据，方便书写
+ const {id,author,bookname,publisher} = item ;
+ return `
+
+ | ${i + 1} |
+ ${author} |
+ ${bookname} |
+ ${publisher} |
+
+ 删除
+ 编辑
+ |
+
+ `;
+ }).join('')
+
+ //将数据显示到tbody（网页）中
+ //当你要用的时候记得想一下，你要得是什么格式
+ $('.list')[0].innerHTML = listStr
+ }).catch(error => {
+ //浅浅打印一下
+ // console.log(error);
+ })
+
+
+
+}
+
+//先调用函数，使得展示什么样的效果
+//第一次打开网页就要加载一次
+getBook();
+
+// 二、添加功能
+// 1.显示或隐藏弹窗
+// 2.保存按钮点击事件
+// 3.手机表单数据
+// 4.调用接口接收数据
+// 5.提交数据，并隐藏数据
+// 6.清空表单之前写的数据，（为了安全）
+// 7.获取新数据并渲染在网页中
+
+//创建弹窗对象
+//当class中的字段太多时，可以选择其中一个写，只要不与其他名字重合就行
+const addBox = document.querySelector('.add-modal');
+
+//增加图书的弹窗对象
+//modal对象，可以控制addBox显示或隐藏
+//bootstrap 可以下来学习一下
+const modal = new bootstrap.Modal(addBox);
+
+//获取要收集的表单对象
+// const addForm = document.querySelector('.add-form');
+
+//获取保存按钮
+// const addBtn = document.querySelector('.add-btn');
+
+//保存按钮点击事件
+$('.add-btn').click(() => {
+
+
+ //添加是否要新增的提示
+ if (!confirm('确定要新增吗？')) {
+ return //阻止往后运行
+}
+//查看上面的if是否能使用
+// console.log('你确定要新增吗');
+ //收集表单数据
+ const book = serialize($('.add-form')[0],{ hash : true , empty : true });
+ // console.log(book);
+
+ //调用接口提交数据
+ axios({
+ url:'https://hmajax.itheima.net/api/books',
+ method:'post',
+ data:{
+ ...book,
+ creator
+ }
+ }).then(result => {
+
+ // console.log(result);
+
+ //隐藏弹窗
+ modal.hide()
+
+ //清空表单里刚才填写的数据
+ $('.add-form')[0].reset()
+
+ //渲染新的数据，显示在网页中
+ getBook()
+
+ })
+})
+
+
+// 三、删除图书
+// 1.给删除点击事件
+// 2.获取图书的id（在渲染时添加的自定义属性）
+// 3.通过id调用接口，删除对应的图书
+// 4.删除后再次渲染
+
+
+//将点击委托给tbody
+$('.list').click((e) => {
+ //删除对象的两种方案
+ //className === 'del'
+ //calssList.contains('del')
+
+ if (e.target.classList.contains('del')) {
+ //删除前要确认一下是否真的要删除
+ //返回布尔值
+ if (!confirm('确定要删除吗？')) {
+ return //阻止往后运行
+ }
+ //查看上面的if是否能使用
+ console.log('你确定要删除吗');
+
+ // 获取图书的id
+ const id = e.target.parentNode.dataset.id;
+
+ //调用接口
+ axios({
+ url: `https://hmajax.itheima.net/api/books/${id}`,
+ method:'delete'
+ }).then(result => {
+
+ //删除后再次渲染
+ getBook()
+ })
+ }
+
+})
+
+
+//四、编辑图书
+// 1.显示编辑弹窗
+// 2.获取图书的id
+// 3.通过id调用接口，获取对应的图书数据，回显到表单
+// 4.修改按钮点击事件
+// 5.收集表单数据
+// 6.调用接口提交数据
+// 7.提交数据，隐藏弹窗
+// 8.编辑后再次渲染
+
+//创建弹窗当初
+const editBox = document.querySelector('.edit-modal');
+
+//添加图书的弹窗对象
+//Modal对象，可以控制editBox的显示和隐藏
+const editModal = new bootstrap.Modal(editBox);
+
+//获取要收集的表单对象
+const editForm = document.querySelector('.edit-form');
+// console.log(editForm);
+
+// 给tbody添加点击事件，点击触发编辑弹窗
+$('.list').click((e) => {
+ //判断是否按到编辑按钮
+ if (e.target.className === 'edit') {
+ //显示
+ editModal.show();
+
+ //获取图书的id
+ const id = e.target.parentNode.dataset.id;
+
+ //通过id调用接口，获取对应的图书数据，回显到表单
+ axios({
+ //拼接字符串的形式
+ url:'https://hmajax.itheima.net/api/books/'+id,
+
+ }).then(result => {
+ //打印，并查看数据
+ // console.log(result.data.data);
+
+ //获取数据（编辑的内容）
+ const book = result.data.data;
+
+ //拆解数据，便捷书写
+ const {id,author,bookname,publisher} = book
+
+ //获取编辑表单的数据，将旧的数据替换成新的数据
+ editForm.querySelector('.publisher').value = publisher;
+ editForm.querySelector('.bookname').value = bookname;
+ editForm.querySelector('.author').value = author;
+ editForm.querySelector('.id').value = id;
+ })
+ }
+ })
+
+//修改后，将数据发送到接口，并隐藏编辑弹窗
+//获取修改按钮
+ // const editBtn = document.querySelector('.edit-btn');
+ // editBtn.innerHTML = '保存'
+
+ $('.edit-btn')[0].click(() => {
+
+ //添加是否要修改的提示
+ if (!confirm('确定要修改吗？')) {
+ return //阻止往后运行
+ }
+ //查看上面的if是否能使用
+ // console.log('你确定要修改吗');
+ //收集表单数据
+ const book = serialize(editForm,{ hash : true , empty : true })
+
+ //拆解数据，便捷书写
+ const {id,author,bookname,publisher} = book ;
+ // console.log(book);
+
+ //调用接口提交数据
+ axios({
+ url:'https://hmajax.itheima.net/api/books/'+id,
+ method:'put',
+ data:{
+ ...book,
+ creator
+ }
+ }).then(result => {
+ // console.log(result);
+ //隐藏弹窗
+ editModal.hide();
+
+ //渲染
+ getBook();
+ })
+ })
+
+
+
+
+
+
+
+
+```