佛山市住房与城乡建设局网站,网站源码爬取工具,做公益网站需要哪些部门认证,原创主题 wordpress随机点名案例
业务分析:
点击开始按钮随机抽取数组中的一个数据,放到页面中点击结束按钮删除数组当前抽取的一个数据当抽取到最后一个数据的时候,两个按钮同时禁用(只剩最后一个数据不用抽了)
核心:利用定时器快速展示,停止定时器结束展示
!DOCTYPE html
html…随机点名案例
业务分析:
点击开始按钮随机抽取数组中的一个数据,放到页面中点击结束按钮删除数组当前抽取的一个数据当抽取到最后一个数据的时候,两个按钮同时禁用(只剩最后一个数据不用抽了)
核心:利用定时器快速展示,停止定时器结束展示
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}h2 {text-align: center;}.box {width: 600px;margin: 50px auto;display: flex;font-size: 25px;line-height: 40px;}.qs {width: 450px;height: 40px;color: red;}.btns {text-align: center;}.btns button {width: 120px;height: 35px;margin: 0 50px;}/style
/headbodyh2随机点名/h2div classboxspan名字是/spandiv classqs这里显示姓名/div/divdiv classbtnsbutton classstart开始/buttonbutton classend结束/button/divscript// 数据数组const arr [马超, 黄忠, 赵云, 关羽, 张飞]const qsdocument.querySelector(.qs)// 业务1. 开始按钮模块// 1.1 获取开始按钮对象\let timerId0let random0const start document.querySelector(.start)//1.2添加点击事件start.addEventListener(click,function(){timerId setInterval(function(){//随机数randomparseInt(Math.random()*arr.length)// console.log(arr[random])qs.innerHTMLarr[random]},35)//如果数组中只剩一个值,就不需要抽取了,让两个按钮禁用即可if(arr.length1){start.disabledtrueend.disabledtrue}})// 2.关闭按钮模块const enddocument.querySelector(.end)end.addEventListener(click,function(){//关闭定时器clearInterval(timerId)//结束之后 可以删除掉当前抽取的那个数组元素arr.splice(random,1)console.log(arr)})/script
/body/html
事件监听版本
DOML0 事件源.on事件function(){} const btndocument.querySelector(button)btn.onclickfunction(){alert(11)}
DOML2 事件源.addEventListener(事件,事件处理函数) 区别:
on方式会被覆盖,addEventListener方式可绑定多次,拥有事件更多特性,推荐使用
事件类型
鼠标事件
鼠标触发
click 鼠标点击mouseenter 鼠标经过mouseleave 鼠标离开
焦点事件
表单获得光标
focus 获得焦点blur 失去焦点 const inputdocument.querySelector(input)input.addEventListener(focus,function(){console.log(有焦点触发)})input.addEventListener(blur,function(){console.log(失去焦点触发)})
键盘事件
键盘触发
Keydown 键盘按下触发Keyup 键盘抬起触发 // 1. 键盘事件const inputdocument.querySelector(input)input.addEventListener(keydown,function(){console.log(键盘按下了)})input.addEventListener(keyup,function(){console.log(键盘弹起了)})// 2.用户输入文本事件 inputinput.addEventListener(input,function(){console.log(input.value)//获取输入内容})
文本事件
表单输入触发
input 用户输入事件
轮播图点击切换
需求:当点击左右的按钮,可以切换轮播图
分析:
右侧按钮点击,变量,如果大于等于8,则复原0左侧按钮点击,变量--,如果小于0,则复原最后一张鼠标经过暂停计时器鼠标离开开启定时器
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title轮播图点击切换/titlestyle* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}/style
/headbodydiv classsliderdiv classslider-wrapperimg src./images/slider01.jpg alt //divdiv classslider-footerp对人类来说会不会太超前了/pul classslider-indicatorli classactive/lili/lili/lili/lili/lili/lili/lili/li/uldiv classtogglebutton classprevlt;/buttonbutton classnextgt;/button/div/div/divscript// 1. 初始数据const Data [{ 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) },]//获取元素const imgdocument.querySelector(.slider-wrapper img)const pdocument.querySelector(.slider-footer p)const footerdocument.querySelector(.slider-footer)// 1.右按钮业务// 1.1 获取右侧按钮const nextdocument.querySelector(.next)let i0// 1.2 注册点击事件next.addEventListener(click,function(){// console.log(11)i// 1.6 判断条件 如果大于8 就复原为0iiData.length?0:i// 1.3得到对应的对象// console.log(Data[i])img.srcData[i].urlp.innerHTMLData[i].titlefooter.style.backgroundColorData[i].color// 1.5 更换小圆点 先移除原来的类名 当前li再添加 这个类名document.querySelector(.slider-indicator .active).classList.remove(active)document.querySelector(.slider-indicator li:nth-child(${i1})).classList.add(active)})// 1.右按钮业务// 1.1 获取左侧按钮const prevdocument.querySelector(.prev)prev.addEventListener(click,function(){// console.log(11)i--// 1.6 判断条件 如果小于0 则跑到最后一张图片索引号是7ii0?Data.length-1:i// 1.3得到对应的对象// console.log(Data[i])img.srcData[i].urlp.innerHTMLData[i].titlefooter.style.backgroundColorData[i].color// 1.5 更换小圆点 先移除原来的类名 当前li再添加 这个类名document.querySelector(.slider-indicator .active).classList.remove(active)document.querySelector(.slider-indicator li:nth-child(${i1})).classList.add(active)})//3.自动播放模块let timerIdsetInterval(function(){//利用js自动调用点击事件 click必须加()next.click()},1000)// 4.鼠标经过大盒子,停止定时器const sliderdocument.querySelector(.slider)//注册事件slider.addEventListener(mouseenter,function(){//停止定时器clearInterval(timerId)})// 5.鼠标离开大盒子,开启定时器slider.addEventListener(mouseleave,function(){//开启定时器timerIdsetInterval(function(){//利用js自动调用点击事件 click必须加()next.click()},1000)})/script
/body/html
可以将左右按钮的公共样式写到一个函数中,需要时直接调用即可
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title轮播图点击切换/titlestyle* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}/style
/headbodydiv classsliderdiv classslider-wrapperimg src./images/slider01.jpg alt //divdiv classslider-footerp对人类来说会不会太超前了/pul classslider-indicatorli classactive/lili/lili/lili/lili/lili/lili/lili/li/uldiv classtogglebutton classprevlt;/buttonbutton classnextgt;/button/div/div/divscript// 1. 初始数据const Data [{ 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) },]//获取元素const imgdocument.querySelector(.slider-wrapper img)const pdocument.querySelector(.slider-footer p)const footerdocument.querySelector(.slider-footer)// 1.右按钮业务// 1.1 获取右侧按钮const nextdocument.querySelector(.next)let i0// 1.2 注册点击事件next.addEventListener(click,function(){// console.log(11)i// 1.6 判断条件 如果大于8 就复原为0iiData.length?0:itoggle()})// 1.右按钮业务// 1.1 获取左侧按钮const prevdocument.querySelector(.prev)prev.addEventListener(click,function(){// console.log(11)i--// 1.6 判断条件 如果小于0 则跑到最后一张图片索引号是7ii0?Data.length-1:itoggle()})//声明一个渲染函数作为复用function toggle(){// 1.3得到对应的对象// console.log(Data[i])img.srcData[i].urlp.innerHTMLData[i].titlefooter.style.backgroundColorData[i].color// 1.5 更换小圆点 先移除原来的类名 当前li再添加 这个类名document.querySelector(.slider-indicator .active).classList.remove(active)document.querySelector(.slider-indicator li:nth-child(${i1})).classList.add(active)}//3.自动播放模块let timerIdsetInterval(function(){//利用js自动调用点击事件 click必须加()next.click()},1000)// 4.鼠标经过大盒子,停止定时器const sliderdocument.querySelector(.slider)//注册事件slider.addEventListener(mouseenter,function(){//停止定时器clearInterval(timerId)})// 5.鼠标离开大盒子,开启定时器slider.addEventListener(mouseleave,function(){//开启定时器timerIdsetInterval(function(){//利用js自动调用点击事件 click必须加()next.click()},1000)})/script
/body/html
小米搜索框案例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;}ul {list-style: none;}.mi {position: relative;width: 223px;margin: 100px auto;}.mi input {width: 223px;height: 48px;padding: 0 10px;font-size: 14px;line-height: 48px;border: 1px solid #e0e0e0;outline: none;}.mi .search {border: 1px solid #ff6700;}.result-list {display: none;position: absolute;left: 0;top: 48px;width: 223px;border: 1px solid #ff6700;border-top: 0;background: #fff;}.result-list a {padding: 6px 15px;font-size: 12px;color: #424242;text-decoration: none;}.result-list a:hover {background-color: #eee;}/style/headbodydiv classmiinput typesearch placeholder小米笔记本ul classresult-listlia href#全部商品/a/lilia href#小米11/a/lilia href#小米10S/a/lilia href#小米笔记本/a/lilia href#小米手机/a/lilia href#黑鲨4/a/lilia href#空调/a/li/ul/divscriptconst inputdocument.querySelector([typesearch])const uldocument.querySelector(.result-list)console.log(input)// 2.监听事件 获得焦点input.addEventListener(focus,function(){ul.style.displayblockinput.classList.add(search)})//3.监听事件 失去焦点input.addEventListener(blur,function(){ul.style.displaynoneinput.classList.remove(search)})/script
/body/html
评论字数统计
需求:用户输入文字,可以计算用户输入的字数
分析:
判断用输入事件 input不断取得文本框里的字符长度,文本域.value.length把获得数字给下面文本框
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title评论回车发布/titlestyle.wrapper {min-width: 400px;max-width: 800px;display: flex;justify-content: flex-end;}.avatar {width: 48px;height: 48px;border-radius: 50%;overflow: hidden;background: url(./images/avatar.jpg) no-repeat center / cover;margin-right: 20px;}.wrapper textarea {outline: none;border-color: transparent;resize: none;background: #f5f5f5;border-radius: 4px;flex: 1;padding: 10px;transition: all 0.5s;height: 30px;}.wrapper textarea:focus {border-color: #e4e4e4;background: #fff;height: 50px;}.wrapper button {background: #00aeec;color: #fff;border: none;border-radius: 4px;margin-left: 10px;width: 70px;cursor: pointer;}.wrapper .total {margin-right: 80px;color: #999;margin-top: 5px;opacity: 0;transition: all 0.5s;}.list {min-width: 400px;max-width: 800px;display: flex;}.list .item {width: 100%;display: flex;}.list .item .info {flex: 1;border-bottom: 1px dashed #e4e4e4;padding-bottom: 10px;}.list .item p {margin: 0;}.list .item .name {color: #FB7299;font-size: 14px;font-weight: bold;}.list .item .text {color: #333;padding: 10px 0;}.list .item .time {color: #999;font-size: 12px;}/style
/headbodydiv classwrapperi classavatar/itextarea idtx placeholder发一条友善的评论 rows2 maxlength200/textareabutton发布/button/divdiv classwrapperspan classtotal0/200字/span/divdiv classlistdiv classitem styledisplay: none;i classavatar/idiv classinfop classname清风徐来/pp classtext大家都辛苦啦感谢各位大大的努力能圆满完成真是太好了[笑哭][支持]/pp classtime2022-10-10 20:29:21/p/div/div/div
scriptconst txdocument.querySelector(#tx)const totaldocument.querySelector(.total)// 1. 当文本域获得了焦点,就让total显示出来
tx.addEventListener(focus,function(){total.style.opacity1
})//2. 当文本域失去了焦点,就让total隐藏tx.addEventListener(blur,function(){total.style.opacity0
})
//3.检测用户输入
tx.addEventListener(input,function(){//console.log(tx.value.length) 得到输入的长度total.innerHTML${tx.value.length}/200字
})
/script
/body/html
事件对象
获取事件对象
事件对象是什么
也是个对象,这个对象里有事件触发时的相关信息
例如:鼠标点击事件中,事件对象就存了鼠标点在哪个位置等信息
使用场景
可以判断用户按下哪个键,比如按下回车键可以发布新闻
可以判断鼠标点击了哪个元素,从而做出相应的操作
语法:
在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event,ev,e 元素.addEventListener(click,function(e)){}事件对象常用属性
type:获取当前的事件类型clientX/clientY:获取光标对于浏览器可见窗口左上角的位置offsetX/offsetY:获取光标相对于DOM元素左上角的位置key:用户按下的键盘键的值,不提倡使用keyCode
trim方法
作用去除字符串两边的空格中间的空格保留 const str pinkconsole.log(str.trim())
评论回车发布
需求按下回车键可以发布信息
用到按下键盘事件keydown或者keyup都可以如果用户按下的是回车键盘则发布信息让留言信息模块显示把拿到的数据渲染到对应标签内部 小tip用户按下回车之后input文本框里的文字会清除且若用户输出的全为空格则不输出输出结果去除用户内容左右两端的空格 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title评论回车发布/titlestyle.wrapper {min-width: 400px;max-width: 800px;display: flex;justify-content: flex-end;}.avatar {width: 48px;height: 48px;border-radius: 50%;overflow: hidden;background: url(./images/bg01.jpg) no-repeat center / cover;margin-right: 20px;}.wrapper textarea {outline: none;border-color: transparent;resize: none;background: #f5f5f5;border-radius: 4px;flex: 1;padding: 10px;transition: all 0.5s;height: 30px;}.wrapper textarea:focus {border-color: #e4e4e4;background: #fff;height: 50px;}.wrapper button {background: #00aeec;color: #fff;border: none;border-radius: 4px;margin-left: 10px;width: 70px;cursor: pointer;}.wrapper .total {margin-right: 80px;color: #999;margin-top: 5px;opacity: 0;transition: all 0.5s;}.list {min-width: 400px;max-width: 800px;display: flex;}.list .item {width: 100%;display: flex;}.list .item .info {flex: 1;border-bottom: 1px dashed #e4e4e4;padding-bottom: 10px;}.list .item p {margin: 0;}.list .item .name {color: #FB7299;font-size: 14px;font-weight: bold;}.list .item .text {color: #333;padding: 10px 0;}.list .item .time {color: #999;font-size: 12px;}/style
/headbodydiv classwrapperi classavatar/itextarea idtx placeholder发一条友善的评论 rows2 maxlength200/textareabutton发布/button/divdiv classwrapperspan classtotal0/200字/span/divdiv classlistdiv classitem styledisplay: none;i classavatar/idiv classinfop classname清风徐来/pp classtext大家都辛苦啦感谢各位大大的努力能圆满完成真是太好了[笑哭][支持]/pp classtime2022-10-10 20:29:21/p/div/div/div
scriptconst txdocument.querySelector(#tx)const totaldocument.querySelector(.total)const itemdocument.querySelector(.item)const textdocument.querySelector(.text)// 1. 当文本域获得了焦点,就让total显示出来
tx.addEventListener(focus,function(){total.style.opacity1
})//2. 当文本域失去了焦点,就让total隐藏tx.addEventListener(blur,function(){total.style.opacity0
})
//3.检测用户输入
tx.addEventListener(input,function(){//console.log(tx.value.length) 得到输入的长度total.innerHTML${tx.value.length}/200字
})
// 4.按下回车键发布评论
tx.addEventListener(keyup,function(e){//只有按下的是回车键才会触发if(e.keyEnter){// console.log(11) 测试if(tx.value.trim()!){//输出内容不全为空格item.style.displayblock// console.log(tx.value)text.innerHTMLtx.value}//等我们按下回车结束清空input里的值tx.value//按下回车之后就要把字符统计复原total.innerHTML0/200字}
})
/script
/body/html
环境对象
环境对象指的是函数内部特殊的变量this它代表着当前函数运行时所处的环境
作用弄清楚this的指向可以让我们的代码更简洁
函数的调用方式不同this指向的对象也不同谁调用this就是谁粗略规则直接调用函数其实就是相当于是window,函数所以this指代window //每个函数里面都有this 环境对象 普通函数里面this指向的是window// function fn(){// console.log(this)// }// window.fn()const btndocument.querySelector(button)btn.addEventListener(click,function(){// console.log(this)//this指向函数的调用者 在这里即btn//btn.style.colorredthis.style.colorred})
回调函数
如果将函数A作为参数传递给函数B时就称函数A为回调函数
简单理解当一个函数作为参数传递给另外一个函数的时候这个函数就是回调函数
Tab栏切换
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titletab栏切换/titlestyle* {margin: 0;padding: 0;}.tab {width: 590px;height: 340px;margin: 20px;border: 1px solid #e4e4e4;}.tab-nav {width: 100%;height: 60px;line-height: 60px;display: flex;justify-content: space-between;}.tab-nav h3 {font-size: 24px;font-weight: normal;margin-left: 20px;}.tab-nav ul {list-style: none;display: flex;justify-content: flex-end;}.tab-nav ul li {margin: 0 20px;font-size: 14px;}.tab-nav ul li a {text-decoration: none;border-bottom: 2px solid transparent;color: #333;}.tab-nav ul li a.active {border-color: #e1251b;color: #e1251b;}.tab-content {padding: 0 16px;}.tab-content .item {display: none;}.tab-content .item.active {display: block;}/style
/headbodydiv classtabdiv classtab-navh3每日特价/h3ullia classactive hrefjavascript:;精选/a/lilia hrefjavascript:;美食/a/lilia hrefjavascript:;百货/a/lilia hrefjavascript:;个护/a/lilia hrefjavascript:;预告/a/li/ul/divdiv classtab-contentdiv classitem activeimg src./images1/tab00.png alt //divdiv classitemimg src./images1/tab01.png alt //divdiv classitemimg src./images1/tab02.png alt //divdiv classitemimg src./images1/tab03.png alt //divdiv classitemimg src./images1/tab04.png alt //div/div/divscript// 1.a 模块制作 要给5个链接绑定鼠标经过事件// 1.1获取a元素const asdocument.querySelectorAll(.tab-nav a)console.log(as)for(let i0;ias.length;i){// console.log(as[i])as[i].addEventListener(mouseenter,function(){// console.log(鼠标经过)//排他思想// 先去除类名activedocument.querySelector(.tab-nav .active).classList.remove(active)// 添加类名activethis.classList.add(active)//下面5个大盒子一一对应 .itemdocument.querySelector(.tab-content .active).classList.remove(active)// 对应序号的那个item显示添加 active类document.querySelector(.tab-content .item:nth-child(${i1})).classList.add(active)})}/script
/body/html 全选文本框案例1
需求用户点击全选则下面复选框全部选择取消全选则全部取消
分析
全选复选框点击可以得到当前按钮的checked把下面所有的小复选框状态checked改为和全选复选框一致 小tip .类名:checked{},可直接设置多选框被选中之后的样式· !DOCTYPE htmlhtmlhead langenmeta charsetUTF-8title/titlestyle* {margin: 0;padding: 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;width: 500px;margin: 100px auto;text-align: center;}th {background-color: #09c;font: bold 16px 微软雅黑;color: #fff;height: 24px;}td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}.allCheck {width: 80px;}/style
/headbodytabletrth classallCheckinput typecheckbox name idcheckAll span classall全选/span/thth商品/thth商家/thth价格/th/trtrtdinput typecheckbox namecheck classck/tdtd小米手机/tdtd小米/tdtd1999/td/trtrtdinput typecheckbox namecheck classck/tdtd小米净水器/tdtd小米/tdtd4999/td/trtrtdinput typecheckbox namecheck classck/tdtd小米电视/tdtd小米/tdtd5999/td/tr/tablescript// 1. 获取大复选框const checkAlldocument.querySelector(#checkAll)// 2.获取所有的小复选框const cksdocument.querySelectorAll(.ck)// 3.点击大复选框 注册事件checkAll.addEventListener(click,function(){//得到当前大复选框的选中状态//console.log(checkAll.checked)//得到是true或者是false//4. 遍历所有的小复选框 让复选框所有的checked大复选框的checkedfor(let i0;icks.length;i){cks[i].checkedcheckAll.checked;//chexkedAll也可写成this}})/script
/body/html
全选反选案例2
需求用户点击全选则下面复选框全部选择取消全选则全部取消文字对应变化
分析
遍历下面所有的checked添加点击事件检查小复选框选中的个数是不是等于小复选框总的个数把结果给全选按钮利用css复选框选择器 input:checked // 5.小复选框控制大复选框for(let i0;icks.length;i){// 5.1给所有的小复选框添加点击事件// 判断选中的小复选框个数 是不是等于 总的小复选框个数// 一定要写到点击里面 因为每次都要获得最新的个数cks[i].addEventListener(click,function(){// console.log(document.querySelectorAll(.ck:checked).lengthcks.length)checkAll.checkeddocument.querySelectorAll(.ck:checked).lengthcks.length})}
事件流
事件流指的是事件完整执行过程中的流动路径说明假设页面里有个div当触发事件时会经历两个阶段分别是捕获阶段、冒泡阶段简单来说捕获阶段是从父到子冒泡阶段是从子到父实际工作都是使用事件冒泡为主
事件捕获
事件捕获概念从DOM的根元素开始执行对应的事件从外到里事件捕获需要写对应的代码才能看到效果代码
DOM.addEventListener(事件类型事件处理函数是否使用捕获机制)
说明addEventListener第三个参数传入true代表是捕获阶段触发很少使用若传入false代表冒泡阶段触发默认就是false若是用L0事件监听则只有冒泡阶段没有捕获
事件冒泡
概念当一个元素的事件被触发时同样的事件将会在该元素的所有祖先元素中依次被触发这一过程被称为事件冒泡
简单理解当一个元素触发事件后会依次向上调用所有父级元素的同名事件事件冒泡是默认存在的L2事件监听第三个参数是flase或者默认都是冒泡
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.father{width: 500px;height: 500px;background-color: pink;}.son {width: 200px;height: 200px;background-color:purple;}/style
/head
bodydiv classfatherdiv classson/div/divscriptconst fadocument.querySelector(.father)const sondocument.querySelector(.son)document.addEventListener(click,function(){alert(我是爷爷)})fa.addEventListener(click,function(){alert(我是爸爸)})son.addEventListener(click,function(){alert(我是儿子)})// DOM.addEventListener(事件类型事件处理函数是否使用捕获机制)/script
/body
/html
上面代码在鼠标点击儿子之后会先弹出”我是儿子“点击确定之后会再次自动弹出”我是爸爸“之后是”我是爷爷“
阻止冒泡
问题:因为默认就有冒泡模式的存在所以容易导致事件影响到父级元素
需求若想把事件就限制在当前元素内就需要阻止事件冒泡
前提阻止事件冒泡需要拿到事件对象
语法
事件对象.stoPropagation() const fadocument.querySelector(.father)const sondocument.querySelector(.son)document.addEventListener(click,function(){alert(我是爷爷)})fa.addEventListener(click,function(){alert(我是爸爸)})son.addEventListener(click,function(e){alert(我是儿子)e.stopPropagation()}) 给儿子添上阻止冒泡父亲和爷爷就不会弹出来
注意 此方法可以阻断时间流动传播不光在冒泡阶段有效捕获阶段也有效
解绑事件
on事件方式直接使用null覆盖就可以实现事件的解绑
语法L0事件移除解绑 const btndocument.querySelector(.btn)//绑定事件btn.onclickfunction(){alert(点击了)}// L0 事件移除解绑// btn.onclicknull
addEventListener 方式必须使用
removeEventListener(事件类型事件处理函数[获取捕获或者冒泡阶段])
例如 function fn(){alert(点击了)}btn.addEventListener(click,fn)//L2 事件移除解绑btn.removeEventListener(click,fn)
注意匿名函数不可被解绑
鼠标经过事件
mouseover和mouseout会有冒泡效果mouseenter和mouseleave 没有冒泡效果(推荐) const daddocument.querySelector(.dad)const babydocument.querySelector(.baby)dad.addEventListener(mouseover,function(){console.log(爸爸经过)})dad.addEventListener(mouseout,function(){console.log(爸爸离开)})baby.addEventListener(mouseover,function(){console.log(儿子经过)})baby.addEventListener(mouseout,function(){console.log(儿子离开)}) 两种注册事件的区别
传统on注册L0
同一个对象后面注册的事件就会覆盖前面注册同一个事件直接使用null覆盖就可以实现事件的解绑都是冒泡阶段执行的
事件监听注册L2
语法addEventListener事件类型事件处理函数是否使用捕获后面注册的事件不会覆盖前面注册的事件同一个事件可以通过第三个参数去确定是在冒泡或者捕获阶段执行必须使用removeEventLister(事件类型事件处理函数获取捕获或者冒泡阶段)匿名函数无法被解绑
事件委托
事件委托是利用事件流的特征解决一些开发需求的知识技巧 优点减少注册次数可以提高程序性能 原理事件委托其实是利用事件冒泡的特点。 给父元素注册事件当我们触发子元素的时候会冒泡到父元素身上从而触发父元素的事件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyulli第1个孩子/lili第2个孩子/lili第3个孩子/lili第4个孩子/lili第5个孩子/lip我不需要变色/p/ulscript//点击每个小li当前li 文字变为红色//按照事件委托的方式 委托给父级 事件写到父级身上//1.获得父元素const uldocument.querySelector(ul)ul.addEventListener(click,function(e){// console.log(e)//e是点击的事件对象// e.target.style.colorred//e.rarget指的是点击的具体元素标签// 需求只要点击li才会有效果if(e.target.tagNameLI){e.target.style.colorred//e.rarget指的是点击的具体元素标签}})/script
/body
/html
tab栏切换改造改为事件委托写法
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titletab栏切换/titlestyle* {margin: 0;padding: 0;}.tab {width: 590px;height: 340px;margin: 20px;border: 1px solid #e4e4e4;}.tab-nav {width: 100%;height: 60px;line-height: 60px;display: flex;justify-content: space-between;}.tab-nav h3 {font-size: 24px;font-weight: normal;margin-left: 20px;}.tab-nav ul {list-style: none;display: flex;justify-content: flex-end;}.tab-nav ul li {margin: 0 20px;font-size: 14px;}.tab-nav ul li a {text-decoration: none;border-bottom: 2px solid transparent;color: #333;}.tab-nav ul li a.active {border-color: #e1251b;color: #e1251b;}.tab-content {padding: 0 16px;}.tab-content .item {display: none;}.tab-content .item.active {display: block;}/style
/headbodydiv classtabdiv classtab-navh3每日特价/h3ullia classactive hrefjavascript:; data-id0精选/a/lilia hrefjavascript:; data-id1美食/a/lilia hrefjavascript:; data-id2百货/a/lilia hrefjavascript:; data-id3个护/a/lilia hrefjavascript:; data-id4预告/a/li/ul/divdiv classtab-contentdiv classitem activeimg src./images1/tab00.png alt //divdiv classitemimg src./images1/tab01.png alt //divdiv classitemimg src./images1/tab02.png alt //divdiv classitemimg src./images1/tab03.png alt //divdiv classitemimg src./images1/tab04.png alt //div/div/divscript// // 1.a 模块制作 要给5个链接绑定鼠标经过事件// // 1.1获取a元素// const asdocument.querySelectorAll(.tab-nav a)// console.log(as)// for(let i0;ias.length;i){// // console.log(as[i])// as[i].addEventListener(mouseenter,function(){// // console.log(鼠标经过)// //排他思想// // 先去除类名active// document.querySelector(.tab-nav .active).classList.remove(active)// // 添加类名active// this.classList.add(active)// //下面5个大盒子一一对应 .item// document.querySelector(.tab-content .active).classList.remove(active)// // 对应序号的那个item显示添加 active类// document.querySelector(.tab-content .item:nth-child(${i1})).classList.add(active)// })// }///采取事件委托的形式 tab栏切换//1. 获取ul 父元素 因为ul只有一个const uldocument.querySelector(.tab-nav ul)const itemsdocument.querySelectorAll(.tab-content .item)//2.添加事件ul.addEventListener(click,function(e){//console.log(e.target) //e.target是我们点击的对象// 我们只有点击了a才会进行添加类和删除类操作// console.log(e.target.tagName)if(e.target.tagNameA){// console.log(我选的是a)// 排他思想 先移除原来的active 当前元素添加 activedocument.querySelector(.tab-nav .active).classList.remove(active)//当前元素添加active// this指向ul 不能指代lie.target.classList.add(active)//下面大盒子模块// console.log(e.target.dataset.id)const ie.target.dataset.id//注意接收的值为数值型接收回来的是字符型//排他思想 先移除activedocument.querySelector(.tab-content .active).classList.remove(active)//对应的大盒子 添加 active// document.querySelector(.tab-content .item:nth-child(${i1})).classList.add(active)items[i].classList.add(active)// console.log(document.querySelector(.tab-content .item:nth-child(${i1})))}})/script
/body/html 小tip 自定义属性 div data-id0/divscriptconst div document.querySelector(div)console.log(div.dataset.id)//0/script 阻止默认行为
在某些情况下需要阻止默认行为的发生比如阻止链接的跳转表单域跳转
语法 form actionhttp://www.itcast.cninput typesubmit value免费注册/forma hrefhttp://www.baidu.com百度一下/ascriptconst formdocument.querySelector(form)form.addEventListener(submit,function(e){//阻止默认行为 提交e.preventDefault()})const adocument.querySelector(a)a.addEventListener(click,function(e){e.preventDefault()})/script
