JS的数据类型
值类型/简单数据类型/基本数据类型
变量中存储的是值本身
- string
- number
- boolean
引用数据类型
变量中存储的是地址
- 通过new关键字创建的对象
- arr
- object
变量声明
- const 声明的值不能修改,且声明变量时需要初始化
- let 变量的值会修改
获取对象
选择匹配的第一个元素
document.querySelector('css选择器')
选择匹配的第多个元素
document.querySelectorAll('css选择器')
- 得到的是伪数组
- 有长度有索引号的数组
- 没有pop() push()等方法
- 参数是字符串
操作元素内容
获取文字内容
const box = document.querySelector(".box")
console.log(box.innerText);
- innerText 不解析标签
console.log(box.innerHTML);
box.innerHTML = '我是猪猪包'
- innerHTML 解析标签
操作元素属性
常用属性
对象.属性名=新值
样式属性
通过style属性操作css
对象.style.样式属性=新值
// 1.获取元素
const box = document.querySelector('.box')
// 2.修改样式属性
box.style.width = '400px' //字符串
box.style.backgroundColor = 'hotpink'//background-color不可以,使用小驼峰命名
box.style.border = '2px solid blue'
- 生成的是行内样式,权重大于内部样式
通过className属性操作css
元素.className='类名'
- 会覆盖之前的类
<style>
.box {
width: 100px;
height: 100px;
}
div {
background-color: #8bd4ff;
}
</style>
// 1.获取元素
const div = document.querySelector('div')
// 添加类名
div.className = 'box div'
- 可以同时修改许多元素
通过classList属性操作css
// 追加一个类
元素.classList=add('类名')
// 删除一个类
元素.classList=remove('类名')
// 切换一个类
元素.classList=toggle('类名')
.box{
width: 200px;
height: 100px;
color: black;
}
.active{
color: #ff0000;
}
<div class="box">文字</div>
<script>
const box = document.querySelector('.box')
// 追加类
// 类名不加点,且是字符串
box.classList.add('active')
// 删除类
box.classList.remove('box')
// 切换类,有就加上没有就删掉
box.classList.toggle('box')
</script>
- 不替换以前的类名
操作表单元素属性
基本操作方法
对象.属性名=新值
<!-- <input type="text" value = '电脑'> -->
<input type="checkbox" checked>
<button disabled>点击</button>
<script>
// const uname = document.querySelector('input')
// // 获取表单属性不是innerHTML,innerHTML得不到表单内容
// console.log(uname.value);
// uname.value = '我要买电脑'
// uname.type = 'password'
const checkbox = document.querySelector('input')
console.log(checkbox.checked);
const button = document.querySelector('button')
console.log(button.disabled);
</script>
自定义属性
- 必须以data-开头
- 查看时使用dataset
<div data-id="1" data-wen="423">1</div>
<div data-id="2">2</div>
<div data-id="3">3</div>
<div data-id="4">4</div>
<div data-id="5">5</div>
<div data-id="6">6</div>
<script>
const one = document.querySelector('div')
console.log(one.dataset);
+</script>
定时器-间歇函数
开定时器
setInterval(函数,间隔时间)
关闭定时器
let 变量名=setInterval(函数,间隔时间)
clearInterval(变量名)