diff --git "a/30 \351\203\255\350\213\245\346\230\225/20231120 \351\241\265\351\235\242\346\273\232\345\212\250.md" "b/30 \351\203\255\350\213\245\346\230\225/20231120 \351\241\265\351\235\242\346\273\232\345\212\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..e66ac87e3d44fb65f6afe9b2784a6a36f4a2f48c --- /dev/null +++ "b/30 \351\203\255\350\213\245\346\230\225/20231120 \351\241\265\351\235\242\346\273\232\345\212\250.md" @@ -0,0 +1,1296 @@ +```html + + + + + + 小兔鲜儿 - 新鲜 惠民 快捷! + + + + + + + + +
+
+ + +
+
+ +
+
+ +

小兔鲜儿

+ +
+ +
+ +
+ + + 2 + + +
+ +
+
+
+
+ +
+
+ +
+ + + +
+ +
+
+ +
+ + + + + + +
+ + + + + +
+ +
+
+
+ +
+
+ +
+

新鲜好物新鲜出炉 品质靠谱

+ + 查看全部 + +
+ +
+ + + 睿米无线吸尘器F8 + ￥899 + + + + 智能环绕3D空调 + ￥1299 + + + + 广东软软糯米煲仔饭 + ￥129 + + + + 罗西机械智能手表 + ￥3399 + +
+
+
+ + +
+
+ +
+

人气推荐人气爆款 不容错过

+
+ +
+ + + 特惠推荐 + 我猜得到 你的需要 + + + + 爆款推荐 + 人气好物推荐 + + + + 场景使用一站买全 + 编辑精心整理推荐 + + + + 领券中心 + 发现更多超值优惠券 + +
+
+
+ + +
+
+
+

热门品牌国际经典 品质保证

+
+ + +
+
+ +
+ +
+
+
+ + +
+
+ +
+

生鲜

+ + 查看全部 + +
+ 水果 + 蔬菜 + 肉禽蛋 + 裤装 + 衬衫 + 内衣 +
+
+ +
+ +
+ + +
+

服饰

+ + 查看全部 + +
+ 行李箱 + 男士包袋 + 女士包袋 + 钱包及小提袋 + 男鞋 + 女鞋 + 拖鞋 +
+
+ +
+ +
+ + +
+

餐厨

+ + 查看全部 + +
+ 水果 + 蔬菜 + 肉禽蛋 + 裤装 + 衬衫 + 内衣 +
+
+ +
+ +
+ + +
+

居家

+ + 查看全部 + +
+ 咖啡具 + 水具酒具 + 锅具 + 餐具 + 功能厨具 + 茶具 + 清洁保鲜 +
+
+ +
+ +
+
+
+ + +
+
+
+

最新专题

+ + 查看全部 + +
+
+ +
+
+
+ +
+
+ +
+
+
客户服务
+
在线客服
+ +
+
+
关注我们
+
公众号
+
微博
+
+
+
下载APP
+
+ +
+
+ 扫描二维码 + 立马下载APP + 下载页面 +
+
+
+
服务热线
+
+ 400-0000-000 + 周一至周日 8:00-18:00 +
+
+
+
+ +
+
+ +
+ 价格亲民 + 物流快捷 + 品质新鲜 +
+ +
+

+ 关于我们 + 帮助中心 + 售后服务 + 配送与验收 + 商务合作 + 搜索推荐 + 友情链接 +

+

CopyRight © 小兔鲜儿

+
+
+
+
+ +
+ +
+ + + + +``` + diff --git "a/30 \351\203\255\350\213\245\346\230\225/20231121 \345\255\246\347\224\237\344\277\241\346\201\257\347\256\241\347\220\206\347\263\273\347\273\237.md" "b/30 \351\203\255\350\213\245\346\230\225/20231121 \345\255\246\347\224\237\344\277\241\346\201\257\347\256\241\347\220\206\347\263\273\347\273\237.md" new file mode 100644 index 0000000000000000000000000000000000000000..32cd2ffe62d1528a2eebba489bd0c20ac8e3b2c1 --- /dev/null +++ "b/30 \351\203\255\350\213\245\346\230\225/20231121 \345\255\246\347\224\237\344\277\241\346\201\257\347\256\241\347\220\206\347\263\273\347\273\237.md" @@ -0,0 +1,139 @@ +```html + + + + + + + + 学生信息管理 + + + + +

新增学员

+
+ 姓名： + 年龄： + 性别: + + 薪资： + 就业城市： + +
+ +

就业榜

