From bc8d045d4a8b858e140024c67923c9b6ea28f888 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A8=8A=E5=B0=8F=E9=83=AD?= <2966479092@qq.com>
Date: Thu, 28 Dec 2023 21:09:00 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AC=AC=E4=BA=8C=E5=8D=81=E4=BA=94=E6=AC=A1?=
 =?UTF-8?q?=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20231214 JS\344\270\255jQuery.md"         | 294 ++++++++++++++++++
 1 file changed, 294 insertions(+)
 create mode 100644 "47 \346\250\212\345\260\217\351\203\255/20231214 JS\344\270\255jQuery.md"

diff --git "a/47 \346\250\212\345\260\217\351\203\255/20231214 JS\344\270\255jQuery.md" "b/47 \346\250\212\345\260\217\351\203\255/20231214 JS\344\270\255jQuery.md"
new file mode 100644
index 0000000..cc040b7
--- /dev/null
+++ "b/47 \346\250\212\345\260\217\351\203\255/20231214 JS\344\270\255jQuery.md"	
@@ -0,0 +1,294 @@
+jQuery 语法实例
+$(this).hide()
+
+演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
+
+$("#test").hide()
+
+演示 jQuery hide() 函数，隐藏 id="test" 的元素。
+
+$("p").hide()
+
+演示 jQuery hide() 函数，隐藏所有
+
+元素。
+
+$(".test").hide()
+
+演示 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 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法
+
+ <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
+<script>
+/**
+ * 目标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 `
+                    <tr>
+                        <td>${i + 1}</td>
+                        <td>${author}</td>
+                        <td>${bookname}</td>
+                        <td>${publisher}</td>
+                        <td data-id=${id}>
+                          <span class="del">删除</span>
+                          <span class="edit">编辑</span>
+                        </td>
+                      </tr>
+                    `;
+        }).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();
+        })
+  })
+</script>  
\ No newline at end of file
-- 
Gitee