`元素会在显示和隐藏之间切换。这个简单的示例展示了jQuery的基本用法和强大功能。
+
diff --git "a/31 \347\216\213\347\216\211\344\272\256/20250326-jQuery\344\270\213\350\275\275.md" "b/31 \347\216\213\347\216\211\344\272\256/20250326-jQuery\344\270\213\350\275\275.md"
new file mode 100644
index 0000000..27f0918
--- /dev/null
+++ "b/31 \347\216\213\347\216\211\344\272\256/20250326-jQuery\344\270\213\350\275\275.md"
@@ -0,0 +1,257 @@
+## 一、jQuery 的下载与引入
+
+### 1. **下载 jQuery**
+
+- **官方地址**：https://jquery.com/
+- **版本选择**：
+ - **开发版**（未压缩版）：`jquery-x.x.x.js`，适合调试和阅读源码。
+ - **生产版**（压缩版）：`jquery-x.x.x.min.js`，文件更小，适合线上使用。
+
+### 2. **引入 jQuery**
+
+在 HTML 文件中通过 `
+
+
+
+```
+
+运行 HTML
+
+------
+
+## 二、jQuery 对象与 JS 对象的转换
+
+### 1. **JS 对象转 jQuery 对象**
+
+- **语法**：`$(js对象)`
+
+- **场景**：将原生 DOM 对象转换为 jQuery 对象以使用 jQuery 方法。
+
+ ```
+ // 获取原生 DOM 对象
+ const jsDiv = document.querySelector('div');
+
+ // 转换为 jQuery 对象
+ const $jQueryDiv = $(jsDiv);
+ ```
+
+### 2. **jQuery 对象转 JS 对象**
+
+- **方法 1**：通过索引获取原生对象。
+
+ ```
+const jsDiv = $jQueryDiv[0];
+ ```
+
+- **方法 2**：使用 `.get(index)` 方法。
+
+ ```
+ const jsDiv = $jQueryDiv.get(0);
+ ```
+
+------
+
+## 三、前后端 CRUD 操作步骤
+
+### 1. **前端操作流程**
+
+#### (1) 拿到数据
+
+- **示例**：从表单输入中获取数据。
+
+ ```
+const title = $('#titleInput').val(); // 获取标题
+ const content = $('#contentInput').val(); // 获取内容
+```
+
+#### (2) 向后端发起请求
+
+- **使用 `$.ajax` 或 `$.post`/`$.get`**：
+
+ ```
+ $.ajax({
+ url: '/api/blogs',
+ method: 'POST',
+ data: { title, content },
+ success: function (response) {
+ console.log('创建成功:', response);
+ },
+ error: function (error) {
+ console.error('请求失败:', error);
+ }
+ });
+ ```
+
+#### (3) 处理后端响应
+
+- **成功响应**：更新页面或提示用户。
+
+ ```
+ success: function (response) {
+ alert('数据保存成功！');
+ location.reload(); // 刷新页面
+ }
+ ```
+
+- **错误处理**：显示错误信息。
+
+ ```
+ error: function (error) {
+ alert('保存失败: ' + error.statusText);
+ }
+ ```
+
+------
+
+### 2. **后端操作流程（以 Node.js + Express 为例）**
+
+#### (1) 接收前端数据
+
+```
+app.use(express.json()); // 解析 JSON 请求体
+
+app.post('/api/blogs', (req, res) => {
+ const { title, content } = req.body; // 获取前端数据
+});
+```
+
+#### (2) 处理业务逻辑
+
+- **示例**：将数据存入数据库。
+
+ ```
+ const newBlog = new Blog({ title, content }); // 假设 Blog 是 MongoDB 模型
+ newBlog.save()
+ .then(() => {
+ res.status(201).send({ message: '数据保存成功' });
+ })
+ .catch(err => {
+ res.status(500).send({ error: '保存失败' });
+ });
+ ```
+
+#### (3) 返回响应
+
+- **成功响应**：
+
+ ```
+res.status(200).json({ data: result });
+ ```
+
+- **错误响应**：
+
+ ```
+ res.status(500).json({ error: '服务器错误' });
+ ```
+
+------
+
+## 四、CRUD 操作示例（jQuery + Express）
+
+### 1. **Create（创建）**
+
+#### 前端代码
+
+```
+$('#createBtn').click(function () {
+ const title = $('#title').val();
+ const content = $('#content').val();
+
+ $.post('/api/blogs', { title, content }, function (response) {
+ console.log('创建成功:', response);
+ });
+});
+```
+
+#### 后端代码
+
+```
+app.post('/api/blogs', async (req, res) => {
+ try {
+ const blog = await Blog.create(req.body);
+ res.send(blog);
+ } catch (err) {
+ res.status(500).send({ error: err.message });
+ }
+});
+```
+
+### 2. **Read（读取）**
+
+#### 前端代码
+
+```
+$.get('/api/blogs', function (blogs) {
+ blogs.forEach(blog => {
+ $('#blogList').append(`
${blog.title}
`);
+ });
+});
+```
+
+#### 后端代码
+
+```
+app.get('/api/blogs', async (req, res) => {
+ const blogs = await Blog.find();
+ res.send(blogs);
+});
+```
+
+### 3. **Update（更新）**
+
+#### 前端代码
+
+```
+$.ajax({
+ url: `/api/blogs/${id}`,
+ method: 'PUT',
+ data: { title: '新标题' },
+ success: function (response) {
+ console.log('更新成功:', response);
+ }
+});
+```
+
+#### 后端代码
+
+```
+app.put('/api/blogs/:id', async (req, res) => {
+ const blog = await Blog.findByIdAndUpdate(req.params.id, req.body, { new: true });
+ res.send(blog);
+});
+```
+
+### 4. **Delete（删除）**
+
+#### 前端代码
+
+```
+$.ajax({
+ url: `/api/blogs/${id}`,
+ method: 'DELETE',
+ success: function () {
+ console.log('删除成功');
+ }
+});
+```
+
+#### 后端代码
+
+```
+app.delete('/api/blogs/:id', async (req, res) => {
+ await Blog.findByIdAndDelete(req.params.id);
+ res.send({ message: '删除成功' });
+});
+```
+
+------
+
+## 五、总结
+
+- **jQuery 的核心价值**：简化 DOM 操作和 AJAX 请求。
+- **对象转换**：灵活切换 JS 对象和 jQuery 对象以兼容不同场景。
+- **前后端协作**：前端负责数据收集和展示，后端负责数据处理和存储。
\ No newline at end of file
diff --git "a/31 \347\216\213\347\216\211\344\272\256/20250327-jQuery\345\274\225\347\224\250.md" "b/31 \347\216\213\347\216\211\344\272\256/20250327-jQuery\345\274\225\347\224\250.md"
new file mode 100644
index 0000000..a2ec003
--- /dev/null
+++ "b/31 \347\216\213\347\216\211\344\272\256/20250327-jQuery\345\274\225\347\224\250.md"
@@ -0,0 +1,35 @@
+# jQuery笔记
+
+**在引用外部`js`的页面时路径的节点是按照引用了`js`的页面算路径节点的**
+
+##### 后端请求数据的方法：
+
+```
+let obj = ctx.reqyest.body
+//定义一个变量接受获取的数据
+```
+
+##### 数据库新增数据的方法：
+
+```
+let blog =wawit Blog.create(obj)
+//定义一个变量接收从数据库调用的值在将从后端获取的数据传给数据库从而插入数据
+```
+
+##### 前段页面获取数据的方法：
+
+```
+//使用jQuery的方法来获取前端的数据
+let title = $('input[name=title]').val();//通过前端页面的标签name的方法定位标签获取标签的值
+
+title =title.trim()//通过trim这个函数来确保获取的数据没有多余的空格
+```
+
+##### 前端处理请求的方法:
+
+```
+//使用 axios的方法
+axios.post(`${host}/blogs`,obj).then((res)=>{ //obj是要返回给后端的数据，这边不返回会出现数据库注册为null
+ location.herf='/index.html'//这边是一个跳转函数注册完成时就会跳转回主页渲染数据
+})
+```
\ No newline at end of file
diff --git "a/31 \347\216\213\347\216\211\344\272\256/20250328-\345\211\215\347\253\257\346\225\260\346\215\256\350\216\267\345\217\226.md" "b/31 \347\216\213\347\216\211\344\272\256/20250328-\345\211\215\347\253\257\346\225\260\346\215\256\350\216\267\345\217\226.md"
new file mode 100644
index 0000000..1e7e51d
--- /dev/null
+++ "b/31 \347\216\213\347\216\211\344\272\256/20250328-\345\211\215\347\253\257\346\225\260\346\215\256\350\216\267\345\217\226.md"
@@ -0,0 +1,178 @@
+# 前端数据获取
+
+------
+
+## 一、输入框提示内容 (`placeholder`)
+
+### 1. HTML `placeholder` 属性
+
+- **作用**：在输入框为空时显示提示文本。
+
+- **示例**：
+
+
+
+ ```
+
+ ```
+
+ 运行 HTML
+
+------
+
+## 二、前端数据获取与请求发送
+
+### 1. 获取输入框数据（修复版）
+
+```
+// 正确写法：需要调用 .val() 方法获取值
+let keyword = $('input[name=keyword]').val();
+
+// 或使用原生 JS
+let keyword = document.querySelector('input[name=keyword]').value;
+```
+
+### 2. 发送 GET 请求的两种方式
+
+#### 方式一：Promise 链式调用
+
+```
+axios.get(`${host}/blogs?keyword=${encodeURIComponent(keyword)}`)
+ .then((res) => {
+ console.log('响应数据:', res.data);
+ })
+ .catch((err) => {
+ console.error('请求失败:', err);
+ });
+```
+
+#### 方式二：async/await（更简洁）
+
+```
+try {
+ let res = await axios.get(`${host}/blogs?keyword=${encodeURIComponent(keyword)}`);
+ console.log('响应数据:', res.data);
+} catch (err) {
+ console.error('请求失败:', err);
+}
+```
+
+#### 注意：
+
+- **URL 编码**：使用 `encodeURIComponent()` 处理特殊字符（如空格、中文）。
+- **错误处理**：始终添加 `.catch` 或 `try/catch` 捕获异常。
+
+------
+
+## 三、Sequelize 数据过滤（模糊查询）
+
+### 1. 多条件 OR 查询
+
+```
+const { Op } = require('sequelize'); // 必须导入 Op 操作符
+
+// 假设 keyword 是前端传递的搜索关键词
+blogs = await Blog.findAll({
+ where: {
+ [Op.or]: [ // 满足任意条件即可
+ {
+ title: {
+ [Op.like]: `%${keyword}%` // 标题包含关键词
+ }
+ },
+ {
+ author: {
+ [Op.like]: `%${keyword}%` // 作者包含关键词
+ }
+ }
+ ]
+ }
+});
+```
+
+### 2. 查询结果示例
+
+假设数据库数据：
+
+| id | title | author |
+| :--- | :-------------- | :----- |
+| 1 | JavaScript 教程 | 张三 |
+| 2 | Node.js 入门 | 李四 |
+
+- **搜索关键词**：`"JS"`
+ **匹配结果**：`JavaScript 教程`（标题包含 "JS"）
+
+------
+
+## 四、完整代码示例
+
+### 1. 前端代码（HTML + jQuery）
+
+```
+
+
+
+
+```
+
+运行 HTML
+
+### 2. 后端代码（Node.js + Sequelize）
+
+```
+const { Op } = require('sequelize');
+
+app.get('/blogs', async (req, res) => {
+ try {
+ const { keyword } = req.query;
+ const blogs = await Blog.findAll({
+ where: {
+ [Op.or]: [
+ { title: { [Op.like]: `%${keyword}%` } },
+ { author: { [Op.like]: `%${keyword}%` } }
+ ]
+ }
+ });
+ res.send(blogs);
+ } catch (err) {
+ res.status(500).send({ error: '数据库查询失败' });
+ }
+});
+```
+
+------
+
+## 五、注意事项
+
+1. **安全性**：
+
+ - 使用 `encodeURIComponent` 防止 URL 注入攻击。
+ - Sequelize 的 `like` 查询需注意 SQL 注入风险，避免直接拼接未过滤的用户输入。
+
+2. **模糊查询优化**：
+
+ - 如数据量大，建议对数据库字段添加索引。
+ - 可限制搜索关键词长度（如前端验证）。
+
+3. **代码调试**：
+
+ - 打印生成的 SQL 语句：
+
+ ```
+ console.log(blogs.toString()); // 输出实际执行的 SQL
+ ```
\ No newline at end of file
--
Gitee