+ + + + + + + + + + + + + + + +
学号姓名年龄性别薪资就业城市操作
+ + + +``` + diff --git "a/30 \351\203\255\350\213\245\346\230\225/20231123 \347\273\203\344\271\240(\344\270\212\345\217\260).md" "b/30 \351\203\255\350\213\245\346\230\225/20231123 \347\273\203\344\271\240(\344\270\212\345\217\260).md" new file mode 100644 index 0000000000000000000000000000000000000000..1b055856c77ff9fb53615dab696dc450698b6f9c --- /dev/null +++ "b/30 \351\203\255\350\213\245\346\230\225/20231123 \347\273\203\344\271\240(\344\270\212\345\217\260).md" @@ -0,0 +1,65 @@ +### 实例化 + +``` + // const date = new Date(); // 系统默认时间 +//分别获取年、月、日，时、分、秒 +getFullYear 获取四位年份 +getMonth 获取月份，取值为 0 ~ 11 +getDate 获取月份中的每一天（当天），不同月份取值也不相同 +getDay 获取星期，取值为 0 ~ 6 +getHours 获取小时，取值为 0 ~ 23 +getMinutes 获取分钟，取值为 0 ~ 59 +getSeconds 获取秒，取值为 0 ~ 59 +``` + +### 时间戳 + +``` +//获得当前时间的时间戳 + +1.const time=new Date().getTime() +2.+new Date() +console.log(+new Date()) +3.Date.now() +//获得指定时间戳 +1.const time1=new Date('2018-10-10 15:30:00').getTime() +2.console.log(+new Date('2018-10-10 15:30:00')) +``` + +### 节点 + +#### 父节点 + +通过子元素，子对象，子节点找父元素，父对象，父节点 + +子节点.parentNode + +#### 子节点 + +通过父元素，父对象，父节点找子元素，子对象，子节点 + +父节点.children + +#### 兄弟节点 + +子节点.previousElementSibling 前一个兄弟节点 + +子节点.nextElementSibling 后一个兄弟节点 + +#### 增加节点 + +1个对象只能加一次 + +父节点.appendChild(子节点) 表示在父节点末尾追加一个新的子节点 + +父节点.insertBefore(新子节点，哪个子节点前面插入) + +#### 克隆节点 + +要被克隆的对象.cloneNode（true/false） + +true：标签内容一起克隆 false：只克隆标签 + +#### 删除节点 + +父节点.removeChild（子节点） \ No newline at end of file diff --git "a/30 \351\203\255\350\213\245\346\230\225/20231124 \345\255\246\347\224\2372.0.md" "b/30 \351\203\255\350\213\245\346\230\225/20231124 \345\255\246\347\224\2372.0.md" new file mode 100644 index 0000000000000000000000000000000000000000..71fab8c6850ba80a519eac497f32bc61a674f724 --- /dev/null +++ "b/30 \351\203\255\350\213\245\346\230\225/20231124 \345\255\246\347\224\2372.0.md" @@ -0,0 +1,124 @@ +```html + + + + + + + + 学生信息管理 + + + + +

新增学员

+
+ 姓名： + 年龄： + 性别: + + 薪资： + 就业城市： + +
+ +

就业榜

+ + + + + + + + + + + + + + +
学号姓名年龄性别薪资就业城市操作
+ + + + +``` + diff --git "a/30 \351\203\255\350\213\245\346\230\225/20231126 \346\234\254\346\234\272\345\255\230\345\202\250.md" "b/30 \351\203\255\350\213\245\346\230\225/20231126 \346\234\254\346\234\272\345\255\230\345\202\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..44733bc267b3be42613df3f2785be9b8ac258dc5 --- /dev/null +++ "b/30 \351\203\255\350\213\245\346\230\225/20231126 \346\234\254\346\234\272\345\255\230\345\202\250.md" @@ -0,0 +1,133 @@ +```html + + + + + + + + 学生信息管理 + + + + +

新增学员

+
+ 姓名： + 年龄： + 性别: + + 薪资： + 就业城市： + +
+ +

就业榜

+ + + + + + + + + + + + + + + +
学号姓名年龄性别薪资就业城市操作
+ + + +> +``` + diff --git "a/30 \351\203\255\350\213\245\346\230\225/20231127 \346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" "b/30 \351\203\255\350\213\245\346\230\225/20231127 \346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" new file mode 100644 index 0000000000000000000000000000000000000000..3e6a02500248ab81f4c779b82f085fea69588a2e --- /dev/null +++ "b/30 \351\203\255\350\213\245\346\230\225/20231127 \346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" @@ -0,0 +1,486 @@ +```html + + + + + + 小兔鲜儿 - 新鲜 惠民 快捷! + + + + + + + + + + +
+

+ 进入网站首页 +
+ +
+
+
+
+
+ 账户登录 + 二维码登录 +
+
+
+ 手机验证码登录 +
+
+ + +
+
+ + +
+
+ + 我已同意 《服务条款》 和 《服务条款》 +
+
+ + + 忘记密码？ + 免费注册 +
+
+ +
+
+
+
+ +
+ +
+

+ 关于我们 + 帮助中心 + 售后服务 + 配送与验收 + 商务合作 + 搜索推荐 + 友情链接 +

+

CopyRight © 小兔鲜儿

+
+
+ + + + +regster.html + + + + + + 小兔鲜儿 - 新鲜 惠民 快捷! + + + + + + + + + + +
+
+ + +
+
+ +
+
+ +

小兔鲜儿

+ +
+ +
+ +
+ + + 2 + + +
+ +
+
+
+
+
+
+ +
+

新用户注册

+
+
+ + + +
+
+ + + +
+
+ + + + 发送验证码 +
+
+ + + +
+
+ + + +
+
+ + 已阅读并同意《用户服务协议》 +
+
+ + +
+
+
+
+
+ +
+
+ +
+
+
客户服务
+
在线客服
+ +
+
+
关注我们
+
公众号
+
微博
+
+
+
下载APP
+
+ +
+
+ 扫描二维码 + 立马下载APP + 下载页面 +
+
+
+
服务热线
+
+ 400-0000-000 + 周一至周日 8:00-18:00 +
+
+
+
+ +
+
+ +
+ 价格亲民 + 物流快捷 + 品质新鲜 +
+ +
+

+ 关于我们 + 帮助中心 + 售后服务 + 配送与验收 + 商务合作 + 搜索推荐 + 友情链接 +

+

CopyRight © 小兔鲜儿

