From ec5558f6326e8df5d243db948f4aaf2273d0c18e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?16=20=E9=98=99=E8=8B=8F=E6=96=87?= <2361635242@qq.com> Date: Fri, 29 Dec 2023 00:08:53 +0800 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 --- ...76\344\271\246\347\256\241\347\220\206.md" | 161 ++++++++++++++++++ .../20231214\344\275\234\344\270\232.md" | 142 +++++++++++++++ ...15\350\275\256\346\222\255\345\233\276.md" | 66 +++++++ .../20231216\344\275\234\344\270\232.md" | 142 +++++++++++++++ 4 files changed, 511 insertions(+) create mode 100644 "16 \351\230\231\350\213\217\346\226\207/20231210\345\233\276\344\271\246\347\256\241\347\220\206.md" create mode 100644 "16 \351\230\231\350\213\217\346\226\207/20231214\344\275\234\344\270\232.md" create mode 100644 "16 \351\230\231\350\213\217\346\226\207/20231215\350\275\256\346\222\255\345\233\276.md" create mode 100644 "16 \351\230\231\350\213\217\346\226\207/20231216\344\275\234\344\270\232.md" diff --git "a/16 \351\230\231\350\213\217\346\226\207/20231210\345\233\276\344\271\246\347\256\241\347\220\206.md" "b/16 \351\230\231\350\213\217\346\226\207/20231210\345\233\276\344\271\246\347\256\241\347\220\206.md" new file mode 100644 index 0000000..00fac13 --- /dev/null +++ "b/16 \351\230\231\350\213\217\346\226\207/20231210\345\233\276\344\271\246\347\256\241\347\220\206.md" @@ -0,0 +1,161 @@ + ```js + + * 目标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() + }) + }) \ No newline at end of file diff --git "a/16 \351\230\231\350\213\217\346\226\207/20231214\344\275\234\344\270\232.md" "b/16 \351\230\231\350\213\217\346\226\207/20231214\344\275\234\344\270\232.md" new file mode 100644 index 0000000..f52a298 --- /dev/null +++ "b/16 \351\230\231\350\213\217\346\226\207/20231214\344\275\234\344\270\232.md" @@ -0,0 +1,142 @@ +tab栏切换 + +```html + + + +``` + +轮播图 + +```html + + +``` \ No newline at end of file diff --git "a/16 \351\230\231\350\213\217\346\226\207/20231215\350\275\256\346\222\255\345\233\276.md" "b/16 \351\230\231\350\213\217\346\226\207/20231215\350\275\256\346\222\255\345\233\276.md" new file mode 100644 index 0000000..5bf5ee9 --- /dev/null +++ "b/16 \351\230\231\350\213\217\346\226\207/20231215\350\275\256\346\222\255\345\233\276.md" @@ -0,0 +1,66 @@ +# 2023-12-13 第二十四次作业 轮播图 Tab 切换 + +## 轮播图 + +```js +// 获取所有slider指示器的ul元素 +let ul = $('.slider-indicator'); +// 获取slider包装器内的所有img元素 +let img = $('.slider-wrapper img'); + +// 当鼠标进入slider指示器的li元素时，给当前li元素添加'active'类，并移除其他li元素的'active'类 +// 同时，将slider包装器内的img元素的src属性设置为sliderData中当前li元素的url，alt属性设置为当前li元素的title +ul.on('mouseenter', 'li', function () { + $(this).addClass('active').siblings().removeClass('active'); + img.attr({'src': sliderData[$(this).index()].url, alt: sliderData[$(this).index()].title}); +}) + +// 当点击prev按钮时，获取当前active li元素的索引 +// 如果索引为0，将index设置为sliderData长度减1，否则将index减1 +// 给当前索引的li元素添加'active'类，并移除其他li元素的'active'类 +// 将slider包装器内的img元素的src属性设置为对应索引位置的url，alt属性设置为对应索引位置的title +$('.prev').on('click', function () { + let index = ul.children('.active').index(); + if (index === 0) { + index = sliderData.length - 1; + } else { + index--; + } + ul.children().eq(index).addClass('active').siblings().removeClass('active'); + img.attr({'src': sliderData[index].url, alt: sliderData[index].title}); +}) + +// 当点击next按钮时，获取当前active li元素的索引 +// 如果索引等于sliderData长度减1，将index设置为0，否则将index加1 +// 给当前索引的li元素添加'active'类，并移除其他li元素的'active'类 +// 将slider包装器内的img元素的src属性设置为对应索引位置的url，alt属性设置为对应索引位置的title +$('.next').on('click', function () { + let index = ul.children('.active').index(); + if (index === sliderData.length - 1) { + index = 0; + } else { + index++; + } + ul.children().eq(index).addClass('active').siblings().removeClass('active'); + img.attr({'src': sliderData[index].url, alt: sliderData[index].title}); +}) + +// 每3000毫秒（即3秒）执行一次函数，触发点击next按钮事件 +setInterval(function () { + $('.next').click(); +}, 3000) +``` + +## Tab 切换 + +```js + let $ul = $('ul li a'); // 选择所有的ul元素下的li元素下的a元素，并缓存到变量$ul中 + let $tab = $('.tab-content'); // 选择所有的元素具有class为tab-content的，并缓存到变量$tab中 + $ul.on('mouseenter', function () { // 当$ul中的元素鼠标进入时执行以下函数 + $ul.removeClass('active'); // 从$ul中所有元素移除class为active + $(this).addClass('active').siblings().removeClass('active'); // 将this元素添加class为active + $tab.children().eq($ul.index(this)) // 选择$tab中的子元素，索引为$ul中当前this元素的索引 + .addClass('active') // 对上述选中的元素添加class为active + .siblings().removeClass('active'); // 移除上述选中元素的兄弟元素的class为active + }) +``` \ No newline at end of file diff --git "a/16 \351\230\231\350\213\217\346\226\207/20231216\344\275\234\344\270\232.md" "b/16 \351\230\231\350\213\217\346\226\207/20231216\344\275\234\344\270\232.md" new file mode 100644 index 0000000..f52a298 --- /dev/null +++ "b/16 \351\230\231\350\213\217\346\226\207/20231216\344\275\234\344\270\232.md" @@ -0,0 +1,142 @@ +tab栏切换 + +```html + + + +``` + +轮播图 + +```html + + +``` \ No newline at end of file -- Gitee