From e1fc1968ab26319f4905fc8ded42337f582afd8c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E8=BE=89?= <11764079+elrianode@user.noreply.gitee.com> Date: Tue, 12 Dec 2023 02:36:26 +0000 Subject: [PATCH] =?UTF-8?q?=E4=BD=9C=E4=B8=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 张辉 <11764079+elrianode@user.noreply.gitee.com> --- .../20231211 jQuery.md" | 258 ++++++++++++++++++ 1 file changed, 258 insertions(+) create mode 100644 "01 \345\274\240\350\276\211/20231211 jQuery.md" diff --git "a/01 \345\274\240\350\276\211/20231211 jQuery.md" "b/01 \345\274\240\350\276\211/20231211 jQuery.md" new file mode 100644 index 0000000..b93e3a6 --- /dev/null +++ "b/01 \345\274\240\350\276\211/20231211 jQuery.md" @@ -0,0 +1,258 @@ +# 笔记 + +## jQuery + +什么是 jQuery ？ + +jQuery 是一个 JavaScript 函数库。 + +jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。 + +jQuery 库包含以下功能： + +- HTML 元素选取 +- HTML 元素操作 +- CSS 操作 +- HTML 事件函数 +- JavaScript 特效和动画 +- HTML DOM 遍历和修改 +- AJAX +- Utilities + +**提示：** 除此之外，jQuery 还提供了大量的插件。 + +# jQuery 语法 + +------ + +通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。 + +------ + +jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。 + +基础语法： $(selector).action() + +- 美元符号定义 jQuery +- 选择符（selector）"查询"和"查找" HTML 元素 +- jQuery 的 action() 执行对元素的操作 + +# jQuery 选择器 + +------ + +jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 + +------ + +jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 + +jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 [CSS 选择器](https://www.runoob.com/cssref/css-selectors.html)，除此之外，它还有一些自定义的选择器。 + +jQuery 中所有选择器都以美元符号开头：$()。 + +## 什么是事件？ + +页面对不同访问者的响应叫做事件。 + +事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。 + +实例： + +- 在元素上移动鼠标。 +- 选取单选按钮 +- 点击元素 + +在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。 + +常见 DOM 事件： + +| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 | +| :----------------------------------------------------------- | :----------------------------------------------------------- | :-------------------------------------------------------- | :-------------------------------------------------------- | +| [click](https://www.runoob.com/jquery/event-click.html) | [keypress](https://www.runoob.com/jquery/event-keypress.html) | [submit](https://www.runoob.com/jquery/event-submit.html) | [load](https://www.runoob.com/jquery/event-load.html) | +| [dblclick](https://www.runoob.com/jquery/event-dblclick.html) | [keydown](https://www.runoob.com/jquery/event-keydown.html) | [change](https://www.runoob.com/jquery/event-change.html) | [resize](https://www.runoob.com/jquery/event-resize.html) | +| [mouseenter](https://www.runoob.com/jquery/event-mouseenter.html) | [keyup](https://www.runoob.com/jquery/event-keyup.html) | [focus](https://www.runoob.com/jquery/event-focus.html) | [scroll](https://www.runoob.com/jquery/event-scroll.html) | +| [mouseleave](https://www.runoob.com/jquery/event-mouseleave.html) | | [blur](https://www.runoob.com/jquery/event-blur.html) | [unload](https://www.runoob.com/jquery/event-unload.html) | +| [hover](https://www.runoob.com/jquery/event-hover.html) | | | | + +# 作业 + +```js +$(document).ready(() => { + /** + * 目标1：渲染图书列表 + * 1.1 获取数据 + * 1.2 渲染数据 + */ + /** + * 1.通过接口获取数据 + * 2.将获取到的数据转换成需要的格式 + * 3.渲染 + */ + const creator = 'mockQ' + // 获取tbody + // const tbody = document.querySelector('.list') + const tbody = $('.list') + // console.log(tbody) + function render() { + // 通过接口获取数据 + $.ajax({ + url: 'https://hmajax.itheima.net/api/books', + type: 'get', + data: { + creator + }, + // 成功时执行以下操作 + success: result => { + // console.log(result.data) + const list = result.data + // 用jQuery的html方法和map方法将获得的数据进行格式化然后填充到主体中 + tbody.html($.map(list, (ele, index) => { + const { author, bookname, id, publisher } = ele + return ` + + ${index + 1} + ${bookname} + ${author} + ${publisher} + + 删除 + 编辑 + + + ` + }).join('')) + } + }) + } + // 渲染 + render() + + + /** + * 1.获取表单，添加提交事件 + * 2.将表单内容通过接口提交 + * 3.渲染 + */ + const addModal = new bootstrap.Modal($('.add-modal')[0]) + // 获取按钮，添加事件 + $('.add-btn').click(() => { + // console.log(111) + // $('.add-modal').hide() + // 获取表单 + const addForm = $('.add-form')[0] + // console.log(addFo) + const data = serialize(addForm, { hash: true, empty: true }) + // console.log(data) + // 将表单内容通过接口提交 + $.ajax({ + url: 'https://hmajax.itheima.net/api/books', + type: 'post', + data: { + ...data, + creator + }, + success: result => { + // 收起输入框 + addModal.hide() + // 清空表单 + addForm.reset() + // 渲染 + render() + } + }) + + }) + + /** + * 1.委托事件进行删除操作 + * 2.通过接口将书本对象删除 + * 3.渲染 + */ + // 委托事件进行删除操作 + // console.log(tbody.parentElement); + tbody.click(e => { + if (e.target.className === 'del') { + if (confirm('确定要删除吗？')) { + // console.log('删除') + // 获取id + const id = e.target.parentElement.parentElement.dataset.id + // console.log(e.target.parentElement.parentElement) + // console.log(id) + // 通过接口将书本对象删除 + $.ajax({ + url: `https://hmajax.itheima.net/api/books/${id}`, + type: 'delete', + success: result => { + // console.log(result) + // 渲染 + render() + } + }) + } + } + }) + + + + + /** + * 1.委托事件点击弹出表单 + * 2.通过接口将编辑的书本信息回显到表单中 + * 3.通过接口将修改后的数据重新上传 + * 4.渲染 + */ + + const editModal = new bootstrap.Modal($('.edit-modal')[0]) + // 委托事件点击弹出表单 + tbody.click(e => { + if (e.target.className === 'edit') { + // 弹出修改的表单 + editModal.show() + // 获取图书id + const id = e.target.parentElement.parentElement.dataset.id + // 通过接口将编辑的书本信息回显到表单中 + $.ajax({ + url: `https://hmajax.itheima.net/api/books/${id}`, + type: 'get', + success: result => { + // console.log(result.data) + // 依次回显表单数据 + const { author, bookname, id, publisher } = result.data + // console.log($('.edit-form [name="bookname"]')[0]) + $('.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 + } + }) + } + }) + + // 点击提交按钮 + $('.edit-btn').click(() => { + // 通过接口将修改后的数据重新上传 + // 获取id + // console.log(111); + const { author, bookname, id, publisher } = serialize($('.edit-form')[0], { hash: true, empty: true }) + // console.log(author, bookname, id, publisher); + $.ajax({ + url: `https://hmajax.itheima.net/api/books/${id}`, + type: 'put', + data: { + bookname, + author, + publisher, + creator + }, + success: result => { + console.log(result) + // 收起表单 + editModal.hide() + // 渲染 + render() + } + }) + }) +}) +``` \ No newline at end of file -- Gitee