+
+
+
+
+ + + + +``` + diff --git "a/30 \351\203\255\350\213\245\346\230\225/20231205 ajax.md" "b/30 \351\203\255\350\213\245\346\230\225/20231205 ajax.md" new file mode 100644 index 0000000000000000000000000000000000000000..8ef96dac17f08b0ef6c67dcd8a3fa7878186f07d --- /dev/null +++ "b/30 \351\203\255\350\213\245\346\230\225/20231205 ajax.md" @@ -0,0 +1,244 @@ +```js + + + + + + + + + + 购物车 + + + +
+ + + +
+ 🏠 + / + 购物车 +
+ +
+
+ +
+
+
选中
+
图片
+
单价
+
个数
+
小计
+
操作
+
+
+ +
+ + + + +
+
+ +
+ + +
+ + 总价  :  ¥ 24 + + +
+
+
+ + +
+ + + +``` + +```js + + + + + + Document + + + + + + +``` + diff --git "a/30 \351\203\255\350\213\245\346\230\225/20231207 axios.md" "b/30 \351\203\255\350\213\245\346\230\225/20231207 axios.md" new file mode 100644 index 0000000000000000000000000000000000000000..1e1c7458c0745994db2df40ee8e676c6f1c9c6de --- /dev/null +++ "b/30 \351\203\255\350\213\245\346\230\225/20231207 axios.md" @@ -0,0 +1,317 @@ +```js + + + + + + + + 聊天机器人 + + + + + + + + + + + + + + + + + + + +
+ +
+ 9:41 +
+ + + +
+
+ +
+ + 使劲夸夸 +
+ +
+ +
+ +
+ +
+
+ +
+ +
+ +
+ +
+
+
+ + + + + +``` + diff --git "a/30 \351\203\255\350\213\245\346\230\225/20231208\345\233\276\344\271\246\347\256\241\347\220\206.md" "b/30 \351\203\255\350\213\245\346\230\225/20231208\345\233\276\344\271\246\347\256\241\347\220\206.md" new file mode 100644 index 0000000000000000000000000000000000000000..66dda1e68dc24e424ce50b406d2ae20271e00e94 --- /dev/null +++ "b/30 \351\203\255\350\213\245\346\230\225/20231208\345\233\276\344\271\246\347\256\241\347\220\206.md" @@ -0,0 +1,180 @@ +```js +/** + * 目标1：图书列表 + * 1.获取数据 + * 2.渲染表格**/ + +//公用对象 +const tbody=document.querySelector('.list') +const creator='sss' +function getBook() { + //1.获取数据 + axios({ + url:'https://hmajax.itheima.net/api/books', + params:{ + creator + } + }).then(result=>{ + // console.log(result.data.data); + const bookList=result.data.data + const listStr= bookList.map((item,i)=>{ + //console.log(item); + const {id,author,bookname,publisher}=item + return` + ${i+1} + ${bookname} + ${author} + ${publisher} + + 删除 + 编辑 + + + ` + }).join('') +//console.log(listStr); +tbody.innerHTML=listStr + }) +} +//第一次打开网页就要加载一次 +getBook() +/** + * 目标2：添加功能 + * 1.显示或隐藏弹窗 + * 2.保存按钮点击事件 + * 3.收集表单数据 + * 4.调用接口提交数据 + * 5.提交数据，隐藏数据 + * 6.清空表单项 + * 7.成功的话，获取新数据并渲染**/ + +//创建弹窗对象 +const addBox=document.querySelector('.add-modal') //添加图书的弹窗对象 +const modal=new bootstrap.Modal(addBox) //modal对象，可以控制addBox显示或隐藏 +//获取要收集的表单对象 +const addForm=document.querySelector('.add-form') +//保存按钮点击事件 +document.querySelector('.add-btn').addEventListener('click',()=>{ + //收集表单数据 + const book=serialize(addForm,{hash:true,empty:true}) + //console.log(book); + //* 4.调用接口提交数据 + axios({ + url:'https://hmajax.itheima.net/api/books', + method:'post', + data:{ + ...book, + creator + } + + }).then(result=>{ + // console.log(result); + //隐藏弹窗 + modal.hide() + + //* 6.清空表单项 +addForm.reset() + // 7.成功的话，获取新数据并渲染 + getBook() + }) + +}) + +/** + * 目标3：删除图书 + * 1.给删除点击事件 + * 2.获取图书的id + * 3.通过id调用接口，删除对应的图书 + * 4.成功的话，获取新数据并渲染 +**/ + +//将点击委托给tbody +tbody.addEventListener('click',(e)=>{ + //删除对象两种方案 + //className==='del' + // classList.contains('del') + if (e.target.classList.contains('del')) { + //删除前要确认一下是否真的要删除 + //返回布尔值 + if (!confirm('确定删除？')) { + return //阻止往后运行 + } + console.log('你要删除'); + //获取图书的id + const id=e.target.parentNode.dataset.id + //调用接口 + axios({ + url:`https://hmajax.itheima.net/api/books/${id}`, + method:'delete' + }).then(result=>{ + // /成功的话，获取新数据并渲染 + getBook() + }) + + } +}) + +/** + * 目标4：编辑图书 + * 1.弹窗 + * 2.获取图书的id + * 3.通过id调用接口，获取对应的图书数据，回显到表单 + * 4.修改按钮点击事件 + * 5.收集表单数据 + * 6.调用接口提交数据 + * 7.提交数据，隐藏弹窗 + * 4.成功的话，获取新数据并渲染 +**/ + +//创建弹窗对象 +const editBox=document.querySelector('.edit-modal') //添加图书的弹窗对象 +const editmodal=new bootstrap.Modal(editBox) //modal对象，可以控制addBox显示或隐藏 +//获取要收集的表单对象 +const editForm=document.querySelector('.edit-form') +tbody.addEventListener('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; + + }) + + } +}) + const editBtn=document.querySelector('.edit-btn') + editBtn.addEventListener('click',()=>{ +// 收集表单数据 +const book=serialize(editForm,{hash:true,empty:true}) +const {id,author,bookname,publisher}=book +//console.log(book); +//* 4.调用接口提交数据 +axios({ + url:'https://hmajax.itheima.net/api/books/'+id , + method:'put', + data:{ + ...book, + creator + } + +}).then(result=>{ + // console.log(result); + //隐藏弹窗 + editmodal.hide() + // /成功的话，获取新数据并渲染 + getBook() + }) + }) + +``` \ No newline at end of file diff --git "a/30 \351\203\255\350\213\245\346\230\225/20231211 JQuery\345\233\276\344\271\246.md" "b/30 \351\203\255\350\213\245\346\230\225/20231211 JQuery\345\233\276\344\271\246.md" new file mode 100644 index 0000000000000000000000000000000000000000..7ca7fccb6cd8e2f63dacb7c8b6f2d22a5ca64d01 --- /dev/null +++ "b/30 \351\203\255\350\213\245\346\230\225/20231211 JQuery\345\233\276\344\271\246.md" @@ -0,0 +1,191 @@ +```js +// 目标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:()=>{ + + } + }) + +} +// 第一次打开网页，就要加载一次 +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:'https://hmajax.itheima.net/api/books', + type:'post', + data:{ + ...book, + creator + }, + success:(result=>{ + // console.log(result); + // 隐藏弹窗 + modal.hide() + // 清空表单项 + addForm.reset() + // 成功的话，获取新数据并渲染 + getBookAndShow() + }) + }) +}) + + + + +// 目标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() + }) + + }) + } + +}) + + +// 目标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; + + }) + + } +}) + +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() + }) +}) + +``` + diff --git "a/30 \351\203\255\350\213\245\346\230\225/20231212 JQuery\350\275\256\346\222\255\345\233\276+tab\346\240\217.md" "b/30 \351\203\255\350\213\245\346\230\225/20231212 JQuery\350\275\256\346\222\255\345\233\276+tab\346\240\217.md" new file mode 100644 index 0000000000000000000000000000000000000000..40f49c8e82eac2184d3ce394400ea765aa7c963a --- /dev/null +++ "b/30 \351\203\255\350\213\245\346\230\225/20231212 JQuery\350\275\256\346\222\255\345\233\276+tab\346\240\217.md" @@ -0,0 +1,188 @@ +# tab栏 + +```html + + + + + + + + 轮播图点击切换 + + + + +
+
+ +
+
+

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

