WebAPI
第一节
WebAPI的作用和分类
作用: 就是使用 JS 去操作 html 和浏览器 分类：DOM (文档对象模型)、BOM（浏览器对象模型）
DOM
DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API
DOM树
DOM对象（重要）
DOM对象：浏览器根据html标签生成的 JS对象
DOM的核心思想：把网页内容当做对象来处理
document 对象：是 DOM 里提供的一个对象/网页所有内容都在document里面
获取DOM对象
<body>
<div>获取元素123</div>
<div>获取元素456</div>
<!-- <input type="text"> -->
<script>
// 语法 选择器
document.querySelector('div')
// 两个同样的选择器，只会显示第一个
let divDom = document.querySelector('div')
let inpDom = document.querySelector('input')
// 要用console.dir来显示，.log有时会显不出来
console.dir(divDom) //输出是：获取元素123
console.dir(inpDom ) //输出是：null
</script>
</body>
动态修改dom元素内容
<body>
<h1>我想去旅游</h1>
<h2></h2>
<script>
let address = prompt('去哪旅游')
// 先获取是那个标签想要修改里面的文本内容
let h2Dom = document.querySelector('h2')
//修改标签里面的文本，dom元素.innerText = 想要放的文本
h2Dom.innerText = address
</script>
获取多个dom元素
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
// 获取所有的li，返回的是一个数组,选择器无论选择什么，它的返回值都是数组
document.querySelectorAll('li')
let lis = document.querySelectorAll('li')
for (let index = 0; index < lis.length; index++) {
lis[index].innerText = `这是第${index + 1}个标签`
}
console.dir(lis)
</script>
</body>
其他获取DOM元素方法
<body>
<div class="nav">我是nav</div>
<h1 id="ids">我是标题</h1>
<div class="navbar">我是navbar</div>
<script>
// 通过id选择器获取单个标签
document.getElementById('ids')
// 通过标签获取一类，输出是数组
document.getElementsByTagName('div')
// 通过类名获取一类，输出是数组
document.getElementsByClassName('nav')
</script>
</body>
设置/修改DOM元素
1. document.write()
2. 元素innerText 属性
3. 元素.innerHTML 属性
<body>
<div class="nav">我是一个盒子</div>
<p>我想吃牛肉</p>
<script>
// 只能把标签写在body里面
document.write(`<BUtton>我已经灭有用了</BUtton>`)
// 只能设置文本。不能解析html字符串
document.querySelector('div').innerText = '<BUtton>我是一个按钮</BUtton>' //输出： <BUtton>我是一个按钮</BUtton>
// 既能设置文本。也能解析html字符串
document.querySelector('p').innerHTML = '<BUtton>我是一个按钮</BUtton>' // 有按钮形状的文字
// innerText 和 innerHTML，主要设置双标签里面的文本内容
</script>
</body>
4.修改属性
<body>
<img src="">
<script>
let imgDom = document.querySelector('img')
let imgArr =[
'../images/01.png',
'../images/02.png',
'../images/03.png',
'../images/04.png',
]
let num = Math.round(Math.random() * 3)
//相当于：img src="", x = yyy,x就是属性
imgDom.src = imgArr[num]
</script>
</body>
5.设置元素样式
通过 style 属性操作CSS
<body>
<div>去野餐啦</div>
<script>
let div = document.querySelector('div')
// 通过 style 属性操作CSS
div.style.fontSize = '100px'
div.style.backgroundColor = '#ccc'
div.style.height = '500px'
// 操作类名(className) 操作CSS
</script>
操作类名(className) 操作CSS
<style>
.box{
width: 500px;
height: 500px;
background-color: rgb(212, 115, 115);
}
.box1{
margin-top: 100px;
}
</style>
</head>
<body>
<div>随便冰淇淋</div>
<script>
let div = document.querySelector('div')
// className,会清空这个元素之前所有的样式，再用现在新加的样式
div.className = 'box box1'
</script>
</body>
通过 classList 操作类控制CSS
<style>
.d1{
width: 500px;
}
.d2{
height: 600px;
}
.d3{
background-color: rgb(115, 220, 113);
}
.d4{
margin-top: 100px;
}
</style>
</head>
<body>
<div>去吃牛肉啦</div>
<script>
let div = document.querySelector('div')
// 一次增加多个类
div.classList.add("d3","d2","d1")
// 一次删除多个类
div.classList.remove("d2","d3")
// 切换，如果之前有那个类，就删掉，没有就增加
div.classList.toggle('d4')
</script>
</body>
案例设置背景颜色
<body>
<script>
let arr2 = [
'url(../images/01.png)',
'url(../images/02.png)',
'url(../images/03.png)',
'url(../images/04.png)',
]
// let num = Math.round(Math.random() * 3)
function getColor(min,max) {
return Math.round(Math.random() * (max - min) + min)
}
let color1 = getColor(0,255)
let color2 = getColor(0,255)
let color3 = getColor(0,255)
let body = document.querySelector('body')
body.style.backgroundColor = `rgb(${color1},${color2},${color3})`
// body.style.backgroundImage = arr2[num]
</script>
</body>
定时器
开启定时器
间隔时间单位是毫秒
<script>
function name() {
console.log('每秒给我一块钱');
}
// 1秒等于1000毫秒
setInterval(name,1000)
// 用匿名函数的方法
setInterval(function(){
console.log('每秒给我5块钱');
},1000)
</script>
清楚定时器
<script>
let index = 0
let setId = setInterval(function(){
index++
document.write(`第${index}秒`)
if(index === 20){
clearInterval(setId)
}
},100)
</script>
设置修改表单元素
<body>
<input type="text" value="我是里面的文字" class="one">
<input type="radio" class="two" >
<input type="checkbox" checked class="three">
<button disabled>发送验证码</button>
<select >
<option >牛肉</option>
<option >猪肉</option>
<option >鸡肉</option>
<option >鱼肉</option>
</select>
<textarea >
<h2>我是一个文本域</h2>
</textarea>
<script>
let text = document.querySelector('.one')
let radio = document.querySelector('.two')
let checkbox = document.querySelector('.three')
let option = document.querySelector('option:nth-child(3)')
let button = document.querySelector('button')
let textarea = document.querySelector('textarea')
text.value = '我更改了里面的文字' //value：就是代表文本里面的内容
radio.checked = true // 选中
checkbox.checked = false // 不选中
option.selected = true //表示就是页面固定选择这个
button.disabled = false //禁用：disabled ,true:就是禁用，false:不禁用
textarea.value = '我不想做文本域了' //推荐首选这种 ，获取的内容按原样输出
// textarea.innerHTML = '我又想做文本域了' 这种方法也可以 ，但是连同标签会被解析
</script>
</body>
第二节
事件
1.什么是事件？
事件是在编程时系统内发生的动作或者发生的事情 比如用户在网页上单击一个按钮
2.什么是事件监听？
就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 注册事件
<body>
<button class="one">点击我吧</button>
<button class="two">不要点击我</button>
<script>
// 获取元素
let button1 = document.querySelector('.one')
let button2 = document.querySelector('.two')
// 注册事件
// 元素.addEventListener('事件',函数)
// 当点击button的时候，弹出警告框 click:点击
button1.addEventListener('click',function(){
alert('你点疼我了')
})
//当鼠标移动到button2的时候，弹出警告框 mouseover:鼠标经过触发
button2.addEventListener('mouseover',function(){
alert('来点我吧')
})
</script>
常见的鼠标事件
-
click : 鼠标点击左键触发事件
-
mouseover ：鼠标经过触发事件
-
mouseout ： 鼠标离开触发事件
-
focusr ： 获得鼠标焦点触发
-
blu ： 失去鼠标焦点触发
-
mousemove ：鼠标移动触发
-
mouseup ： 鼠标弹起触发
mousedown ：鼠标按下触发
案例随机点名-点到停止
<body>
<input type="text" value=""> <br>
<button class="one">点击随机点名</button>
<button class="two">停止点名</button>
<script>
// 点击随机，名字开始循环无序播放，点击停止，就停下来
let num = ['黄忠','赵云','关羽','张飞','刘备']
let input = document.querySelector('input')
let button1 = document.querySelector('.one')
let button2 = document.querySelector('.two')
let setIn
//节流，先点击多次button1，就相当于开启了多个定时器，再点击结束按钮时，会发现也无法停止，因为点击停止时，只结束了一个定时器，其他定时器还在执行
button1.addEventListener('click',function(){
//解决方法2：在开启定时器前，先清除定时器，开启一次，清楚一次
clearInterval(setIn)
setIn = setInterval(function(){
let num1 = Math.round(Math.random() * 4)
input.value = num[num1]
//解决方法1，点击时，就禁用
// button1.disabled = true
},10)
})
button2.addEventListener('click',function(){
clearInterval(setIn)
//1.结束按钮被点击时，再启用
// button1.disabled = false
})
</script>
</body>
案例商品全选，单选复选框
<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 allCheck = document.querySelector('#checkAll')
let ck = document.querySelectorAll('.ck') // 这是个数组啊！！！！
// 商品全选功能
allCheck.addEventListener('click',function(){
// allCheck.checked = true
// ck.checked = allCheck.checked
for (let index = 0; index < ck.length; index++) {
ck[index].checked = allCheck.checked
}
})
// 当三个选中，全选也选中
// 商品单个全部都被选中，全选也被选中功能
for (let index = 0; index < ck.length; index++) {
//3.每个框被点击的时候，就会去执行判断。每个框是否都是 选中的，是的话，就去选中全选框
ck[index].addEventListener('click',name)
}
// 每点击一次，就会执行一次判断，所以对判断的内容进行封装使用
function name() {
let num = 0
for (let index = 0; index < ck.length; index++) {
//1.当复选框得状态时选中得时候，num就加1
ck[index].checked === true? num++ : num
}
//2.当num的数字等于数组的长度时，全款款就选中
num === ck.length? allCheck.checked = true : allCheck.checked = false
}
</script>
</body>
</html>
巧妙的思路：用一个变量去储存选中的状态，当变量的数字等于数组的长度时，即可勾选全选
事件类型
鼠标事件
<body>
<div></div>
<!-- 只有表单 元素 有获得焦点 失去焦点事件 -->
<input type="text" />
<script>
// 获取div元素
let div = document.querySelector('div');
let input = document.querySelector('input');
// 绑定不同的事件
// div.addEventListener("click",function () {
// console.log("click 鼠标点击事件");
// })
// 鼠标经过元素，
// div.addEventListener("mouseenter",function () {
// console.log("mouseenter 鼠标经过");
// })
// 鼠标离开元素，要离开元素的范围才会触发
// div.addEventListener("mouseleave",function () {
// console.log("mouseleave 鼠标离开");
// })
// 鼠标经过
// div.addEventListener("mouseover",function () {
// console.log("mouseover 鼠标经过");
// })
// 鼠标离开,只要鼠标一移动就触发
// div.addEventListener("mouseout",function () {
// console.log("mouseout 离开");
// })
焦点事件
// 获得焦点
// input.addEventListener("focus",function () {
// console.log("输入框 获得焦点 ");
// document.body.style.backgroundColor='#000'
// })
// // 失去焦点
// input.addEventListener("blur",function () {
// console.log("输入框 失去焦点");
// document.body.style.backgroundColor='#fff'
// })
键盘事件
// 键盘按下事件 div不行 表单可以
// 给body标签添加比较多
// document.body.addEventListener("keydown",function () {
// console.log("keydown 按下");
// })
// 键盘抬起
// document.body.addEventListener("keyup",function () {
// console.log("keyup 抬起");
// })
文本事件
// 输入事件 输入框
// input.addEventListener("input",function () {
// console.log("只要你在我的输入框输入了内容，我就触发");
// })
