From 4dee97f364a6cd832685d5121c0b73b64da92af1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=98=E6=96=87=E8=AF=9A?= <3287861587@qq.com>
Date: Wed, 13 Dec 2023 12:06:29 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20231213 jQuery .md"                      | 184 ++++++++++++++++++
 1 file changed, 184 insertions(+)
 create mode 100644 "08 \345\256\230\346\226\207\350\257\232/20231213 jQuery .md"
diff --git "a/08 \345\256\230\346\226\207\350\257\232/20231213 jQuery .md" "b/08 \345\256\230\346\226\207\350\257\232/20231213 jQuery .md"
new file mode 100644
index 0000000..e45e876
--- /dev/null
+++ "b/08 \345\256\230\346\226\207\350\257\232/20231213 jQuery .md"	
@@ -0,0 +1,184 @@
+###  笔记
+
+**jQuery 库可以通过一行简单的标记被添加到网页中。**
+
+## jQuery 库 - 特性
+
+jQuery 是一个 JavaScript 函数库。
+
+jQuery 库包含以下特性：
+
+- HTML 元素选取
+- HTML 元素操作
+- CSS 操作
+- HTML 事件函数
+- JavaScript 特效和动画
+- HTML DOM 遍历和修改
+- AJAX
+- Utilities
+
+## 向您的页面添加 jQuery 库
+
+jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。
+
+可以通过下面的标记把 jQuery 添加到网页中：
+
+```
+<head>
+<script type="text/javascript" src="jquery.js"></script>
+</head>
+```
+
+请注意，<script> 标签应该位于页面的
+
+部分。
+
+## jQuery 语法实例
+
+- [$(this).hide()](https://gitee.com/link?target=https%3A%2F%2Fwww.w3school.com.cn%2Ftiy%2Ft.asp%3Ff%3Djquery_hide_this)
+
+  演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
+
+- [$("#test").hide()](https://gitee.com/link?target=https%3A%2F%2Fwww.w3school.com.cn%2Ftiy%2Ft.asp%3Ff%3Djquery_hide_id)
+
+  演示 jQuery hide() 函数，隐藏 id="test" 的元素。
+
+- [$("p").hide()](https://gitee.com/link?target=https%3A%2F%2Fwww.w3school.com.cn%2Ftiy%2Ft.asp%3Ff%3Djquery_hide_p)
+
+  演示 jQuery hide() 函数，隐藏所有
+
+  元素。
+
+- [$(".test").hide()](https://gitee.com/link?target=https%3A%2F%2Fwww.w3school.com.cn%2Ftiy%2Ft.asp%3Ff%3Djquery_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" 的元素
+
+#### 练习
+
+~~~ js
+// 1. 定义myAxios函数，接收配置对象，返回Promise对象
+function myAxios(config) {
+  return new Promise((resolve, reject) => {
+    // 2. 发起XHR请求，默认请求方法为GET
+    const xhr = new XMLHttpRequest()
+    xhr.open(config.method || 'GET', config.url)
+    xhr.addEventListener('loadend', () => {
+      // 3. 调用成功/失败的处理程序
+      if (xhr.status >= 200 && xhr.status < 300) {
+        resolve(JSON.parse(xhr.response))
+      } else {
+        reject(new Error(xhr.response))
+      }
+    })
+    xhr.send()
+  })
+}
+
+// 4. 使用myAxios函数，获取省份列表展示
+myAxios({
+  url: 'http://hmajax.itheima.net/api/province'
+}).then(result => {
+  console.log(result)
+  document.querySelector('.my-p').innerHTML = result.list.join('<br>')
+}).catch(error => {
+  console.log(error)
+  document.querySelector('.my-p').innerHTML = error.message
+})
+```
+~~~
+
+
+
+### 作业
+
+在html文件里的head中加入
+
+```
+ /**
+ * 目标1：渲染图书列表
+ *  1.1 获取数据
+ *  1.2 渲染数据
+ */
+// const tbody = document.querySelector('.list');
+// 通用的外号
+const creator = 'DD';
+// 封装一个先获取数据，再渲染数据的函数
+function render() {
+    axios({
+        url: 'https://hmajax.itheima.net/api/books',
+        params: {
+            creator: creator
+        }
+    }).then(result => {
+        // console.log(result);
+        const bookList = result.data.data;
+        const trHtml = bookList.map((item, i) => {
+            const { id, author, bookname, publisher } = item
+            return `
+   <tr>
+   <td>${i + 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('')
+        // console.log(trHtml);
+        tbody.innerHTML = trHtml;
+    })
+}
+// 打开网页就得先调用一次函数
+render();
+// 实现添加事件
+const form = $('.add-form');
+// 为了控制添加的弹窗，先获取
+const addModalBox = $('.add-modal');
+const addModal = new bootstrap.Modal(addModalBox);
+// 给保存添加点击事件
+$('.add-btn')[0].addEventListener('click', () => {
+    // 采集数据
+    const book = serialize(form, { hash: true, empty: true })
+    console.log(book);
+    // 将数据用axios调用接口，提交给服务器
+    axios({
+        url: 'https://hmajax.itheima.net/api/books',
+        method: 'post',
+        data: {
+            creator,
+            ...book
+        }
+    }).then(result => {
+        // console.log(result);
+        // 清空表单
+        form.reset();
+        // 关闭弹窗
+        addModal.hide();
+        // 重新获取列表并渲染
+        render();
+    })
+
+})
\ No newline at end of file
-- 
Gitee


From 34173cacea986bbc50296b53a4ae13a327f5a0e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=98=E6=96=87=E8=AF=9A?= <3287861587@qq.com>
Date: Wed, 13 Dec 2023 13:25:57 +0800
Subject: [PATCH 2/2] zuoey

---
 .../20231213 jQuery .md"                      | 71 -------------------
 1 file changed, 71 deletions(-)

diff --git "a/08 \345\256\230\346\226\207\350\257\232/20231213 jQuery .md" "b/08 \345\256\230\346\226\207\350\257\232/20231213 jQuery .md"
index e45e876..0951ddd 100644
--- "a/08 \345\256\230\346\226\207\350\257\232/20231213 jQuery .md"	
+++ "b/08 \345\256\230\346\226\207\350\257\232/20231213 jQuery .md"	
@@ -109,76 +109,5 @@ myAxios({
 
 
 
-### 作业
 
-在html文件里的head中加入
 
-```
- /**
- * 目标1：渲染图书列表
- *  1.1 获取数据
- *  1.2 渲染数据
- */
-// const tbody = document.querySelector('.list');
-// 通用的外号
-const creator = 'DD';
-// 封装一个先获取数据，再渲染数据的函数
-function render() {
-    axios({
-        url: 'https://hmajax.itheima.net/api/books',
-        params: {
-            creator: creator
-        }
-    }).then(result => {
-        // console.log(result);
-        const bookList = result.data.data;
-        const trHtml = bookList.map((item, i) => {
-            const { id, author, bookname, publisher } = item
-            return `
-   <tr>
-   <td>${i + 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('')
-        // console.log(trHtml);
-        tbody.innerHTML = trHtml;
-    })
-}
-// 打开网页就得先调用一次函数
-render();
-// 实现添加事件
-const form = $('.add-form');
-// 为了控制添加的弹窗，先获取
-const addModalBox = $('.add-modal');
-const addModal = new bootstrap.Modal(addModalBox);
-// 给保存添加点击事件
-$('.add-btn')[0].addEventListener('click', () => {
-    // 采集数据
-    const book = serialize(form, { hash: true, empty: true })
-    console.log(book);
-    // 将数据用axios调用接口，提交给服务器
-    axios({
-        url: 'https://hmajax.itheima.net/api/books',
-        method: 'post',
-        data: {
-            creator,
-            ...book
-        }
-    }).then(result => {
-        // console.log(result);
-        // 清空表单
-        form.reset();
-        // 关闭弹窗
-        addModal.hide();
-        // 重新获取列表并渲染
-        render();
-    })
-
-})
\ No newline at end of file
-- 
Gitee