+ +
+ + +
+
+
+``` + + + + + +# 轮播图 + +```html + + + + + + +``` + diff --git "a/30 \351\203\255\350\213\245\346\230\225/20231214 \345\244\215\344\271\2401.0.md" "b/30 \351\203\255\350\213\245\346\230\225/20231214 \345\244\215\344\271\2401.0.md" new file mode 100644 index 0000000000000000000000000000000000000000..42c362e6701ae5ca9e3534c550607f5f9832b725 --- /dev/null +++ "b/30 \351\203\255\350\213\245\346\230\225/20231214 \345\244\215\344\271\2401.0.md" @@ -0,0 +1,107 @@ +```js + +//数组解构 +const [a, b, c] = [1, 2, 3] +console.log(a) //1 +console.log(b) //2 +console.log(c) //3 +//解构嵌套对象 +const obj = { + a:1, + b:2, + c:{ + d:3, + e:4 + } +} +// 方法1： +const {a, b, {d, e}} = obj + +// 方法2： +const {a, b, c} = obj +const {d, e} = c //对c这个对象再进行一步解构 + + +//可扩展运算符 +const obj = { a:1, b:2, c:3, d:{e:4} } +const {a, b, ...rest} = obj // 意思是a, b解构出来，obj剩余参数则收拢在一起 +//只不过此时收拢后的结果不是数组，而是收拢在一起成为对象 +console.log(rest) //{c:3, d:{e:4}} +//拷贝 +const arr = [1, 2, 3] +const newArr = [...arr] +newArr.push(100) + +console.log(arr) // [1, 2, 3] +console.log(newArr) // [1, 2, 3, 100] + +/* + jquery事件： + 1.没有on，直接以js事件去掉相应的on即可 + 2.位置：ready()内 + ready(function){ + $("jquery选择器").事件类型(function(){ + 事件体... + }) + } + */ + $(document).ready(function(){ //可缩写为 $(function{}) + // 鼠标单击事件 + $("#myButton").click(function(){ + $("#myText").css("background-color","red"); + }) + })// ready()结束标记 +获得属性 $('').attr('属性名','属性值') + attr({"属性名":"属性值","属性名":"属性值","属性名":"属性值"})：设置多个属性值 + +``` + + + +```html +/*事件流 +1.捕获阶段（由大到小） +2.冒泡阶段（由小到大） +*/ + +
+
+
+ + +``` + + + +```js + +//事件委托 +const ul = document.querySelector('ul') + ul.addEventListener('click',function(e){ + /* + e 事件对象 + e.targrt 事件对象的点击目标 + e.targrt.tagName 点击目标的标签名称 + */ + if(e.targrt.tagName === 'LI'){ + e.targrt.style.color = 'red' + } + + }) +``` + diff --git "a/30 \351\203\255\350\213\245\346\230\225/20231215 \345\244\215\344\271\2402.0.md" "b/30 \351\203\255\350\213\245\346\230\225/20231215 \345\244\215\344\271\2402.0.md" new file mode 100644 index 0000000000000000000000000000000000000000..7ce6bdb49496a822995265b2ab8174f17ee6e099 --- /dev/null +++ "b/30 \351\203\255\350\213\245\346\230\225/20231215 \345\244\215\344\271\2402.0.md" @@ -0,0 +1,1247 @@ +# 变量 + +变量命名规范 + +1. JS变量名可以使用下划线，数字，字母，$组成 +2. 变量以字母 $ 和 _ 符号开头 +3. 不能使用关键字和保留字命名 +4. 严格区分大小写 + +声明变量 + +``` +var 变量名; +let 变量名; +const 变量名; +``` + +# 数据类型 + +JS 的数据类型有: 字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)、Symbol JS 的对象类型有: 对象(Object)、数组(Array)、函数(Function) 还有两个特殊的对象：正则（RegExp）和日期（Date） + +##### 数字类型 + +JS 中的数值类型相当于 python 里面的 整型int 和 浮点型float ，但是 JS 只有一种数字类型。数字可以带小数点，也可以不带。NaN是 Not A Number 的简称，表示其不是一个数字 + +| isNaN() | 判断某个值是否是数字 | +| ------------------ | ------------------------------------------------------------ | +| Number() | 把对象的值转换为数字。 | +| new Number() | 创建 Number 对象 | +| parseInt() | 解析一个字符串并返回一个整数。 | +| toFixed() | 将数字四舍五入，括号内是保留的位数，但是使用后数字会转换为字符串 | +| toPrecision() | 将数字四舍五入到指定的长度。 | +| Number.isInteger() | 用来判断给定的参数是否为整数 | + +##### String类型 + +JavaScript 中的字符串必须被括在引号里，有三种包含字符串的方式。 + +双引号："Hello" 单引号：'Hello’ 反引号：`Hello` + +##### 字符串使用操作 + +1.字符串拼接，通过+运算符 + +``` +var str1="hello" +var str2="world" +var newstr=str1 + str2 +``` + +2.获取字符串长度 + +``` +console.log(newstr.length) +``` + +##### Boolean类型 + +Boolean 类型仅包含两个值：true 和 false + +##### Undefined类型 + +如果我们声明一个变量，但是没有对其进行初始化时，它默认就是undefined； + +注意：1.最好在变量定义的时候进行初始化，而不只是声明一个变量 + +2.不要显示的将一个变量赋值为undefined，如果变量刚开始什么都没有，我们可以初始化为0、空字符串、null等值 + +##### Object类型 + +是一个特殊的类型，引用类型或者复杂类型，其他的数据类型我们通常称之为 “原始类型”，因为它们的值质保函一个单独的内容（字符串、数字或者其他）。 + +Object往往可以表示一组数据，是其他数据的一个集合 + +``` +// 在JavaScript中我们可以使用 花括号{} 的方式来表示一个对象； +var info={ + name:"why", + age:18, + height:1.88 +} +``` + +##### Null类型 + +Null 类型同样只有一个值，即特殊值 null。null类型通常用来表示一个对象为空，所以通常我们在给一个对象进行初始化时，会赋值为null + +##### 字符串String的转换 + +1.隐式转换 + +1)一个字符串和另一个字符串进行+操作； + +如果+运算符左右两边有一个是字符串，那么另一边会自动转换成字符串类型进行拼接 + +2)某些函数的执行也会自动将参数转为字符串类型, 比如console.log函数 + +2.显式转换 + +调用String()函数 + +调用toString()方法 + +##### 数字类型Number的转换 + +1.隐式转换 + +在算数运算中，通常会将其他类型转换成数字类型来进行运算； 比如 "6" / "2"； 但是如果是+运算，并且其中一边有字符串，那么还是按照字符串来连接的； + +2.显式转换 + +使用Number()函数来进行显式的转换 + +3.其他类型转换数字的规则 + +| 值 | 转换后的值 | +| ------------- | ------------------------------------------------------------ | +| undefined | NaN | +| null | 0 | +| true 和 false | 1 and 0 | +| string | 去掉首尾空格后的纯数字字符串中含有的数字。如果剩余字符串为空，则转换结 果为 0。否则，将会从剩余字符串中“读取”数字。当类型转换出现 error 时返 回 NaN | + +##### 布尔类型Boolean的转换 + +| 值 | 转化后 | +| --------------------------- | ------ | +| 0, null, undefined, NaN, "" | false | +| 其他值 | true | + +注意：包含 0 的字符串 "0" 是 true + +#### typeof操作符 + +用于确定任意变量的数据类型 + +对一个值使用 typeof 操作符会返回下列字符串之一: + +"undefined"表示值未定义; + +"boolean"表示值为布尔值; + +"string"表示值为字符串; + +"number"表示值为数值; + +"object"表示值为对象(而不是函数)或 null; + +"function"表示值为函数; + +“symbol”表示值为符号； + + + + + + + + + +# 运算符 + +##### 逻辑运算符 + +&& 逻辑与 一假则假 + +|| 逻辑非 一真则真 + +！真变假，假变真 + +优先级：!>&&>|| + +##### 比较运算符 + +=== 左右两边是否类型，值都相等 + +== 值是否相等 + +##### 三元运算符 + +``` +var result = condition ? value1 : value2; +``` + + + +# 分支结构 + +##### if...else + +``` +if(条件1){ +}else if(条件2){ +}else{} +``` + +##### switch语句 + +``` +switch(变量){ +case 常量1; +break +case 常量2; +break +default; +} +``` + +# 数组 + +js数组灵活，长度不固定，类型也不固定，取一个数组不存在的索引时，不会报错，而是undefined + +``` +let scores=[85,90,75] +scores[4]=10; +console.log(scores); // 85,90,75,empty,10 +// 如何得到一个数组长度 +console.log(scores.length); +``` + +##### 操作数组 + +| push | 向数组尾部添一个单元 | +| ------- | -------------------------------- | +| unshift | 向数组头部添一个单元 | +| pop | 删除最后一个单元，将删除单元返回 | +| shift | 删除第一个单元，将删除单元返回 | +| splice | 删除任意单元，将删除单元返回 | + + + +### splice + +splice(起始位置， 删除的个数) + +``` +// 删除数组 +let arr = ['red', 'green', 'blue'] +arr.splice(1,1) // 删除green元素 +console.log(arr) // ['red, 'blue'] +``` + +splice(起始位置，删除个数，添加数组元素) + +``` +// 添加元素 +let arr = ['red', 'green', 'blue'] +//arr.splice(1, 0, 'qq') // 在索引号是1的位置添加 qq +//console.log(arr) // ['red', 'qq', 'green', 'blue'] +``` + + + +# 函数 + +``` +function 函数名(参数列表){ // 多个数据用，隔开 + 函数体 + 返回值 +} +// 调用函数： +函数名() +//调用传递参数顺序要和实参顺序一样。当函数没有返回值时，默认返回值为undefined +``` + +##### 作用域 + +全局作用域：作用域 +``` + +如何对一个对象的属性进行增删改查 + +1.查属性两种方式 + +1).对象名.属性名 2).对象名['属性名'] + +2.增：对象名.新属性名=值 + +3.改：直接赋值 + +4.删：delete 对象名.属性名 + +操作方法和属性方式一样，多了() + +查：1).对象名.方法名 2).对象名['方法名'] + +如何遍历一个对象的属性或方法及对应的值 + +``` +for(let k in stu) { //将属性，方法的名赋值给k + // k 属性名 例如 name,age,sex 这些属性名 + // stu[k] 根据属性名查属性值 例如stu[age],查到的是18 因为k是变量，所以要用[] + console.log(k); // 属性名 + console.log(stu[k]); //属性值 +} +``` + + + +# Web APIs + +Web APIs 的核心是 DOM 和 BOM + +##### document + +``` + +``` + +获取DOM对象 + +1. querySelector 满足条件的第一个元素 CSS选择器 class . id # +2. querySelectorAll 满足条件的元素集合 返回伪数组 + +``` + +``` + +document.getElementById 专门获取元素类型节点，根据标签的 `id` 属性查找 + +##### 操作元素内容 + +1. innerText 将文本内容添加/更新到任意标签位置，文本中包含的标签不会被解析。 +2. innerHTML将文本内容添加/更新到任意标签位置，文本中包含的标签会被解析。 如果文本内容中包含 html标签时推荐使用 innerHTML，否则建议使用 innerText 属性。 + +##### 控制样式属性 + +1. 应用【修改样式】，通过修改行内样式 `style` 属性，实现对样式的动态修改。 +2. 操作类名(className) 操作CSS +3. 通过 classList 操作类控制CSS + +##### 操作表单元素属性 + +获取:DOM对象.属性名 + +设置:DOM对象.属性名= 新值 + +##### 自定义属性值 + +标准属性：标签自带属性：class，id，title等 + +可直接使用点语法操作：disabled，checked，selected + +自定义属性值：data-自定义属性 在标签上以data-开头 + +在dom对象上以dataset对象方式获取 + +# 伪类选择器 + +``` +first-child{} +last-child{} +nth-child(n){} +nth-child(n){} +nth-child(2n){} +nth-child(even){} +nth-child(2n+1){} +``` + +生成随机数 + +``` + function random(n,m){ + return Math.floor(Math.random()*(m-n+1))+n; + } +``` + +# 定时器 + +setInterval()：每隔一段时间执行一段代码（间隔执行） + +``` +setInterval(匿名函数，间隔时间) +setInterval(function(){},1000) +// 关闭定时器 +clearinterval(表示定时器变量) +``` + +# 事件监听 + +为DOM元素添加事件监听，等待事件发生，便立刻执行一个函数 + +##### 添加事件监听对象 + +add 添加 Event 事件 Listener 监听器 + +`addEventListener` 是 DOM 对象专门用来添加事件监听的方法，它的两个参数分别为【事件类型】和【事件回调】。 + +事件类型：鼠标事件，键盘事件，表单事件，焦点事件 + +###### 1.鼠标事件 + +click 单击 + +dblclick 双击 doubleClick + +mouseenter 鼠标移入 + +mouseleave 鼠标离开 + +###### 2.键盘事件 + +keyDown 键盘被按下 + +keyUp 键盘按下后被抬起 + +###### 3.焦点事件 + +focus 获得焦点 + +flur 失去焦点 + +###### 4.表单事件 + +input 文本框输入事件 + +# 事件对象 + +包含事件触发时相关信息的对象，比如用户按下哪个键、鼠标点击哪个元素 + +``` +//事件绑定的回调函数的第一个参数就是事件对象 +//e就是事件对象 +元素.addEventListener('click',function(e){ + +}) +``` + +# 环境对象 + +this .环境对象 + +浏览器所有的函数默认是window对象来调用的 + +# 属性选择器 + +[type=search] [属性名=值] + +## + +# 事件流 + +1.捕获（大-小） + +2.冒泡（小-大） + +##### 如何阻止冒泡 + +``` +//添加事件对象 +son.addEventListener('click', function (e) { + alert('我是儿子') + // 阻止流动传播 事件对象.stopPropagation() + e.stopPropagation() + } +``` + +##### 鼠标经过事件 + +mouseover 和 mouseout 会有冒泡效果 + +mouseenter 和 mouseleave 没有冒泡效果 (推荐) + +#### 阻止默认对象 + +变量.preventDefault() + +# 页面加载事件 + +load 等所有网页元素加载完毕后再触发： + +``` +window.addEventListener('load', function() { + // xxxxx +}) +``` + +# 页面滚动事件 + +scroll 只要滚动条有变化，就触发该事件 + +scrollTo(x,y) 定位到 + +``` +window.addEventListener('scroll', function() { + // xxxxx +}) +//想知道页面滚动了多少 +console.log(document.documentElement.scrollTop) +``` + +##### 页面尺寸事件 + +resize 尺寸改变事件，对象可以是window，可以是具体的对象元素 + +``` +window.addEventListener('resize', function() { + // xxxxx +}) +``` + +##### 元素尺寸与位置 + +获得元素对象的宽度 clientWidth 包括盒子本身的宽度+padding，不含边框 + +获得元素对象的高度 clientHeight 包括盒子本身的高度+padding，不含边框 + +##### 偏移量 + +offsetLeft/offsetTop/offsetWidth 内容+内边距+边框 + +# 实例化 + +``` + // const date = new Date(); // 系统默认时间 +//分别获取年、月、日，时、分、秒 +getFullYear 获取四位年份 +getMonth 获取月份，取值为 0 ~ 11 +getDate 获取月份中的每一天（当天），不同月份取值也不相同 +getDay 获取星期，取值为 0 ~ 6 +getHours 获取小时，取值为 0 ~ 23 +getMinutes 获取分钟，取值为 0 ~ 59 +getSeconds 获取秒，取值为 0 ~ 59 +``` + +# 时间戳 + +``` +//获得当前时间的时间戳 + +1.const time=new Date().getTime() +2.+new Date() +console.log(+new Date()) +3.Date.now() +//获得指定时间戳 +1.const time1=new Date('2018-10-10 15:30:00').getTime() +2.console.log(+new Date('2018-10-10 15:30:00')) +``` + +# 节点 + +##### 父节点 + +通过子元素，子对象，子节点找父元素，父对象，父节点 + +子节点.parentNode + +##### 子节点 + +通过父元素，父对象，父节点找子元素，子对象，子节点 + +父节点.children + +##### 兄弟节点 + +子节点.previousElementSibling 前一个兄弟节点 + +子节点.nextElementSibling 后一个兄弟节点 + +##### 增加节点 + +1个对象只能加一次 + +父节点.appendChild(子节点) 表示在父节点末尾追加一个新的子节点 + +父节点.insertBefore(新子节点，哪个子节点前面插入) + +##### 克隆节点 + +要被克隆的对象.cloneNode（true/false） + +true：标签内容一起克隆 false：只克隆标签 + +##### 删除节点 + +父节点.removeChild（子节点） + + + + + +# 延迟函数 + +```js +setTimeout(回调函数, 延迟时间) +//清除延时函数 +clearTimeout(timerId) +``` + + + +# location对象 + +| 属性/方法 | 说明 | +| --------- | ---------------------------------------------------- | +| href | 属性，获取完整的 URL 地址，赋值时用于地址的跳转 | +| search | 属性，获取地址中携带的参数，符号 ？后面部分 | +| hash | 属性，获取地址中的啥希值，符号 # 后面部分 | +| reload() | 方法，用来刷新当前页面，传入参数 true 时表示强制刷新 | + +##### navigator对象 + +``` + const userAgent = navigator.userAgent +``` + +##### histroy对象 + +``` + + + + + +``` + +##### localStorage + +``` + + + +``` + +JSON字符串： + +``` + // 1. 把对象转换为JSON字符串 JSON.stringify + localStorage.setItem('goods', JSON.stringify(goods)) + // console.log(typeof localStorage.getItem('goods')) +// 2. 把JSON字符串转换为对象 JSON.parse +console.log(JSON.parse(localStorage.getItem('goods'))) +``` + +数组map 方法 + +``` + +``` + +数组join方法 + +``` + +``` + + + + + +# 正则 + +1. 定义规则 + +``` +const reg = /表达式/ +``` + +``` + +``` + +##### 元字符 + +1.普通字符 只能够匹配字符串中与它们相同的字符。 + +2.边界符:^行首，$行尾 3.量词*前面的字符都连续出现次数 >= 0 次 4.+ 重复次数 >= 1 次 5.? 重复次数 0 || 1 6.{n} 重复 n 次 7.{n,} 重复次数 >= n 8.{n,m} n =< 重复次数 <= m + +##### 范围 + +表示字符的范围，定义的规则限定在某个范围，比如只能是英文字母，或者数字等等，用表示范围 + +``` + // 1. [abc] 匹配包含的单个字符， 多选1 + // 2. [a-z] 连字符 单个 + // 想要包含小写字母，大写字母 ，数字 + // 用户名可以输入英文字母，数字，可以加下划线，要求 6~16位 + // 3. [^a-z] 取反符 +``` + +##### 字符类 + +小写匹配，大写排除 + +| 简写 | 说明 | +| ---- | ---------------------------- | +| \d | 表示[0,9] | +| \D | 表示除0-9以外的字符 | +| \w | 表示[a-zA-Z0-9_]中的任意字符 | +| \W | 表示[a-zA-Z0-9_]以外的的字符 | +| \s | 表示各种空格 | +| \S | 表示非空格 | + +##### 替换和修饰符 + +replace 替换方法，可以完成字符的替换 + +``` +字符串.replace（/正则表达式/,'替换的文本') +``` + +忽略大小写i，全局匹配g + + + + + + + +# 作用域 + +##### 函数作用域 + +在函数内部声明的变量只能在函数内部被访问，外部无法直接访问。 + +``` + +``` + +##### 块作用域 + +在 JavaScript 中使用 `{}` 包裹的代码称为代码块，代码块内部声明的变量外部将【有可能】无法被访问。 + +``` + +``` + +##### 闭包 + +闭包是一种比较特殊和函数，使用闭包能够访问函数作用域中的变量 + +``` + function outer() { + let count = 1 + function fn() { + count++ + console.log(`函数被调用${count}次`) + } + return fn + } + const re = outer() +``` + +##### 变量提升 + +1. 变量在未声明即被访问时会报语法错误 +2. 变量在声明之前即被访问，变量的值为 undefined + +##### 动态参数 + +arguments 是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参。 + +``` + +``` + +##### 剩余参数 + +``` + +``` + +箭头函数 + +``` +const fn = (x) => { + console.log(x) +} + fn(1) +``` + +只有一行代码的时候，我们可以省略大括号，return 箭头函数中没有 `arguments`，只能使用 `...` 动态获取实参 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。 + +数组解构 + +``` + +``` + +filter筛选数组 + +filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素 + +``` + + + +``` + +# 数组reduce方法 + +数组.reduce（function（累计值，当前元素）{运算过程}，起始值） + +# Array常用方法 + +find（） 返回第一次满足过滤方法的元素，一个都没有就返回untifined + +indexOf（） 返回下标 + +every（）每个是否都符合条件，都符合true，否则false + +# 伪数组转换成真数组 + +数组名.from() + +# toFixed + +让数字保留指定的小数位数，会四舍五入 + +# 实例成员 + +通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员。 + +构造函数特点：由new创建，开头字母大写的函数 + +``` + +``` + +# 静态成员 + +静态是由类共享的，静态方法的赋取值只能通过构造函数名 + +``` + +``` + +# Object + +`Object` 是内置的构造函数，用于创建普通对象。 + +``` + +``` + +### + +# 基本包装类型 + +``` + +``` + +# Ajax + +是由JavaScript、XML、DOM、CSS等多种已有技术组合而成的一种浏览器端技术。用于实现与服务器进行异步交互的功能。用js来实现页面的局部刷新。 + +##### 创建Ajax对象 + +``` + const 变量 = new XMLHttpRequest(); +``` + +##### Ajax向服务器发送请求 + +``` +//2.open(通讯方式，网址，同步/异步) //get post put patch delete + ajax.open('get',url) + //3.send()发送请求 + ajax.send() +``` + +##### 同步请求与异步请求 + +异步方式：浏览器端的JavaScript程序不用等待Web服务器响应，可以继续处理其他事情。当服务器响应后，再来处理Ajax对象获取到的响应结果。 + +同步方式：当Ajax对象向Web服务器发送请求后，会等待Web服务器响应的数据接收完成，再继续执行后面的代码。 + +##### 处理服务器返回的信息 + +| 状态值 | 说明 | 解释 | +| ------ | ---------- | ------------------------------------------------------------ | +| 0 | 未发送 | 对象已创建，尚未调用 open （）方法 | +| 1 | 已打开 | open (）方法已调用，此时可以调用 send (）方法发起 | +| 2 | 收到响应头 | 请求 send (）方法已调用，响应头也已经被接收 | +| 3 | 数据接收中 | 响应体部分正在被接收。 responseText 将会在载入的过程中拥有部分响应数据数据接收完毕。 | +| 4 | 完成 | 此时可以通过 responseText 获取完整的响应 | + +##### 获取服务器的响应信息 + +| 属性名 | 说明 | +| ------------ | -------------------------------------------------- | +| responseText | 将响应信息作为字符串返回 | +| responseXML | 将响应信息格式化为 XML Document 对象并返回（只读） | + +# axios + +``` +//调用axios参数，参数是一个对象，这个对象包括url属性，表示要调用的数据服务器的网址，结果会在then()里返回，()里的参数是回调函数 +axios({ + url: 'http://hmajax.itheima.net/api/register', + // 指定请求方法 + method: 'post', //提交数据到服务器 + data: { + 参数名：值 //当属姓名和vlaue位置变量名同名可简写 + } + }).then(result => { + console.log(result) + }).catch(error => { + // 捕获请求响应的错误并做后续处理 + // console.log(error) + console.log(error.response.data.message) + // alert(error.response.data.message) + }) + }) +``` + +##### 常用请求方法和数据提交 + +| 请求方法 | 说明 | +| -------- | ---------------- | +| Get | 获取数据 | +| post | 数据提交 | +| put | 修改数据（全部） | +| patch | 修改数据（部分） | +| delete | 删除数据 | + +##### ajax()方法常用参数列表 + +type + +设置请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。 + +async + +设置是否异步，默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。 + +url + +发送请求的地址 + +data + +请求到服务器的参数，将自动转换为请求字符串格式，格式：{参数名1:值1,参数名2:值2.....} + +success + +要求为Function类型的参数，请求成功后调用的回调函数，格式：function(data[, textStatus]){} ，data：由服务器返回，并根据dataType参数进行处理后的数据，textStatus描述状态的字符串，可以省略。 + +error + +要求为Function类型的参数，请求失败时被调用的函数。function(){alert('服务器异常!')} + +dataType + +预期服务器返回的数据类型。可选值为：text,json,xml,html,script,jsonp + +complete + +要求为Function类型的参数，请求完成后调用的回调函数（无论请求成功或失败时均调用）。 + +# jquery + +#### 一.基础选择器 + +#### 二.层级选择器 + +1. 子代选择器 + +``` +//子元素选择器指的是通过父元素(parent)获取其下的指定子元素(child)。 +$('#dv >p').css('backgroundColor', 'red'); +``` + +2.后代选择器 + +后代元素与子元素的区别在于，后代元素不仅包括子元素,还包括子元素下的所有其他元素。 + +``` +$('#dv p').css('backgroundColor', 'red'); +``` + +3.兄弟选择器 + +通过兄弟选择器可以获取指定元素的兄弟元素，兄弟元素可以理解为同辈元素或同级元素。 + +``` +$('#dv + p').css('backgroundColor', 'red'); +``` + +若要获取指定元素后的所有兄弟元素，可以在选择器中使用符号“~” + +``` +$('#dv ~ p').css('backgroundColor', 'red'); +``` + +#### 三.过滤选择器 + +1.基本筛选器 + +2.内容筛选器 + +3.属性筛选器 + +4.可见性 + +5.子元素 + +#### 四.表单选择器 + + +