JavaScript APIs 01
·
JavaScript APIs
第一章节
01-声明变量
01-1 声明变量优先使用哪个？
- const
- 有了变量先给const，如果发现它后面是要被修改的，再改为let
01-2 为什么const声明的对象可以修改里面的属性？
- 因为对象是引用类型，里面存储的是地址，只要地址不变，就不会报错
- 建议数组和对象使用const来声明
01-3 什么时候使用let声明变量？
- 如果基本数据类型的值或者引用类型的地址发生变化的时候，需要用let
- 比如：一个变量进行加减运算，比如：for循环中的i++
02-DOM树和DOM对象
02-1 DOM树是什么？
- 将HTMl文档以树状结构直观的表现出来，我们称为文档树或DOM树
- 作用：文档树直观的体现了标签与标签之间的关系
02-2 DOM对象怎么创建的？
- 浏览器根据HTML标签生成的JS对象（DOM对象）
- DOM的核心就是把内容当对象来处理
02-3 document是什么？
- 是DOM里提供的一个对象
- 网页所有内容都在document里面
03-获取DOM元素
03-1 querySelector()和querySelectorAll()的区别？
- querySelector() 只能选择一个元素，可以直接操作
- querySelectorAll() 可以选择多个元素，得到的是伪数组，需要遍历得到每一个元素
03-2 他们两者小括号里的参数有什么注意事项？
必须是字符串，也就是必须加引号 const div = document.querySelectorAll(‘div’)**
03-3 代码实例：
<body>
<div class="box">HELLO WORLD!!!</div>
<div class="box2">HELLO WORLD2!!!</div>
<p id="nav">导航栏</p>
<ul>
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
<li>测试4</li>
</ul>
<script>
//获取匹配的第一个div（只会选择第一个）
const con = document.querySelector('div')
console.log(con)
//也可根据类名指定选择
const con2 = document.querySelector('.box2')
console.log(con2)
const nav = document.querySelector('#nav')
console.log(nav)
//获取ul中第一个li
const li = document.querySelector('ul li:first-child')
console.log(li)
console.log('-----------')
//获取ul中所有的li
const lis = document.querySelectorAll('ul li')
console.log(lis)
console.log('-----------')
//通过for循环遍历每一个元素li
const lies = document.querySelectorAll('ul li')
for(let i = 0; i < lies.length; i++){
console.log(lies[i])
}
console.log('-----------')
//获取所有div
const divs = document.querySelectorAll('div')
console.log(divs)
</script>
</body>
Console输出结果：
03-4 其他获取DOM元素方法（了解）
//根据id获取一个元素
document.getElementById('nav')
//根据标签获取一类元素 获取页面所有div
document.getElementsByTagName('div')
//根据类名获取元素 获取页面所有类名为w的
document.getElementsByClassName('w')
04-修改元素常见的属性
<body>
<img src="/01-code/image/01.jpg" alt="">
<script>
//1、获取图片元素
const abulm = document.querySelector('img')
//2、修改图片对象的属性 对象.属性 = 值
abulm.src = "/01-code/image/02.jpg" //修改
abulm.title = '我的帅照' //新增
</script>
</body>
05-随机显示图片
<body>
<img src="/01-code/image/1.jpg" alt="">
<script>
//取到N ~ M 的随机整数
function getRandom(N , M){
return Math.floor(Math.random() * (M - N + 1)) + N
}
//1、获取图片对象
const img = document.querySelector('img')
//2、随机得到序号
const random = getRandom(1,11)
//3、更换路径
img.src = `/01-code/image/${random}.jpg`
</script>
</body>
06-通过style属性修改样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通过style属性修改样式</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
const con = document.querySelector('.box')
//修改样式属性 对象.style.样式属性 = '值'
con.style.height = '200px'
//多组单词的采取 小驼峰命名法
con.style.borderRadius = '50%'
con.style.backgroundColor = 'hotpink'
</script>
</body>
</html>
07-随机更换背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随机更换背景图片</title>
<style>
body{
background: url(/01-code/image/10.jpg) no-repeat top center/cover;
}
</style>
</head>
<body>
<script>
// console.log(document.body)
function getRandom(N , M){
return Math.floor(Math.random() * (M - N + 1)) + N
}
const random = getRandom(1,11)
document.body.style.backgroundImage = `url(/01-code/image/${random}.jpg)`
</script>
</body>
</html>
08-通过类名修改样式
08-1 使用className有什么好处？
可以同时修改多个样式
08-2 使用className有什么注意事项？
直接使用className赋值会覆盖以前的类名
08-3 代码实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通过类名修改样式</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
.nav{
color: aliceblue;
}
.box{
width: 300px;
height: 300px;
background-color: hotpink;
border-radius: 20px;
margin: auto;
}
</style>
</head>
<body>
<div class="nav">123</div>
<script>
// const con = document.querySelector('div')
//添加类名，由于class是个关键字，我们使用className替代class
// con.className = 'box' //最终代码识别为<div class="box"></div>
//若div想同时满足nav和box的属性，则
const con = document.querySelector('div')
con.className = 'nav box'
</script>
</body>
</html>
09-通过classList修改样式
09-1 追加一个类
元素.classList.add('类名')
09-2 删除一个类
元素.classList.remove('类名')
09-3 切换一个类
//先判断有还是没有这个类，有就删除，没有就加上
元素.classList.toggle('类名')
09-4 使用className和classList的区别？
- classList是追加和删除，并不影响以前的类名
09-5 代码实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通过classList修改样式</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: pink;
}
.active1{
width: 300px;
height: 300px;
background-color: hotpink;
}
.active2{
border-radius: 20px;
margin: auto;
}
</style>
</head>
<body>
<div class="box active2">Hello World!!!</div>
<script>
const con = document.querySelector('.box')
//1、追加类 add() 类名不加点，并且是字符串
con.classList.add('active1')
//2、删除类 remove() 类名不加点，并且是字符串
con.classList.remove('active1')
//3、切换类 toggle() 首先判断有还是没有这个类，有就删除，没有就加上
con.classList.toggle('active2')
</script>
</body>
</html>
10-修改表单元素
<body>
<input type="text" name="" id="" value="Hello">
<input type="checkbox" name="" id="">
<script>
//获取元素
const uname = document.querySelector('input')
//获取值
console.log(uname.value) //text
console.log(uname.innerHTML) //innerHTML得不到表单的内容
//设置表单的值
uname.value = 'Hello World!!!'
console.log(uname.type) //text
uname.type = 'password' //此时文本框内容不显示，由text变为password
console.log(uname.type) //password
console.log('---------两个input不能同时执行--------');
const ipt = document.querySelector('input')
console.log(ipt.checked) //false(只接受布尔值)
ipt.checked = true
ipt.checked = 'true' //也会选中，不提倡，因为涉及隐式转换
console.log(ipt.checked) //true
</script>
</body>
11-自定义属性
11-1 标准属性：
标签天生自带的属性，比如class id title等，可以直接使用点语法操作。比如：disabled、checked、selected
11-2 自定义属性：
- 在html5中推出来了专门的data-自定义属性
- 在标签上一律以data-开头
- 在DOM对象上一律以dataset对象方式获取
11-3 代码示例：
<body>
<div data-box1="I" data-box11="LOVE" data-box111="YOU">1</div>
<div data-box2="ME">2</div>
<div data-box3="MY">3</div>
<script>
const one = document.querySelector('div')
console.log(one.dataset) //DOMStringMap{}
console.log(one.dataset.box1) //I
console.log(one.dataset.box11) //LOVE
console.log(one.dataset.box111) //YOU
</script>
</body>
12-定时器-间歇函数
12-1 设定计时器
setInterval(函数,时间)
12-2 结束计时器
clearInterval(计时器专属id号)
//例如：
let n = setInterval(fn,3000)
clearInterval(n)
12-3 注意事项：
//函数可写成匿名函数，如：
let n = setInterval(function (){
console.log('三秒执行一次')
},3000)
//也可具名函数，如：
function fn(){
console.log('三秒执行一次')
}
let n = setInterval(fn,3000)
12-4 代码实例：
<script>
//setInterval(函数,间隔时间（以毫秒为单位）)
//匿名函数
let num1 = setInterval(function (){
console.log('一秒执行一次')
},1000)
console.log(num1) //1 即第2个定时器
//具名函数
//函数不用加小括号，否则为调用
function fn(){
console.log('1/10秒执行一次')
}
let num2 = setInterval(fn,100)
console.log(num2) //2 即第2个定时器
//关闭定时器
clearInterval(num2)
let i = 0
setInterval(function () {
i++
document.write(`${i}</br>`)
},1000)
</script>
13-阅读协议倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阅读协议倒计时</title>
</head>
<body>
<textarea name="" id="" cols="50" rows="20">
用户注册协议：
一、协议主体与生效
二、服务内容与范围
三、用户权利与义务
（一）用户权利
（二）用户义务
四、我方权利与义务
（一）我方权利
（二）我方义务
五、数据收集与保护
六、服务费用与支付
七、免责声明
八、违约责任
九、协议变更与终止
十、争议解决与其他
</textarea>
<br>
<button class="btn" disabled>我已经阅读用户协议(5)</button>
<script>
//1、获取元素
const btn = document.querySelector('.btn')
console.log(btn.innerHTML) //我已经阅读用户协议(5)
//2、倒计时
let i = 5
//2.1、开启倒计时
let n = setInterval(function(){
i--
btn.innerHTML = `我已经阅读用户协议(${i})`
if (i === 0) {
clearInterval(n)
//定时器停止后，随即启用button
btn.disabled = false
btn.innerHTML = `我同意此用户协议`
}
},1000)
</script>
</body>
</html>
第二章节
01-事件监听
01-1 什么是事件监听？
就是让程序是否有时事件产生，一旦有事件触发，就立即调用一个函数做出响应，也成为 注册事件
01-2 事件监听三要素是什么？
- 事件源（谁被触发了）
- 事件类型（用什么方式触发，点击还是鼠标经过等）
- 事件处理程序（要做什么事情）
01- 3 代码实例：
<body>
<button>点击</button>
<script>
//需求：点击了按钮，弹出一个对话框
//1、事件源 按钮
// 2、事件类型 点击鼠标 click（字符串）
//3、事件处理程序 弹出对话框
const btn = document.querySelector('button')
btn.addEventListener('click',function(){
alert('Hello World!!!!!!')
})
</script>
</body>
02-点击关闭广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关闭广告</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.box{
width: 300px;
height: 200px;
background-color:pink;
margin: 700px 0px;
/* display: none; */
}
.close{
width: 80px;
height: 20px;
/* border: 1px solid red; */
cursor: pointer;
padding: 10px 10px;
font-size: 14px;
}
.close:hover{
background-color: red;
color: aliceblue;
}
</style>
</head>
<body>
<div class="box">
<div class="close">× 点击关闭</div>
</div>
<script>
const con = document.querySelector('.box')
const off = document.querySelector('.close')
off.addEventListener('click',function(){
con.style.display = 'none'
})
</script>
</body>
</html>
03-添加事件并开启与关闭定时器
03-1 添加事件并开启定时器
//1、开启按钮
const start = document.querySelector('.start')
//3、定时器的全局变量
let timerId = 0
//3、添加点击事件
start.addEventListener('click',function () {
//4、添加定时器
timerId = setInterval(function (){
document.write('我爱你~')
},3000)
})
03-2 添加事件并结束定时器
//关闭按钮
const end = document.querySelector('.end')
end.addEventListener('click',function (){
clearInterval(timerId)
})
03-3 综合案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>添加事件并开启与关闭定时器</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.btns {
text-align: center;
}
.btns button {
width: 120px;
height: 35px;
margin: 0 50px;
}
</style>
</head>
<body>
<div class="btns">
<button class="start">开始</button>
<button class="end">结束</button>
</div>
<script>
//1、开启按钮
const start = document.querySelector('.start')
//3、定时器的全局变量
let timerId = 0
//3、添加点击事件
start.addEventListener('click',function () {
//4、添加定时器
timerId = setInterval(function (){
console.log('我爱你~')
},1000)
})
//关闭按钮
const end = document.querySelector('.end')
end.addEventListener('click',function (){
clearInterval(timerId)
})
</script>
</body>
</html>
04-随机点名案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随机点名</title>
<style>
*{
margin: 0px;
padding: 0px;
}
h2{
margin: 20px auto;
text-align: center;
}
.box{
width: 600px;
margin: 50px auto;
display: flex;
font-size: 25px;
line-height: 40px;
}
.name{
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="name">这里显示名字</div>
</div>
<div class="btns">
<button class="start">开始</button>
<button class="end">结束</button>
</div>
<script>
//1、数组数据
const arr = ['张飞','赵云','关羽','马超','黄忠']
//开始按钮
//2、获取开始按钮
const start = document.querySelector('.start')
//5、获取name并进行替换
const name = document.querySelector('.name')
//7、定时器的全局变量
let timerId = 0
//8、随机号要全局变量
let random = 0
//3、添加点击事件
start.addEventListener('click',function () {
//6、添加定时器
timerId = setInterval(function (){
//最后：如果数组中只剩最后一个值，不再进行抽取,同时禁用按钮
if(arr.length === 1){
// start.disabled = true
// end.disabled = true
start.disabled = end.disabled = true
return //一定要返回
}
//4、生成随机数
// const random = Math.floor(Math.random() * arr.length)
//8、将random设为全局变量，并将const设为let
random = Math.floor(Math.random() * arr.length)
// console.log(random)
console.log(arr[random]) //控制台检验是否正常抽取
name.innerHTML = arr[random] //将抽取的名字替换到div.name中
},50)
})
//关闭按钮
const end = document.querySelector('.end')
end.addEventListener('click',function (){
clearInterval(timerId)
//结束时，删除当前抽取的数组元素（避免重复抽名）
arr.splice(random,1)
console.log(arr) //检验删除选中名字后，数组中剩余名字
})
</script>
</body>
</html>
05-事件类型
05-1 鼠标事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标事件</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
const div = document.querySelector('div')
//鼠标经过
div.addEventListener('mouseenter',function (){
console.log('轻轻的我来了')
})
//鼠标离开
div.addEventListener('mouseleave',function (){
console.log('轻轻的我走了')
})
</script>
</body>
</html>
05-2 焦点事件
<body>
<input type="text">
<script>
const input = document.querySelector('input')
input.addEventListener('focus',function (){
console.log('有焦点触发')
})
input.addEventListener('blur',function (){
console.log('失去焦点触发')
})
</script>
</body>
05-2-- 代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米搜索框</title>
<style>
*{
margin: 0px;
padding: 0px;
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="#">平板电脑</a></li>
<li><a href="#">小米17Pro</a></li>
<li><a href="#">洗衣机</a></li>
<li><a href="#">小米笔记本</a></li>
<li><a href="#">冰箱</a></li>
<li><a href="#">空调</a></li>
</ul>
</div>
<script>
//1、获取元素
const input = document.querySelector('[type=search]') //属性选择器
const ul = document.querySelector('.result-list')
console.log(input) //测试打印
//2、监听事件 获得焦点
input.addEventListener('focus',function (){
//ul显示
ul.style.display = 'block'
//添加一个带有颜色边框的类名
input.classList.add('search')
})
//3、监听事件 失去焦点
input.addEventListener('blur',function (){
//ul隐藏
ul.style.display = 'none'
//添加一个带有颜色边框的类名
input.classList.remove('search')
})
</script>
</body>
</html>
05-3 键盘事件
<body>
<input type="text">
<script>
//1、键盘事件
const input = document.querySelector('input')
input.addEventListener('keydown',function (){
console.log('键盘按下了')
})
input.addEventListener('keyup',function (){
console.log('键盘弹起了')
})
//2、用户输入文本事件
input.addEventListener('input',function (){
console.log(input.value)
})
</script>
</body>
06-事件对象event以及常见属性
06-1 事件对象是什么
- 也是个对象，这个对象里有事件触发时的相关信息
- 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
06-2 使用场景
- 可以判断用户按下哪个键，比如按下回车键可以发布评论
- 可以判断鼠标点击了哪个元素，从而做相应的操作
06-3 代码示例：
<body>
<button>点击</button>
<input type="text">
<script>
const btn = document.querySelector('button')
btn.addEventListener('click',function (e){
console.log(e) //PointerEvent
})
const input = document.querySelector('input')
input.addEventListener('keyup',function (e){
//console.log(e.key) //监听键盘按下的是哪一个
if(e.key === 'Enter'){
console.log('我按下了回车键')
}
})
</script>
</body>
07-trim()方法
<body>
<textarea name="" id=""></textarea>
<script>
const str = ' 我 爱你 '
console.log(str.trim())
const tx = document.querySelector('textarea')
tx.addEventListener('keyup',function (e){
if(e.key === 'Enter'){
console.log(tx.value.trim());
}
})
</script>
</body>
08-环境对象
08-1 含义
环境对象：指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境
08-2 作用
弄清楚this的指向，可以让我们代码更简洁
08-3 判断this指向的粗略规则是社么？
【谁调用，this就是谁】
08-4 代码示例：
<body>
<button>点击</button>
<script>
function fn() {
console.log(this)
}
window.fn()
console.log('=-=-=-=-=-=-=-=-=')
const btn = document.querySelector('button')
btn.addEventListener('click',function (){
console.log(this) //this指向btn对象
})
</script>
</body>
Console输出结果：
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
9
0- 0
已为社区贡献2条内容
所有评论(0)