前言
JavaScript组成
一、Web API 简介
1. 什么是API?
应用程序接口(API,Application Programming Interface)是基于编程语言构建的结构,使开发人员更容易地创建复杂的功能。使复杂的代码变得抽象化,并提供一些简单的接口规则直接使用。
2. Web API
Web API 是 Web 的应用程序编程接口。
3. Web API 的作用和分类
- 作用:基于JavaScript语法去操作HTML和浏览器。
- 分类:DOM(文档对象模型)、BOM(浏览器对象模型。
二、DOM简介
- DOM(Document Object Model)是用来呈现以及与任意 HTML 或 XML文档交互的API。当网页被加载时,浏览器会创建页面的文档对象模型。
- 用于开发网页内容特效和实现用户交互。
1. DOM树
DOM树是描述网页内容关系的名词,将 HTML 文档以树状结构直观的表现出来,我们称之为文档树或 DOM 树。
作用:直观的体现了标签与标签之间的关系。
2. DOM对象
- DOM对象:浏览器根据html标签生成的 JS对象,把网页内容当做对象来处理。
- 例: document 对象
-网页所有内容都在document里面。
-用来于访问和操作网页内容。
三、获取DOM对象
1. 根据CSS选择器来获取DOM元素
1.1 选择匹配的第一个元素
语法:
document.querySelector('css选择器')
返回选择器匹配的第一个元素,能直接对此方法进行操作修改。
1.2 选择匹配的多个元素
语法:
document.querySelectorAll('css选择器')
返回的元素以伪数组的形式存在,即使只返回一个元素。不能直接进行修改,需通过遍历数组访问。
2. 其他获取DOM元素方法
2.1 id获取
<div id="info">我是酷盖!</div>
<script>
// id法获取元素
let info=document.getElementById('info')
</script>
2.1 标签名获取
// 获取页面所有这一类元素
let title=document.getElementsByTagName('h3')
2.1 类名获取
<div class="text">我是酷盖!</div>
<script>
// 获取页面中类名为text的元素
let text=document.getElementsByClassName('text')
</script>
四、设置/修改DOM元素内容
1. document.write()
- 能追加body标签结束之前的文本内容。
- 文档中包含的标签也会被解析。
document.write('<div> 我是酷盖 </div>')
//用反引号``包含内容可支持换行和变量添加。
let i=1
document.write(`
<div> ${i}个酷盖 </div>
<div> ${i+1}个酷盖 </div>
`)
2. 对象.innerText 属性
- 将文本内容添加/更新到任意标签位置。
- 文本中包含的标签不会被解析。
let info=document.querySelector('info')
// 对象.属性=值
info.innerText='我真的是一个酷盖!'
//不识别标签
info.innerText='<strong>我真的是一个酷盖!</strong>'
3. 对象.innerHTML 属性
- 将文本内容添加/更新到任意标签位置。
- 使用方法和对象.innerText一样,不同的是能识别HTML标签。
let info=document.querySelector('info')
// <strong>标签起作用
info.innerText='<strong>我真的是一个酷盖!</strong>'
五、设置/修改DOM元素属性
1. 设置/修改元素常用属性
语法:
对象.属性 = 值
例:
<img src="./images/1.jpg" alt="">
<script>
// 1.获取元素
let pic = document.querySelector('img')
// 2.修改元素属性
pic.src = `./images/2.jpg`
pic.title = '谁还不是个酷盖了~'
</script>
2. 设置/修改元素样式属性
2.1 通过style属性操作CSS
语法:
对象.style.样式属性 = 值
例:
<div class="box"></div>
<script>
let box = document.querySelector('.box')
// 语法 对象.style.样式属性=值
box.style.height = '100px'
box.style.border = '1px solid red'
// 有连接符需转换为小驼峰命名法
box.style.backgroundColor = 'green'
2.2 操作类名(className) 操作CSS
当修改的样式比较多的时候,借助类名进行修改比较方便。
语法:
元素.className = '类名'
例:
<div class="txt"></div>
<script>
// 获取元素
let div = document.querySelector('.txt')
// 修改元素类名
div.className = 'box'
// 给元素添加类名 (保持原有类名)
div.className = 'box ins'
</script>
2.3 通过 classList 操作类控制CSS
此方法解决了className 容易覆盖以前类名的问题。
语法:
// 添加类
box.classList.add('类名')
// 删除类
box.classList.remove('类名')
// 切换类
box.classList.toggle('类名')
切换类就是在有类和无类之间来回切换,如果元素本身没有这种类,则给它加上,如果元素有这种类,则给它去除。例如可应用于下拉菜单,显示和隐藏切换。
3. 设置/修改表单属性
表单中有显示隐藏转换效果的属性,一律使用布尔值表示,如:disabled、checked、selected等。值为true;代表添加了该属性;如果值为false ,代表移除了该属性。
例:
<input type="text" value="请输入">
<button disabled>提交</button>
<input type="checkbox" checked="checked" class="check">
<script>
let input = document.querySelector('input')
// 修改value属性值
input.value = ' '
input.value = '我是酷盖'
// 隐藏文字
input.style = 'password'
// 添加表单效果
let btn = document.querySelector('button')
btn.disabled = false
// 禁止启用复选框
let checkbox = document.querySelector('.check')
checkbox.checked = false
</script>
六、 定时器-间歇函数
1. 定时器函数介绍
- 功能体现: 在页面中每隔一段时间自动实现效果,无需手动触发。
- 例如:京东秒杀倒计时模块、网页轮播图模块。
- 定时器函数有两种,今天先学间歇函数。
2. 定时器函数基本使用
2.1 开启定时器
语法:
setInterval(函数,时间间隔)
例:
// 写法一
let timer=setInterval(function print() {
console.log('你不是酷盖,你是奶盖!')
},1000)
//写法二
function print() {
console.log('你不是酷盖,你是奶盖!')
}
// 每隔1s调用一次print函数
let num1 = setInterval(print, 1000)
注意:
- 函数名字不需要加括号。
- 定时器返回的是一个数字,定时器的序列号。
例:
function print() {
console.log('你不是酷盖,你是奶盖!')
}
let num1 = setInterval(print, 1000)
let num2 = setInterval(print, 1000)
let num3 = setInterval(print, 1000)
console.log(num1)
console.log(num2)
console.log(num3)
返回值显示:
2.2 关闭定时器
语法:
let 变量名 = setInterval(函数, 间隔时间)
// 清除间歇函数
clearInterval(变量名)
注意:
函数刚创建时不会使用,当满足某些条件时,再添加该代码,防止函数功能不生效。