作用:监视 html 或引入的css、js的变化,在保存文件时,该插件就会帮我们自动刷新浏览器。
如何使用?注意:不再双击打开 html 页面!
使用方式:在 html 文件中,点击鼠标右键,再点击 Open with Live Server 按钮即可。
注意:html 文件所在的文件夹名称不要包含中文,否则,打开页面失败,插件功能无法生效!
=======================================================================
注意:浏览器中只能运行 JS,无法直接运行 TS,因此,需要将 TS 转化为 JS 然后再运行。
浏览器中运行 TS 的步骤:
-
使用命令 tsc index.ts 将 ts 文件转化为 js 文件。
-
在页面中,使用 script 标签引入生成的 js 文件(注意是 js 文件)。
问题:每次修改 ts 文件后,都要重新运行 tsc 命令将 ts 转化为 js 。
解决方式:使用 tsc 命令的监视模式
。
tsc --watch index.ts
解释: --watch 表示启用监视模式,只要重新保存了 ts 文件,就会自动调用 tsc 将 ts 转化为 js。
====================================================================
DOM(Document Object Modal):文档对象模型。
DOM 是浏览器提供的(浏览器特有),专门用来操作网页内容的一些 JS 对象。
目的:让我们可以使用 JS/TS 代码来操作页面(HTML)内容,让页面“动”起来,从而实现 Web 开发。
HTML:超文本标记语言,用来创建网页结构。
两者的关系:浏览器根据 HTML 内容创建相应的 DOM 对象,也就是:每个 HTML 标签都有对应的 DOM 对象。
学习四个常用 DOM 操作:1 获取 DOM 元素(DOM 对象) 2 设置样式 3 设置内容 4 绑定(解绑)事件。
DOM 操作的套路(技巧):先找人 后做事。
-
找人:获取 DOM 元素。
-
做事:设置样式、内容、绑定(解绑)事件。
document.title = ‘等你下课’
比如: 将 p 标签中的内容修改为:天青色等烟雨而我在等你。
步骤: 1 获取 p 元素 2 设置内容。
常用方法有两个:
-
querySelector(selector) 作用:获取某
一个
DOM 元素。 -
querySelectorAll(selector) 作用:同时获取
多个
DOM 元素。
- 获取一个 DOM 元素:
document.querySelector(selector)
document 对象:文档对象(整个页面),是操作页面内容的入口对象。
selector 参数:是一个 CSS 选择器(标签、类、id 选择器等)。
作用:查询(获取)与选择器参数匹配的 DOM 元素,但是,只能获取到第一个
!
推荐:使用 id 选择器(唯一)。
let title = document.querySelector(‘#title’)
解释:获取页面中 id 为 title 的 DOM 元素。
- 类型断言
问题:调用 querySelector() 通过 id 选择器获取 DOM 元素时,拿到的元素类型都是 Element
。
因为无法根据 id 来确定元素的类型,所以,该方法就返回了一个宽泛的类型:元素(Element)类型。
不管是 h1 还是 img 都是元素。
导致新问题:无法访问 img 元素的 src 属性了。
因为:Element 类型只包含所有元素共有的属性和方法(比如:id 属性)。
解决方式:使用类型断言
,来手动指定更加具体的类型(比如,此处应该比 Element 类型更加具体)。
语法:
值 as 更具体的类型
比如:
let img = document.querySelector(‘#image’) as HTMLImageElement
解释:我们确定 id=“image” 的元素是图片元素,所以,我们将类型指定为 HTMLImageElement。
技巧:通过 console.dir()
打印 DOM 元素,在属性的最后面,即可看到该元素的类型。
总结:
类型断言:手动指定更加具体(精确)的类型。
使用场景:当你比 TS 更了解某个值的类型,并且需要指定更具体的类型时。
// document.querySelector() 方法的返回值类型为: Element
// 如果是 h1 标签:
let title = document.querySelector(‘#title’) as HTMLHeadingElement
// 如果是 img 标签:
let image = document.querySelector(‘#image’) as HTMLImageElement
技巧:通过 console.dir()
打印 DOM 对象,来查看该元素的类型。
- 获取多个 DOM 元素:
document.querySelectorAll(selector)
作用:获取所有与选择器参数匹配的 DOM 元素,返回值是一个列表。
推荐:使用 class 选择器。
示例:
let list = document.querySelectorAll(‘.a’)
解释:获取页面中所有 class 属性包含 a 的元素。
读取:
dom.innerText
设置:
dom.innerText = ‘等你下课’
注意:需要通过类型断言
来指定 DOM 元素的具体类型,才可以使用 innerText 属性。
注意:设置内容时,会覆盖原来的内容。如何实现追加内容(比如,青花瓷 → 青花瓷 – 周杰伦)?
dom.innerText = dom.innerText + ’ – 周杰伦’
// 简化
dome.innerText += ’ – 周杰伦’
两种方式:
-
dom.style
属性:行内样式操作,可以设置每一个样式属性(比如,字体大小、文字颜色等)。 -
dom.classList
属性:类样式操作,也就是操作类名,比如,添加类名、移除类名等。
- style 属性(行内样式)
读取:
dom.style.样式名称
设置:
dom.style.样式名称 = 样式值
说明:所有的样式名称都与 CSS 相通,但命名规则为驼峰命名法。
dom.style.fontSize = ‘30px’
dom.style.display = ‘none’
- classList 属性(类样式)
包含三个常用方法:添加、移除、判断是否存在。
- 添加:
dom.classList.add(类名1, 类名2, …)
参数表示:要添加的类名,可以同时添加多个。
比如:
dom.classList.add(‘b’, ‘c’) // 添加 class 样式 ==> class=“a b c”
- 移除:
dom.classList.remove(类名1, 类名2, …)
参数表示:要移除的类名,可以同时移除多个。
比如:
dom.classList.remove(‘a’, ‘c’) // 移除 class 样式 ==> class=“b”
- 判断类名是否存在:
let has = dom.classList.contains(类名)
参数表示:要判断存在的类名。
比如:
dom.classList.contains(‘a’) // false
dom.classList.contains(‘b’) // true
在浏览网页时,我们经常会通过移入鼠标、点击鼠标、敲击键盘等操作,来使用网站提供的功能。
如果要让我们自己实现这样的功能,就需要通过操作事件来实现了。
实际上,移入鼠标、点击鼠标、敲击键盘等,都是常见的 DOM 事件。
操作事件的两个方法:
-
addEventListener 添加(绑定)事件。
-
removeEventListener 移除(解绑)事件。
- addEventListener 添加事件
作用:给 DOM 元素添加事件。
dom.addEventListener(事件名称, 事件处理程序)
事件名称:字符串,比如:‘click’(鼠标点击事件)、‘mouseenter’(鼠标进入事件)。
事件处理程序:回调函数,指定要实现的功能,该函数会在触发事件时调用。
示例:鼠标点击按钮,打印内容。
btn.addEventListener(‘click’, function () {
console.log(‘鼠标点击事件触发了’)
})
事件对象(event
),是事件处理程序(回调函数)的参数。
表示:与当前事件相关的信息,比如:事件类型(type)、触发事件的 DOM 元素(target)等。
btn.addEventListener(‘click’, function (event) {
console.log(event.type) // click
console.log(event.target) // btn 元素
})
- removeEventListener 移除事件
作用:移除给 DOM 元素添加的事件,移除后,事件就不再触发了。
dom.removeEventListener(事件名称, 事件处理程序)
事件名称:同添加事件的第一个参数。
事件处理程序:必须要跟添加事件时的事件处理程序是同一个,否则无法移除!
正确方式:
function handleClick() {}
btn.addEventListener(‘click’, handleClick)
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
![](https://i-blog.csdnimg.cn/blog_migrate/ece0c8d8b90f6c3c4752a543aa39bc8d.jpeg)
最后
正值金三银四招聘旺季,很多小伙伴都询问我有没有前端方面的面试题,特地整理出来赠送给大家!
待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。**
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-5NKcDCYO-1712211453347)]
[外链图片转存中…(img-Rho9dYFI-1712211453348)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
[外链图片转存中…(img-5CHXHTKt-1712211453348)]
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
![](https://i-blog.csdnimg.cn/blog_migrate/ece0c8d8b90f6c3c4752a543aa39bc8d.jpeg)
最后
正值金三银四招聘旺季,很多小伙伴都询问我有没有前端方面的面试题,特地整理出来赠送给大家!