JavaScript 进阶课程笔记 第一天

JavaScript 进阶课程笔记 第一天

一、Web API 基本认知

1.1 作用和分类
  • 作用:就是使用JS去操作 HTML 和浏览器
  • 分类:DOM(文档对象模型),BOM(浏览器对象模型)
1.2 什么是DOM(Document Object Model)

DOM是浏览器提供的一套专门用来操作网页内容的功能

1.3 DOM树
  • 作用:文档书直观的体现了标签与标签之间的关系
1.4 DOM对象

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

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

二、获取DOM元素

2.1 根据CSS选择器来获取DOM元素(重点)

语法

//获取一个元素
document.querySelector('css选择器')
//获取多个元素
document.querySelectorAll('css选择器') //得到一个伪数组
//其他获取DOM元素的方法(了解)
document.getElementById('nav')    id
document.getElementByTagName('div')    标签
document.getElementsByClassName('w')    类名

三、设置/修改DOM元素内容

3.1 document.write() 方法
3.2 对象.innerText 属性
  • 将文本内容添加/更新到任意标签位置
  • 文本中包含的标签不会被解析
3.3 对象.innerHTML 属性(纠结就用它
  • 将文本内容添加/更新到任意标签位置
  • 文本中包含的标签会被解析

四、设置/修改DOM元素属性

4.1 设置/修改元素常用属性

最常见的属性比如: href、title、src 等

4.2 设置/修改元素样式属性
  • 比如通过 轮播图小圆点自动更换颜色样式

  • 点击按钮可以滚动图片,这是移动的图片的位置 left 等等

  • 通过 style 属性操作CSS
    在这里插入图片描述

  • 操作类名(className) 操作CSS
    如果修改的样式较多,需要添加一个类,使用新值换旧值

元素.className = "新的类名"

注:会覆盖掉之前的类名

  • 通过 classList 操作类控制CSS
    为了解决className 容易覆盖以前的类名,我们可以通过classList方式追加和删除类名
//追加一个类
元素.classList.add()
//删除一个类
元素.classList.remove()
//切换一个类
元素.classList.toggle()
4.3 设置/修改 表单元素 属性
表单很多情况,也需要修改属性,比如点击眼睛,可以看到密码,本质是把表单类型转换为文本框
正常的有属性有取值的 跟其他的标签属性没有任何区别
  • 获取: DOM对象.属性名
  • 设置: DOM对象.属性名 = 新值

表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性
比如: disabled、checked、selected

五、定时器-间歇函数

5.1 定时器函数介绍

网页中经常会需要一种功能:每隔一段时间需要自动执行一段代码,不需要我们手动去触发
例如:网页中的倒计时
在这里插入图片描述

5.2 定时器函数基本使用
  1. 定时器函数开启
setInterval(函数名,时间)
  1. 定时器函数关闭
let 变量名 = setInterval(函数,间隔时间)
clearInterval(变量名)
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

RockyBlog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值