From ebb67e207e584fe5ec5fb1e0d3269b6839d5bb4c Mon Sep 17 00:00:00 2001 From: unknown <2152890632@qq.com> Date: Thu, 14 Dec 2023 13:22:34 +0800 Subject: [PATCH 1/2] =?UTF-8?q?jQuery=E9=A2=84=E4=B9=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...0231212 jQuery\351\242\204\344\271\240.md" | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 "06 \351\231\210\345\277\227\344\274\237/20231212 jQuery\351\242\204\344\271\240.md" diff --git "a/06 \351\231\210\345\277\227\344\274\237/20231212 jQuery\351\242\204\344\271\240.md" "b/06 \351\231\210\345\277\227\344\274\237/20231212 jQuery\351\242\204\344\271\240.md" new file mode 100644 index 0000000..e30b4eb --- /dev/null +++ "b/06 \351\231\210\345\277\227\344\274\237/20231212 jQuery\351\242\204\344\271\240.md" @@ -0,0 +1,41 @@ +## 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" 的元素 + + **提示：**jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法 -- Gitee From 840e7e40a5e9895c3d2fb629e3007ef8b48c7343 Mon Sep 17 00:00:00 2001 From: unknown <2152890632@qq.com> Date: Thu, 14 Dec 2023 13:29:26 +0800 Subject: [PATCH 2/2] =?UTF-8?q?jQuery=E4=BD=9C=E4=B8=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...0231213 jQuery\344\275\234\344\270\232.md" | 325 ++++++++++++++++++ 1 file changed, 325 insertions(+) create mode 100644 "06 \351\231\210\345\277\227\344\274\237/20231213 jQuery\344\275\234\344\270\232.md" diff --git "a/06 \351\231\210\345\277\227\344\274\237/20231213 jQuery\344\275\234\344\270\232.md" "b/06 \351\231\210\345\277\227\344\274\237/20231213 jQuery\344\275\234\344\270\232.md" new file mode 100644 index 0000000..ea316a8 --- /dev/null +++ "b/06 \351\231\210\345\277\227\344\274\237/20231213 jQuery\344\275\234\344\270\232.md" @@ -0,0 +1,325 @@ +# 作业 + +``` +/** + * 目标1：渲染图书列表 + * 1.1 获取数据 + * 1.2 渲染数据 + */ +const creator = '666' +// 封装 获取并渲染图书列表函数 +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