Web API 第二天
>>>>>>>事件
什么是事件？
事件是在编程时系统内发生的动作或者发生的事情
比如用户在网页上单击一个按钮
什么是事件监听？
就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 注册事件
语法：
元素.addEventListener('事件',要执行的函数)
事件监听三要素：
事件源： 那个dom元素被事件触发了，要获取dom元素
事件： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
事件处理程序： 要做什么事
注意：1.事件类型需要加引号
2.函数是点击之后再去执行，每次点击都会执行一次
//1.获取元素 let btn = document.querySelector('button') //2.事件监听(注册事件) btn.addEventListener('click',function(){ alert(`被点击了`) })
案例：
淘宝点击关闭二维码
需求：点击关闭之后，淘宝二维码关闭
案例
分析：
①：点击的是关闭按钮
②：关闭的是父盒子
核心：利用样式的显示和隐藏完成， display:none 隐藏元素 display:block 显示元素
<style>
* {
margin: 0;
padding: 0;
}
.erweima {
position: relative;
width: 160px;
height: 160px;
margin: 100px auto;
border: 1px solid #ccc;
}
.erweima i {
position: absolute;
left: -13px;
top: 0;
width: 10px;
height: 10px;
border: 1px solid #ccc;
font-size: 12px;
line-height: 10px;
color: #ccc;
font-style: normal;
cursor: pointer;
}
</style>
</head>
<body>
<div class="erweima">
<img src="./images/code.png" alt="">
<i class="close_btn">x</i>
</div>
<script>
//1.获取元素 事件源i 关闭的 erweima
let close_btn = document.querySelector('.close_btn')
let erweima = document.querySelector('.erweima')
//2.事件监听
close_btn.addEventListener('click',function() {
//erweima隐藏
erweima.style.display = 'none'
})
</script>
</body>
随机点名
需求：点击按钮之后，随机显示一个名字，如果没有显示则禁用按钮
案例
分析：
①：点击的是按钮
②：随机抽取一个名字
③： 当名字抽取完毕，则利用 disabled 设置为 true
</head>
<style>
div{
width: 200px;
height: 40px;
border: 1px solid pink;
text-align: center;
line-height: 40px;
}
</style>
<body>
<div>开始点名吧</div>
<button>点击点名</button>
<script>
//1.获取元素 div 和 button
let box = document.querySelector('div')
let btn = document.querySelector('button')
//2.随机函数
function getRandom (min,max) {
return Math.floor(Math.random() * (max- min + 1)) + min
}
//声明一个数组
let arr = ['赵云','刘备','曹操','关羽','张飞']
//事件监听
btn.addEventListener('click',function(){
let random = getRandom(0,arr.length-1)
box.innerHTML =arr[random]
//删除数组里面的元素 splice(从哪里删，删几个)
arr.splice(random,1)
//抽到最后一个禁用按钮,如果数组没有了，就要禁用按钮
if(arr.length === 0) {
// console.log('最后一个了')
btn.disabled = true
btn.innerHTML = '已经抽完'
}
})
</script>
随机点名案例
案例
需求：点击开始随机抽取，点击结束输出结果
业务分析：
① 点击开始按钮随机抽取数组的一个数据，放到页面中
② 点击结束按钮删除数组当前抽取的一个数据
③ 当抽取到最后一个数据的时候，两个按钮同时禁用
核心：利用定时器快速展示，停止定时器结束展示
<style>
* {
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>
</head>
<body>
<h2>随机点名</h2>
<div class="box">
<span>名字是：</span>
<div class="qs">这里显示姓名</div>
</div>
<div class="btns">
<button class="start">开始</button>
<button class="end">结束</button>
</div>
<script>
// 数据数组
let arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
//1.获取元素 两个按钮+div
let start = document.querySelector('.start')
let end= document.querySelector('.end')
let qs= document.querySelector('.qs')
//timer 要是全局变量
let timer = 0
//random要是全局变量
let random = 0
//2.给开始按钮注册事件
start.addEventListener('click',function(){
//随机抽数据，不断快速的抽取
timer = setInterval(function(){
random = getRandom(0,arr.length-1)
qs.innerHTML = arr[random]
},150)
//如果到了最后一个，就禁用两个按钮
if(arr.length === 1){
start.disabled = true
end.disabled = true
}
})
//3.给结束按钮注册事件 本质是停止计时器
end.addEventListener('click',function(){
//停止计时器,timer是局部变量，在这个函数里面不能使用
clearInterval(timer)
//删除数组元素
arr.splice(random,1)
})
</script>
</body>
</html>
>>>>>拓展阅读-事件监听版本
DOM L0
事件源.on事件 = function() { } 偶尔会用
<button>点击我</button>
<script>
//获取事件的方法二
let btn = document.querySelector('button')
btn.onclick = function() {
alert(11)
}
</script>
DOM L2
事件源.addEventListener(事件， 事件处理函数) 常用
了解以下
发展史：
DOM L0 ：是 DOM 的发展的第一个版本； L：level
DOM L1：DOM级别1 于1998年10月1日成为W3C推荐标准
DOM L2：使用addEventListener注册事件
DOM L3： DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型
>>>>>事件类型
鼠标触发
click 鼠标点击
mouseenter 鼠标经过
mouseleave 鼠标离开
表单获得光标
focus 获得焦点
blur 失去焦点
键盘触发
Keydown 键盘按下触发
Keyup 键盘抬起触发
表单输入触发
input 用户输入事件
案例
小米搜索框案例
需求：当表单得到焦点，显示下拉菜单，失去焦点隐藏下来菜单
案例
分析：
①：开始下拉菜单要进行隐藏
②：表单获得焦点 focus，则显示下拉菜单，并且文本框变色（添加类）
③：表单失去焦点，反向操作
style>
* {
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 {
display: block;
padding: 6px 15px;
font-size: 12px;
color: #424242;
text-decoration: none;
}
.result-list a:hover {
background-color: #eee;
}
</style>
</head>
<body>
<div class="mi">
<input type="search" placeholder="小米笔记本">
<ul class="result-list">
<li><a href="#">全部商品</a></li>
<li><a href="#">小米11</a></li>
<li><a href="#">小米10S</a></li>
<li><a href="#">小米笔记本</a></li>
<li><a href="#">小米手机</a></li>
<li><a href="#">黑鲨4</a></li>
<li><a href="#">空调</a></li>
</ul>
</div>
<script>
//1.获取元素 input表单 [type=search]避免后面重复
let search = document.querySelector('input[type=search]')
let list = document.querySelector('.result-list')
//2.事件监听 获得光标事件 focus
search.addEventListener('focus',function(){
//显示下拉菜单
list.style.display= 'block'
//文本框变色
search.classList.add('search')
})
//3.事件监听 失去光标事件 blur
search.addEventListener('blur',function(){
//隐藏下拉菜单
list.style.display= 'none'
//文本框变色
search.classList.remove('search')
})
</script>
</body>
</html>
微博输入案例
需求：用户输入文字，可以计算用户输入的字数
案例
分析：
①：判断用输入事件 input
②：不断取得文本框里面的字符长度
③：把获得数字给下面文本框
<body>
<div class="w">
<div class="controls">
<img src="images/tip.png" alt=""><br>
<textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
<div>
<span class="useCount">0</span>
<span>/</span>
<span>200</span>
<button id="send">发布</button>
</div>
</div>
<div class="contentList">
<ul>
</ul>
</div>
</div>
<script>
//1.获取元素 文本域 count
let area = document.querySelector('#area')
let useCount = document .querySelector('.useCount')
//2.绑定事件， 用户输入事件 input
area.addEventListener('input',function(){
//不断得到文本域里面得到字符串长度
//area.value可以获得值 但是我们需要长度
//console.log(area.value.length)
useCount.innerHTML = area.value.length
})
</script>
</body>
</html>
全选文本框案例1
需求：用户点击全选，则下面复选框全部选择，取消全选则全部取消,文字对应变化
案例
分析：
①：全选复选框点击，可以得到当前按钮的 checked
②：把下面所有的小复选框状态checked，改为和全选复选框一致
③：如果当前处于选中状态，则把文字改为取消， 否则反之
全选文本框案例2
需求：用户点击全选，则下面复选框全部选择，取消全选则全部取消,文字对应变化
案例
分析：
①：遍历下面的所有的checkbox,添加点击事件
②：在事件内部,遍历所有的checkbox状态,只要有一个为false 就将全选状态设置为false , 把文字改
为全选，并且直接return (退出循环)
③：在循环结束将全选的状态直接设置为true
//1.获取元素 全选 和小的复选框 let all = document.querySelector('#checkAll') let cks =document.querySelectorAll('.ck') let span = document.querySelector('span') //2.事件监听 全选按钮 all.addEventListener('click',function(){ //all.checked要么是true 要么是false //我们需要做的就是将all.checked给下面三个小按钮 //因为三个按钮在伪数组里面，我们需要遍历的方式，挨着取出来，依次给支 for(let i = 0;i<cks.length;i++) { cks[i].checked = all.checked } //当我们的全选按钮处于选中状态，则可以改为取消 if(all.checked ){ span.innerHTML = '取消' }else{ span.innerHTML='全选' } }) //3.小按钮的做法 给多个元素绑定相同事件 for(let i = 0;i< cks.length;i++) { //绑定事件 cks[i]数组中的每个对象 cks[i].addEventListener('click',function(){ //只要点击任何一个小按钮 都要遍历所有小按钮 for(let j = 0;j < cks.length;j++) { //来看看是不是有人没被选中 if(cks[j].ckecked === false) { //return 是退出循环 return 是退出函数 //如果有false 则退出循环 all.checked = false span.innerHTML= '全选' return } } //当我们的循环结束，如果代码走到这里，说明没有false，都被选中了 all.checked = true span.innerHTML = '取消' }) }
购物车加减操作
需求：用户点击加号，则文本框+1，点击减号，则文本框-1，如果文本框为1，则禁用减号
案例
分析：
①：给添加按钮注册点击事件, 获取表单的value,然后自增
②：解除减号的disabled状态
③：给减号按钮添加点击事件,获取表单的value,然后自减
④：自减结束需要判断,如果结果小于等于1 则添加上disabled状态
prompt 和一般的表单取过来的值一般都是字符串型
<style> div { width: 80px; } input[type=text] { width: 50px; height: 44px; outline: none; border: 1px solid #ccc; text-align: center; border-right: 0; } input[type=button] { height: 24px; width: 22px; cursor: pointer; } input { float: left; border: 1px solid #ccc; } </style> </head> <body> <div> <input type="text" id="total" value="1" readonly> <input type="button" value="+" id="add"> <input type="button" value="-" id="reduce" disabled> <script> //需要操作三个元素，首先需要改加和减，然后需要改数量 //1.获取三个元素 let total = document.querySelector('#total') let add = document.querySelector('#add') let reduce = document.querySelector('#reduce') //2.点击加号，事件监听 add.addEventListener('click',function(){ //这个typeof可以将是什么类型的数据表现出来,黑色的是字符串 // console.log(typeof total.value) // 小技巧 i++ 特点是有隐式转化 与 i= i+1 total.value++ //我不是不可用，我就是可用的 reduce.disabled = false }) //3.点击减号，事件监听 reduce.addEventListener('click',function(){ //比较运算符也有隐式转化 难点 total.value-- if (total.value <= 1) { reduce.disabled = true } }) </script> </div> </body> </html>
>>>>高阶函数
高阶函数可以被简单理解为函数的高级应用，JavaScript 中函数可以被当成【值】来对待，基于这个特性实现函数的高
级应用。
<script> let count = 10 //将10赋值给count let fn = function() { } //将函数赋值给fn,此时称为高阶函数 </script>
【值】就是 JavaScript 中的数据，如数值、字符串、布尔、对象等
1.函数表达式
//函数表达式与普通函数并无本质上的区别 let counter = function (x,y) { return x+y } //调用函数 let result = counter(5,10) console.log(result)
函数表达式必需要先申明再调用
2.回调函数
当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数
function fn () { console.log('我是回调函数...') } setInterval(fn,1000)
1. 函数表达式
函数也是【数据】
把函数赋值给变量
2. 回调函数
把函数当做另外一个函数的参数传递，这个函数就叫回调函数
回调函数本质还是函数，只不过把它当成参数使用
使用匿名函数做为回调函数比较常见
高阶函数 // 1.函数表达式 let count = 10 //将10赋值给count let fn = function() { } //2.回调函数，回调函数是将函数当成参数处理 //setInterval(function,1000) function fn() {} //过一秒后再调用fn setInterval(fn,1000) //还有一个也是回调函数 box.addEventListener('click',function(){}) //此时function(){}被称为回调函数,用户点击box后，再来调用函数 //第二种写法 box.addEventListener('click',fun) function fun () { }
环境对象
环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境
作用：弄清楚this的指向，可以让我们代码更简洁
函数的调用方式不同，this 指代的对象也不同
【谁调用， this 就是谁】 是判断 this 指向的粗略规则
直接调用函数，其实相当于是 window.函数，所以 this 指代 window
//环境对象 this 他是个对象 情形一 function fn() { console.log(this) //而此处的this是指window } window.fn() 情形二 let btn = document.querySelector('button') btn.addEventListener('click',function(){ //此时的this是指btn console.log(this) })
编程思想
排他思想
当前元素为A状态,其他元素为B状态
使用：
1. 干掉所有人
使用for循环
2. 复活他自己
通过this或者下标找到自己或者对应的元素
<style> .pink{ background-color: pink; } </style> <body> <button class="pink">第1个</button><button>第2个</button><button>第3个</button><button>第4个</button><button>第5个</button> <script> let btn = document.querySelectorAll('button') for(let i = 0;i<btn.length;i++) { btn[i].addEventListener('click',function(){ //点谁谁就是this //this.classList.add('pink') // //1.先·干掉所有人 // for(let j = 0;j<btn.length;j++){ // btn[j].classList.remove('pink') // } //我们找出那个唯一的pimk类.删除 document.querySelector(".pink").classList.remove('pink') //复活我自己 this.classList.add('pink') }) } </script> </body> </html>
classLIst属性返回元素的类名，作为DOMTokenList对象
该属性用于在元素中添加、移出、切换css类
语法：elem.classList
方法：
add( String[,String])：添加指定的类值。如果这些类已经存在于元素的属性中，那么他们将被忽略
remove(String[,String])：删除指定的类值
item(Number)：按集合中的索引返回类值
toggle(String[,force])：
综合案例
需求：点击不同的选项卡，底部可以显示 不同的内容
分析：
①：点击当前选项卡，当前添加类，其余的兄弟移除类， 排他思想
②：下面模块盒子全部隐藏，当前的模块显示
