Web APIs 第二天
设置/修改表单元素属性
表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框 正常的有属性有取值的 跟其他的标签属性没有任何区别
DOM对象.属性名 = 新值
<script>
let text1 = document.querySelector('.text1')
// text1.value = '什么东西'
text1.placeholder = '看什么东西'
</script>
单选多选框默认选中
<body>
<input type="checkbox">
<script>
//多选框
let input = document.querySelector('input')
//默认选中
input.checked = true
//默认勾选
input.checked = false
</script>
</body>
按钮禁用
<body>
<button>按钮</button>
<script>
let button = document.querySelector('button')
//按钮禁用，true为禁用，false为启用
button.disabled = true
button.disabled = false
</script>
</body>
下拉列表默认选中
<body>
<select>
<option>非洲</option>
<option>亚洲</option>
<option>欧洲</option>
</select>
<script>
//选取第二个option
let option = document.querySelector('option:nth-child(2)')
//选中为默认勾选
option.selected = true
</script>
</body>
文本域
<body>
<textarea></textarea>
<script>
let text = document.querySelector('textarea')
//三种输入文本内容一样
// text.value = 'hello'
// text.innerText = 'hello1'
text.innerHTML = '<h1>hello1</h1>'//不会解析标签
console.log(textarea.value)
console.log(textarea.innerText)//控制台不显示
console.log(textarea.innerHTML)
</script>
</body>
事件监听
事件是在编程时系统内发生的动作或者发生的事情，比如用户在网页上单击一个按钮
语法： 元素.addEventListener('事件',要执行的函数)
事件监听三要素 事件源： 那个dom元素被事件触发了，要获取dom元素 事件： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等 事件调用的函数： 要做什么事
举例
<body>
<button></button>
<script>
//定义DOM
let but = document.querySelector('button')
//点击事件
but.addEventListener('click',function(){
console.log('你好')
})
</script>
</body>
案例1
需求：点击关闭之后，图片关闭
<body>
<div>
<button>X</button>
</div>
<script>
//定义DOM
let but = document.querySelector('button')
let div = document.querySelector('div')
//点击按钮，div盒子消失
but.addEventListener('click',function(){
div.style.display = 'none'
})
</script>
</body>
案例2
需求：点击按钮之后，随机显示一个名字，如果没有显示则禁用按钮
<body>
<div>
</div>
<button class="but1">点击随机抽名</button>
<button class="but2">暂停</button>
<script>
//定义DOM
let but = document.querySelector('.but1')
let but2 = document.querySelector('.but2')
let div = document.querySelector('div')
let num =['王','四','李','三','张']
let timeId
//一个按钮开启定时器，随机点名，因为点击一次按钮就能开启一个定时器，因此关闭的时候会产生bug
//因此点击一次，就启用禁用按钮，关闭定时器之后，再开启按钮
but.addEventListener('click',function(){
timeId = setInterval(function(){
let num2 = Math.round(Math.random()* (num.length - 1))
div.innerText = num[num2]
})
but.disabled = true
})
//一个按钮，关闭定时器
but2.addEventListener('click',function(){
clearInterval(timeId)
but.disabled = false
})
</script>
事件监听版本
DOM L0：事件源.on事件 = function() { } DOM L2 ：事件源.addEventListener(事件， 事件处理函数)
事件类型
鼠标事件： click 鼠标点击 mouseenter 鼠标经过 mouseleave 鼠标离开 焦点事件： focus 获得焦点 blur 失去焦点 键盘事件： keydown 键盘按下触发 keyup 键盘抬起触发 文本事件: input 用户输入事件
案例3
需求：当表单得到焦点，显示下拉菜单，失去焦点隐藏下来菜单
<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>
let input = document.querySelector('input')
let ul = document.querySelector('.result-list')
input.addEventListener('focus',function(){
ul.style.display = 'block'
input.style.border = '1px solid #ff6700'
})
input.addEventListener('blur',function(){
ul.style.display = 'none'
input.style.border = '1px solid #e0e0e0'
})
</script>
</body>
案例4
需求：用户输入文字，可以计算用户输入的字数
<body>
<div class="w">
<div class="controls">
<img src="" 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>
let textarea = document.querySelector('#area')
let span = document.querySelector('.useCount')
textarea.addEventListener('input',function(){
span.innerHTML = textarea.value.length
})
</script>
</body>
全选文本框案例5
需求：用户点击全选，则下面复选框全部选择，取消全选则全部取消,文字对应变化
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>01-全选商品</title>
<style>
* {
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>
</head>
<body>
<table>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll" />
<span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米手机</td>
<td>小米</td>
<td>￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米净水器</td>
<td>小米</td>
<td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米电视</td>
<td>小米</td>
<td>￥5999</td>
</tr>
</table>
<script>
let input1 = document.querySelector('#checkAll')
let input2 = document.querySelectorAll('.ck')
input1.addEventListener('click',function(){
for (let index = 0; index < input2.length; index++) {
input2[index].checked = input1.checked
}
})
</script>
</body>
</html>
全选文本框案例6
需求：用户点击全选，则下面复选框全部选择，取消全选则全部取消,文字对应变化
<script>
let input1 = document.querySelector('#checkAll')
let input2 = document.querySelectorAll('.ck')
for (let index = 0; index < input2.length; index++) {
input2[index].addEventListener('click', function () {
let checked = name()
input1.checked = checked
})
}
function name() {
let i = 0
for (let index = 0; index < input2.length; index++) {
if (input2[index].checked) {
i++
}
console.log(i)
}
if (i === 3) {
return true
} else {
return false
}
}
</script>
案例7
需求：用户点击加号，则文本框+1，点击减号，则文本框-1，如果文本框为1，则禁用减号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>1</div>
<button class="but1">+</button>
<button class="but2" disabled>-</button>
<script>
let but1 = document.querySelector('.but1')
let but2 = document.querySelector('.but2')
let div = document.querySelector('div')
console.log(div.value);
console.log(div.innerHTML);
console.log(div.innerText);
but1.addEventListener('click',function(){
div.innerText++
but2.disabled = false
})
but2.addEventListener('click',function(){
div.innerText--
if(div.innerText == 1){
but2.disabled = true
}
})
</script>
</body>
</html>
环境变量
目标：能够分析判断函数运行在不同环境中 this 所指代的对象
环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境 作用：弄清楚this的指向，可以让我们代码更简洁 函数的调用方式不同，this 指代的对象也不同 【谁调用， this 就是谁】 是判断 this 指向的粗略规则 直接调用函数，其实相当于是 window.函数，所以 this 指代 window
排他思想 当前元素为A状态,其他元素为B状态
使用
干掉所有人，使用for循环 复活他自己，通过this或者下标找到自己或者对应的元素
案例8
需求：点击不同的选项卡，底部可以显示 不同的内容
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际大牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products">
<div class="main active">
<a href="###"><img src="./tab栏案例/imgs/guojidapai.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="./tab栏案例/imgs/guozhuangmingpin.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="./tab栏案例/imgs/nanshijingpin.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="./tab栏案例/imgs/qingjieyongpin.jpg" alt="" /></a>
</div>
</div>
</div>
<script>
let lis = document.querySelectorAll('.tab-item')
let imgs = document.querySelectorAll('.main')
for (let index = 0; index < lis.length; index++) {
lis[index].addEventListener('click',function(){
for (let index1 = 0; index1 < lis.length; index1++) {
lis[index1].classList.remove('active')
}
this.classList.add('active')
for (let index1 = 0; index1 < imgs.length; index1++) {
imgs[index1].classList.remove('active')
}
imgs[index].classList.add('active')
})
}
</script>
</body>
字符串（扩展）
<script>
// 1 需要用到 表单的input事件
// 2 如何统计文字个数 字符串 看成是数组 （拥有一点点数组的特点）
// 字符串有 数组的长度length
// let str="你们好呀"; str[0]=你 str[1]=们
// 字符串也可以循环
// console.log("aa".length);
// console.log("aab".length);
// console.log("aabb".length);
// let str="你们好呀123";
// console.log(str.push);
// console.log(str[0]);
// console.log(str[1]);
// console.log(str[2]);
// for (let index = 0; index < str.length; index++) {
// console.log(str[index]);
// }
//let input=document.querySelector("input")
// 绑定input事件
// input.addEventListener("input",function () {
// console.log(input.value.length);
// })
</script>
