JavaScript学习笔记(五)

JavaScript学习笔记(五)

本文为黑马程序员JavaScript学习笔记

对象

对象(object)是JavaScript里的一种数据类型，可以理解为是一种无序的数据集合，有点像Python中的字典或json。

对象使用

对象声明语法

let 对象名 = {}
let 对象名 = new Object()

let person = {}

对象的组成

• 属性：信息或特征
• 方法：功能或行为

let 对象名 = {
  属性名: 属性值, 
  方法名: 函数
}

属性

let obj = {
  uname: 'minxin',
  age: 18,
  gender: '男'
}

查

语法：对象名.属性

console.log(obj.uname)
console.log(obj[uname]) // 如果属性名是字符串，只能用这种方法

改

语法：对象名.属性 = 新值

obj.uname = 'minxin_'

增

语法：对象名.新属性 = 值

obj.address = 'China'

删

语法：delete 对象名.属性

对象中的方法

let person = {
  name: 'minxin',
  sayHi: function(){
    document.write('hi~')
  }
}
person.sayHi()

遍历对象

使用for in 语法

for(let k in obj){
  console.log(k) //打印属性名
  console.log(obj[k]) // 打印属性值
}

内置对象

JavaScript内部提供的对象，包含各种属性和方法给开发者调用

Math对象

一些常用的Math对象方法。

函数	含义	示例代码	输出
Math.random()	生成 0 到 1 之间的随机数（包含 0 不包含 1）	Math.random()	例如：0.5342
Math.ceil()	向上取整	Math.ceil(3.2)	4
Math.floor()	向下取整	Math.floor(3.8)	3
Math.round()	四舍五入	Math.round(3.5)	4
Math.max()	找最大数	Math.max(3, 5, 1)	5
Math.min()	找最小数	Math.min(3, 5, 1)	1
Math.pow()	幂运算	Math.pow(2, 3)	8
Math.abs()	绝对值	Math.abs(-7)	7
Math.PI	圆周率常量（≈3.14159）	Math.PI	3.141592653…

Web API基本认识

作用：使用JS去操作html和浏览器

分类：DOM(文档对象模型)、BOM(浏览器对象模型)

DOM

DOM是用来呈现以及与任意HTML或XML文档交互的API

DOM树

将HTML文档以树状结构直观的表现出来，我们称之为文档树或DOM树，直观的体现了标签与标签之间的关系。

DOM对象

浏览器根据html标签生成的JS对象

• 所有的标签属性都可以在这个对象上面找到
• 修改这个对象的属性会自动映射到标签身上

<div>123</div>
<script>
	const div = document.querySelector('div')
  console.log(div)
</script>

获取DOM元素

• 根据CSS选择器来获取DOM元素
• 其他获取DOM元素方法

根据CSS选择器来获取DOM元素

选择匹配的第一个元素

document.querySelector('CSS选择器')

<div>123</div>
<div class='box'>123</div>
<p id='nav'>导航栏</p>
<ul>
  <li>123</li>
  <li>123</li>
  <li>123</li>
</ul>
<script>
const div = document.querySelector('div')
const box = document.querySelector('.box')
const nav = document.querySelector('#nav')
const li = document.querySelector('ul li:first-child')
</script>

必须要加引号

返回值是对象，如果没有匹配返回的为空

选择匹配的多个元素

document.querySelectorAll('CSS选择器')

返回的是一个对象数组，但这是一个伪数组，有长度有索引号，但是没有pop()和push()等数组方法

即使只匹配到了一个元素，返回的也是一个伪数组

获取整个页面

document.body

其他获取DOM元素的方法(了解)

// 根据id获取一个元素
document.getElementById('nav');
// 根据标签获取一类元素 获取页面所有div
document.getElementsByTagName('div');
// 根据类名获取元素 获取页面所有类名为 w 的
document.getElementsByClassName('w');

操作元素内容

• 对象.innerText属性
• 对象.innerHTML属性

