diff --git "a/39 \347\216\213\351\233\252\345\275\261/20231211 jQuery\350\257\255\346\263\225\345\233\276\344\271\246\351\246\206\347\256\241\347\220\206\347\263\273\347\273\237.md" "b/39 \347\216\213\351\233\252\345\275\261/20231211 jQuery\350\257\255\346\263\225\345\233\276\344\271\246\351\246\206\347\256\241\347\220\206\347\263\273\347\273\237.md" index d7d362f9da73bc583c49250f66ee33a14a0c18c3..ae25251f94442e31a450232233cba8a2f0c46b98 100644 --- "a/39 \347\216\213\351\233\252\345\275\261/20231211 jQuery\350\257\255\346\263\225\345\233\276\344\271\246\351\246\206\347\256\241\347\220\206\347\263\273\347\273\237.md" +++ "b/39 \347\216\213\351\233\252\345\275\261/20231211 jQuery\350\257\255\346\263\225\345\233\276\344\271\246\351\246\206\347\256\241\347\220\206\347\263\273\347\273\237.md" @@ -1,145 +1,192 @@ ```js -/** - * 目标1：渲染图书列表 - * 1.1 获取数据 - * 1.2 渲染数据 - */ -const creator = 'wxy' -function booksList() { - $.ajax({ - url: 'http://hmajax.itheima.net/api/books', - params: { - creator +// 目标1：图书列表 +// 获取数据 +// 渲染表格 + + +// 公用对象 +const tbody=$('.list') + +const creator='wxy' +// 获取数据 +function getBookAndShow(){ + + $.ajax({ + url:'https://hmajax.itheima.net/api/books', + type:'get', + data:{ + creator + }, + success:(result)=>{ + const bookList=result.data; + const listStr=$.map(bookList,(item,i)=>{ + // console.log(item); + const{id,author,bookname,publisher}=item; + return` + ${i+1} + ${bookname} + ${author} + ${publisher} + + 删除 + 编辑 + + ` + }).join(''); + + console.log(listStr); + tbody.html=(listStr); + }, + error:()=>{ + } - }).then(result => { - // console.log(result) - const bookList = result.data.data - // console.log(bookList); - $('.list').html($.map(list, (item, i) => { - const { id, author, bookname, publisher } = item - 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); - // 提交到服务器 +// 第一次打开网页，就要加载一次 +getBookAndShow() + + +// 目标2：添加功能 +// 1.显示或隐藏弹窗 +// 2.保存按钮点击事件 +// 3.收集表单数据 +// 4.调用接口提交数据 +// 5.提交数据，隐藏弹窗 +// 6.清空表单项 +// 7.成功的话，获取新数据并渲染 + +// 添加图书的弹窗对象 +const addBox=$('.add-modal') +const modal=new bootstrap.Modal(addBox) // modal对象，可以控制addBox显示或隐藏 + +// 获取要收集的表单对象 +const addForm=$('.add-form')[0] + + + +// 保存按钮点击事件 +$('.add-btn').bind('click',()=>{ + // 收集表单数据 + const book=serialize(addForm,{hash:true,empty:true}) + console.log(book); + // 调用接口提交数据 $.ajax({ - url: 'http://hmajax.itheima.net/api/books', - method: 'POST', - data: { - ...bookObj, + url:'https://hmajax.itheima.net/api/books', + type:'post', + data:{ + ...book, creator - } - }).then(result => { - // console.log(result); + }, + success:(result=>{ + // console.log(result); + // 隐藏弹窗 + modal.hide() + // 清空表单项 addForm.reset() - addModal.hide() - booksList() + // 成功的话，获取新数据并渲染 + getBookAndShow() + }) }) }) -/** - * 目标3：删除图书 - * 3.1 删除元素绑定点击事件->获取图书id - * 3.2 调用删除接口 - * 3.3 刷新图书列表 - */ -// 3.1 删除元素->点击（事件委托） - $('.list').click(e => { - // 获取触发事件目标元素 - // 判断点击的是删除元素 - if(e.target.classList.contains('del')){ - if (!confirm('确定删除？')) { - return //阻止往后运行 + + + + +// 目标3：删除图书 +// 1.给删除点击事件 +// 2.获取图书的id +// 3.通过id调用接口，删除对应图书 +// 4.成功的话，获取新数据并渲染 + +// 将点击委托tbody +tbody.bind('click',(e)=>{ + // console.log(e.target); // 进一步获取删除对象，两种方案 + // className==='del' + // classList.contains('del') + // if(e.target.className==='del') + if(e.target.classList.contains('del')){ + // 删除前确认 + if(!confirm('确认删除')){ + return; // 阻止往后执行 + } + // 获取图书id + // console.log(e.target.parentNode.dataset.id); + const id=e.target.parentNode.dataset.id; + // 调用接口 + $.ajax({ + url:`https://hmajax.itheima.net/api/books/${id}`, + type:'delete', + success:(result=>{ + // 成功的话，获取新数据并渲染 + getBookAndShow() + }) + + }) } - const theId = e.target.parentNode.dataset.id - // 3.2 调用删除接口 - axios({ - url: `http://hmajax.itheima.net/api/books/${theId}`, - method: 'DELETE' - }).then(() => { - booksList() + +}) + + +// 目标4：编辑图书 +// 1.弹窗 +// 2.获取图书的id +// 3.通过id调用接口，获取对应的图书数据，回显到表单 +// 4.修改按钮点击事件 +// 5.收集表单数据 +// 6.调用接口提价数据 +// 7.提交数据，隐藏弹窗 +// 8.成功的话，获取新数据并渲染 + +// 添加图书的弹窗对象 +const editBox=$('.edit-modal') +const editModal=new bootstrap.Modal(editBox) // modal对象，可以控制editBox显示或隐藏 + +// 获取要收集的表单对象 +const editForm=$('.edit-form') +// 委托tbody +tbody.bind('click',(e)=>{ + if(e.target.className==='edit'){ + editModal.show() // 显示 + // 获取图书id + const id=e.target.parentNode.dataset.id; + // 通过id调用接口，获取对应图书数据，回显到表单 + axios({ + url:`https://hmajax.itheima.net/api/books/${id}`, + }).then(result=>{ + // console.log(result.data.data); + const book=result.data.data; + const {id,author,bookname,publisher}=book; + editForm.querySelector('.publisher').value=publisher; + editForm.querySelector('.bookname').value=bookname; + editForm.querySelector('.author').value=author; + editForm.querySelector('.id').value=id; + }) + } }) -/** - * 目标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] - }) + +const editBtn=$('.edit-btn') + editBtn.bind('click',()=>{ + const book=serialize(editForm,{hash:true,empty:true}) + console.log(book); + // 调用接口提交数据 + axios({ + url:'https://hmajax.itheima.net/api/books/'+id, + method:'put', + data:{ + ...book, + creator + } + }).then(result=>{ + // 隐藏弹窗 + editForm.hide() + // 获取新数据并渲染 + getBookAndShow() }) - 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: { - ...book, - creator - } - }).then(() => { - // 修改成功以后，重新获取并刷新列表 - getBooksList() - // 隐藏弹框 - editModal.hide() - }) -}) + ``` diff --git "a/39 \347\216\213\351\233\252\345\275\261/20231212 jQuery\351\200\211\346\213\251\345\231\250\343\200\201\344\272\213\344\273\266\357\274\214\350\275\256\346\222\255\345\233\276jQuery\347\211\210.md" "b/39 \347\216\213\351\233\252\345\275\261/20231212 jQuery\351\200\211\346\213\251\345\231\250\343\200\201\344\272\213\344\273\266\357\274\214\350\275\256\346\222\255\345\233\276jQuery\347\211\210.md" new file mode 100644 index 0000000000000000000000000000000000000000..d4a67cc67c47703acd538cad6a57e539220ea902 --- /dev/null +++ "b/39 \347\216\213\351\233\252\345\275\261/20231212 jQuery\351\200\211\346\213\251\345\231\250\343\200\201\344\272\213\344\273\266\357\274\214\350\275\256\346\222\255\345\233\276jQuery\347\211\210.md" @@ -0,0 +1,291 @@ +# 笔记 + +### 一、选择器 + +```html + +``` + +二、jquer事件 + +```html +鼠标事件 + -click：鼠标单击 + -- dblclick 双击 + -mouseover：鼠标进入（进入子元素也会触发） + -mouseout：鼠标离开（离开子元素也会触发） + -focus：元素获得焦点 + -blur：元素失去焦点 + + 键盘事件 + -keydown：键盘按下事件，从上到下的过程 + -keyup：松开键盘 + -keypress：键盘被按到最底部 + 绑定事件 + 1.形式 addEventLister("事件名",函数) + $("jquery选择器").bind("事件名",函数) + 好处：更加通用 + 2.多组事件绑定： + $("jquery选择器").bind({"事件名":函数，"事件名":函数，"事件名":函数，}) + 显示效果： + -show(参数1，参数2)：显示 + -fadeIn(参数1，参数2)：淡入 + -slideDown(参数1，参数2)：展开 + 关于参数：参数1表示速度，可选值有slow、fast、normal + 参数2表示回调函数 + 隐藏效果： + -hide(参数1，参数2)：隐藏 + -fadeOut(参数1，参数2)：淡出 + -slideUp(参数1，参数2)：拉升 (压缩) + + $("p").one( "click", fun...) //one 绑定一个一次性的事件处理函数 + $("p").unbind( "click" ) //解绑一个事件 + +``` + + + +# 作业 + +```html + + + + + + + + 轮播图点击切换 + + + + +
+
+ +
+
+

对人类来说会不会太超前了？

+ +
+ + +
+
+
+ + + + + + + +``` +