From 717af04a5ba94688de535b0d86fd145d4dc83c37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=A3=E7=91=9E?= <3462909738@qq.com>
Date: Thu, 14 Dec 2023 11:39:20 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=81=E4=BA=8C=E6=9C=88=E5=8D=81=E4=B8=89?=
=?UTF-8?q?=E6=97=A5=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../20231213\344\275\234\344\270\232.md" | 335 ++++++++++++++++++
1 file changed, 335 insertions(+)
create mode 100644 "44\344\273\243\347\221\236/20231213\344\275\234\344\270\232.md"
diff --git "a/44\344\273\243\347\221\236/20231213\344\275\234\344\270\232.md" "b/44\344\273\243\347\221\236/20231213\344\275\234\344\270\232.md"
new file mode 100644
index 0000000..a694cda
--- /dev/null
+++ "b/44\344\273\243\347\221\236/20231213\344\275\234\344\270\232.md"
@@ -0,0 +1,335 @@
+# 笔记
+
+```
+jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
+
+- 美元符号定义 jQuery
+- 选择符（selector）"查询"和"查找" HTML 元素
+- jQuery 的 action() 执行对元素的操作
+```
+
+# 作业
+
+```
+/**
+ * 目标1：渲染图书列表
+ * 1.1 获取数据
+ * 1.2 渲染数据
+ */
+const creator = '阿念ee'
+// 封装 获取并渲染图书列表函数
+function booksList() {
+ // 获取数据
+ $.ajax({
+ url: 'http://hmajax.itheima.net/api/books',
+ params: {
+ // 获取外号的对应数据
+ creator
+ }
+ }).then(result => {
+ // console.log(result)
+ const bookList = result.data.data
+ // console.log(bookList);
+ // 渲染数据
+ $('.list').html($.map(list, (ele, i) => {
+ const { author, bookname, id, publisher } = ele
+ return `
+ | ${i + 1} |
+ ${bookname} |
+ ${author} |
+ ${publisher} |
+
+ 删除
+ 编辑
+ |
+
`
+ }).join('')
+ )
+ })
+}
+// 渲染列表，加载网页数据
+booksList()
+
+/**
+ * 目标2：新增图书
+ * 2.1 新增弹框->显示和隐藏
+ * 2.2 收集表单数据，并提交到服务器保存
+ * 2.3 刷新图书列表
+ */
+// 2.1 创建弹框对象
+const addModalDom = document.querySelector('.add-modal')
+const addModal = new bootstrap.Modal(addModalDom)
+// 保存按钮->点击->隐藏弹窗
+ $('.add-btn').click(() => {
+ // 2.2 收集表单数据，并提交到服务器保存
+ const addForm = $('.add_form')
+ const bookObj = serialize(addForm, { hash: true, empty: true })
+ // console.log(bookObj);
+ // 提交到服务器
+ $.ajax({
+ url: 'http://hmajax.itheima.net/api/books',
+ method: 'POST',
+ data: {
+ ...bookObj,
+ creator
+ }
+ }).then(result => {
+ // console.log(result);
+ addForm.reset()
+ addModal.hide()
+ booksList()
+ })
+})
+/**
+ * 目标3：删除图书
+ * 3.1 删除元素绑定点击事件->获取图书id
+ * 3.2 调用删除接口
+ * 3.3 刷新图书列表
+ */
+// 3.1 删除元素->点击（事件委托）
+ $('.list').click(e => {
+ // 获取触发事件目标元素
+ // 判断点击的是删除元素
+ if(e.target.classList.contains('del')){
+ const theId = e.target.parentNode.dataset.id
+ // 3.2 调用删除接口
+ axios({
+ url: `http://hmajax.itheima.net/api/books/${theId}`,
+ method: 'DELETE'
+ }).then(() => {
+ booksList()
+ })
+ }
+})
+/**
+ * 目标4：编辑图书
+ * 4.1 编辑弹框->显示和隐藏
+ * 4.2 获取当前编辑图书数据->回显到编辑表单中
+ * 4.3 提交保存修改，并刷新列表
+ */
+// 4.1 编辑弹框->显示和隐藏
+const editDom = document.querySelector('.edit-modal')
+const editModal = new bootstrap.Modal(editDom)
+// 编辑元素->点击->弹框显示
+$('.list').click(e => {
+ // 判断点击的是否为编辑元素
+ if (e.target.classList.contains('edit')) {
+ // 4.2 获取当前编辑图书数据->回显到编辑表单中
+ const theId = e.target.parentNode.dataset.id
+ $ajax({
+ url: `http://hmajax.itheima.net/api/books/${theId}`
+ }).then(result => {
+ const bookObj = result.data.data
+ // 数据对象“属性”和标签“类名”一致
+ // 遍历数据对象，使用属性去获取对应的标签，快速赋值
+ const keys = Object.keys(bookObj) // ['id', 'bookname', 'author', 'publisher']
+ keys.forEach(key => {
+ document.querySelector(`.edit-form .${key}`).value = bookObj[key]
+ })
+ })
+ editModal.show()
+ }
+})
+// 修改按钮->点击->隐藏弹框
+document.querySelector('.edit-btn').addEventListener('click', () => {
+ // 4.3 提交保存修改，并刷新列表
+ const editForm = document.querySelector('.edit-form')
+ $('.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
+ // 保存正在编辑的图书id，隐藏起来：无需让用户修改
+ //
+ $ajax({
+ url: `http://hmajax.itheima.net/api/books/${id}`,
+ method: 'PUT',
+ data: {
+ bookname,
+ author,
+ publisher,
+ creator
+ }
+ }).then(() => {
+ // 修改成功以后，重新获取并刷新列表
+ getBooksList()
+
+ // 隐藏弹框
+ editModal.hide()
+ })
+})
+
+
+轮播图
+const creator = 'cheng';
+function render() {
+ $.ajax({
+ url: 'https://hmajax.itheima.net/api/books',
+ type: 'get',
+ data: {
+ creator
+ },
+ success: (result) => {
+ const data = result.data;
+ $('tbody').html(
+ data.map((item, index) => {
+ const {id, bookname, author, publisher} = item;
+ return `
+ | ${index + 1} |
+ ${bookname} |
+ ${author} |
+ ${publisher} |
+
+ 删除
+ 编辑
+ |
+
`
+ }).join(''))
+ },
+ error: error => {
+ console.log(error)
+ }
+ })
+
+}
+
+render();
+const addModal = $('.add-modal')[0];
+const newAddModal = new bootstrap.Modal(addModal)
+//添加里的保存单机事件
+$('.add-btn').bind('click', () => {
+ const form = $('.add-form')[0];
+ const book = serialize(form, {hash: true, empty: true});
+ $.ajax({
+ url: 'https://hmajax.itheima.net/api/books',
+ type: 'post',
+ data: {
+ creator,
+ ...book
+ },
+ success: () => {
+ form.reset();
+ newAddModal.hide();
+ render();
+ },
+ error: (error) => {
+ console.log(error)
+ }
+ }
+ )
+
+})
+//删除单机事件
+$('tbody ').on('click', '.del', function () {
+ const id = $(this).parent().data('id');
+ if (!confirm('是否要删除')) {
+ return 0;
+ } else {
+ $.ajax({
+ url: 'https://hmajax.itheima.net/api/books/' + id,
+ type: 'delete',
+ success: () => {
+ render();
+ },
+ error: (error) => {
+ console.log(error);
+ }
+ })
+ }
+}).on('click', '.edit', function () {
+ const id = $(this).parent().data('id');
+ const editModal = $('.edit-modal');
+ const newModal = new bootstrap.Modal(editModal);
+ newModal.show();
+ const form = $('.edit-form')[0];
+ $.ajax({
+ url: 'https://hmajax.itheima.net/api/books/' + id,
+ type: 'get',
+ success: (result) => {
+ const {bookname, author, publisher} = result.data
+ $('.bookname')[1].value = bookname;
+ $('.author')[1].value = author;
+ $('.publisher')[1].value = publisher;
+ },
+ error: (error) => {
+ console.log(error)
+ }
+ })
+ $('.edit-btn').bind('click', () => {
+ const book = serialize(form, {hash: true, empty: true});
+ console.log(book)
+ $.ajax({
+ url: "https://hmajax.itheima.net/api/books/" + id,
+ type: 'put',
+ data: {
+ creator,
+ ...book,
+ },
+ success: () => {
+ newModal.hide();
+ render();
+ },
+ error: (error) => {
+ console.log(error)
+ }
+ })
+ })
+})
+const sliderData = [
+ {url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)'},
+ {url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)'},
+ {url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)'},
+ {url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)'},
+ {url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)'},
+ {url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)'},
+ {url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)'},
+ {url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)'},
+]
+
+
+function getSliderData(index) {
+ let newIndex = index % sliderData.length;
+ let a = sliderData[newIndex % sliderData.length];
+ $('.slider-wrapper img')[0].src = a.url;
+ $('.slider-footer p')[0].innerHTML = a.title;
+ $('.slider-footer')[0].style.backgroundColor = a.color;
+ $('.slider-indicator .active')[0].classList.remove('active');
+ $('.slider-indicator li')[newIndex].classList.add('active');
+}
+
+let index = 0;
+
+let interval = setInterval(function () {
+ getSliderData(index);
+ index++;
+}, 1000)
+function prev() {
+ index--;
+ if (index <= 0) {
+ index = sliderData.length
+ }
+ getSliderData(index);
+}
+
+function next() {
+ index++;
+ getSliderData(index);
+}
+
+
+$('.toggle').on('click', '.prev', function () {
+ prev();
+}).on('click', '.next', function () {
+ next();
+})
+
+$('tbody').ready(
+ $('.slider').mouseenter(function (){
+ console.log(123)
+ clearInterval(interval);
+}).mouseleave(function (){
+ interval=setInterval(function () {
+ index++;
+ getSliderData(index);
+ }, 1000)
+ }));
+```
\ No newline at end of file
--
Gitee