<div class="box">我是文字的内容</div>
<script>
  const box = document.querySelector('.box');
  console.log(box.innerText); 
  box.innerText = '我是一个盒子';
	console.log(box.innerText); 
	box.innerText = '<strong>我是一个盒子</strong>'; // 不解析标签
</script>

innerText不解析标签

console.log(box.innerHTML);
box.innerHTML = '<strong>我要更换</strong>';
console.log(box.innerHTML);

innerHTML解析标签

抽奖案例

<div class="wrapper">
  <h1>一等奖：<span id="one">???</span></h1>
  <h3>二等奖：<span id="two">???</span></h3>
  <h5>三等奖：<span id="three">???</span></h5>
</div>

<script>
  const personArr = ['周杰伦', '刘德华', '周星驰', 'minxin', '张学友'];
  const span = document.querySelectorAll('.wrapper span');

  for (let i in span) {
    let random = Math.floor(Math.random() * personArr.length);
    span[i].innerHTML = personArr[random];
    personArr.splice(random, 1); 
  }

操作元素属性

操作元素常用属性

通过JS设置/修改标签元素属性，常见的属性比如：href、title、src等

对象.属性 = 值

const pic = document.querySelector('img');
pic.src = './images/b02.ipg';
pic.title = '图片'

操作元素样式属性

可以通过JS设置/修改标签元素的样式属性，方式：

• 通过style属性操作CSS
• 操作类名操作CSS
• 通过classList操作类控制CSS

通过style属性操作CSS

const box = document.querySelector('.box');
box.style.width = '400px'; // 一定要加单位
box.style.backgroundColor = 'hotpink';

有-的属性名要转换为小驼峰命名法

操作类名操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式

元素.className = '类名'

const div = document.querySelector('div');
div.className = 'box';

注意：className会覆盖原来类名，如果需要替换后仍有多个类名，可以用这样的形式：nav box

通过classList操作类控制CSS

为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

// 添加一个类
元素.classList.add('类名')
// 删除一个类
元素.classList.remove('类名')
// 切换一个类
元素.classList.toggle('类名')

const box = document.querySelector('.box');
// 添加类名 active
box.classList.add('active');
// 删除类名 hidden
box.classList.remove('hidden');
// 切换类名 selected（有就删除，没有就添加）
box.classList.toggle('selected');

操作表单元素属性

获取用户输入

<input type="text">
<script>
	const uname = document.querySelector('input');
  console.log(uname.value);
  // 设置表单的值
  uname.value = '我要买电脑';
  uanme.type = 'password' // 可以用于实现密码输入的
</script>

多选框有个checked属性，用了控制这个多选框是否选择

const ipt = docuent.querySelector('input')
console.log('ipt.checked')
ipt.checked = true

按钮是否能点击

const button = document.querySelector('button');
console.log(button.disabled)  // 默认 false 不禁用
button.disabled = true;

操作元素属性

• 标准属性：标签天生自带的属性，比如class id title等，可以直接使用点语法操作
• 自定义属性
  • 在html5中推出的专门的data-自定义属性
  • 在标签上一律data-开头
  • 在DOM对象上一律以dataset对象方式获取

<div data-id="1" data-spm="不知道">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>

<script>
  const one = document.querySelector('div');
  console.log(one.dataset);
  console.log(one.dataset.spm);
</script>

定时器-间歇函数

网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发，例如：网页中的倒计时。实现这种需求需要定时器

开启定时器

setInterval(函数, 间隔时间)

作用：每隔一段时间调用这个函数

间隔时间单位是毫秒

setInterval(function(){
  console.log("一秒执行一次")
}, 1000)

function fn(){
  console.log('一秒执行一次')
}
setInterval(fn, 1000)

注意：fn后面一定不要加小括号，setInterval接受传入的是函数名

注意：第一次开始执行时进入页面后的间隔时间之后

定时器返回的是一个id数字，可以被变量接收

let n = setInterval(fn, 1000)

接收定时器

clearInterval(变量名)

let timer = setInterval(function() {
  console.log('hi~~');
}, 1000);
clearInterval(timer);