- 博客(16)
- 收藏
- 关注
原创 JS高级部分
1.方式1 函数声明方式 function 关键字 (命名函数)2.方式2 函数表达式(匿名函数)3.方式3 new Function()f(1, 2);var fn = new Function('参数1','参数2'..., '函数体')注意/*Function 里面参数都必须是字符串格式第三种方式执行效率低,也不方便书写,因此较少使用所有函数都是 Function 的实例(对象)函数也属于对象*/
2023-03-26 22:30:42
302
原创 浮动相关知识点笔记
float 属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。语法:选择器 { float: 属性值;为什么需要清除浮动?父级没高度。子盒子浮动了。影响下面布局了,我们就应该清除浮动了。
2023-03-26 20:17:22
251
原创 css的三大特性
CSS中的继承: 子标签会继承父标签的某些样式,如文本颜色和字号。相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。继承的权重是0, 如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是 0。(text-,font-,line-这些元素开头的可以继承,以及color属性)样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式。权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重。如果子元素没有设置行高,则会继承父元素的行高为 1.5。样式不冲突,不会层叠。
2023-03-26 20:00:56
165
原创 Cannot find module ‘html-webpack-plugin‘
npm i -d 表示开发环境使用,所以可能没有安装到开发环境中。
2023-03-13 18:00:20
361
原创 TS环境搭建及基本数据类型
下载安装nodejs使用npm全局安装typescript创建一个ts文件使用tsc对ts文件进行编译进入命令行进入ts文件所在的目录执行命令:tsc xxx.ts生成xxx.js文件执行 node xxx.js文件或者建立一个html的文件 引入生成的js的路径,运行html文件,将打印结果在页面展示。
2023-03-12 21:00:59
282
原创 webpack基础使用
HMR的核心就是客户端从服务端拉去更新后的文件,准确的说是 chunk diff (chunk 需要更新的部分),实际上 WDS 与浏览器之间维护了一个 Websocket,当本地资源发生变化时,WDS 会向浏览器推送更新,并带上构建时的 hash,让客户端与上一次资源进行对比。在以上过程中,Webpack 会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。webpack是基于入口的。
2023-03-03 21:27:57
172
原创 webpack准备工作
devDependencies 开发你的包需要依赖的包, 比如yarn add webpack webpack-cli -D (-D 相当于 --save-dev)和 npm 类似, 都是包管理工具, 可以用于下载包, 就是比npm快。npm下载的包和对应版本号, 都会记录到下载包时终端所在文件夹下的package.json文件里。可以去阿里巴巴矢量图标库, 选中想要的图标, 登录后, 生成css文件和字体文件。什么是服务器, 本地启动node服务, 服务器和浏览器关系, 服务器作用。
2023-03-03 21:02:23
133
原创 webpack核心问题
在webpack.config.js的rules里针对字体图标文件类型设置asset/resource,直接输出到dist下。webpack-dev-server会给我们一个地址+端口浏览器访问即可看到在内存中打包的index.html页面。执行package.json里的build命令,间接执行webpack打包命令。执行webpack命令,找到配置文件,入口和依赖关系,打包代码输出到指定位置。如何使用webpack开发服务器实时打包我们的代码呢?如何使用webpack开发服务器实时打包我们的代码呢?
2023-03-03 20:57:15
77
原创 音乐网站设计
本次课设,通过自己对相关系统进行分析以及设计,使我对前端课程有了更近一步了解。在课程设计过程中,首先要从需求分析出发,对系统进行深入分析。需求分析是前提,只有做好了分析,设计的系统才能符合用户的需求,对前端的内容html,css,js的初步了解通过查阅有关图书信息,以及回忆之前所学内容,运用vue框架完成了本次实训,总结了很多有价值有意义的学习经验,还能让我把以前学到的知识加以巩固并且进一步的提高对现在所学知识的理解,让我认识到了自己在以前学习方面的不足之处。以后还需要继续努力。
2023-03-03 20:38:48
5159
4
原创 网页特效案例
鼠标经过某个小li,把当前小li的offsetLeft 位置做为目标值即可。如果点击了某个小li, 就把li当前的位置存储起来,做为筋斗云的起始位置。只需要把所有的left 相关的值改为 跟 页面垂直滚动距离相关就可以了。2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。5.鼠标不经过轮播图,轮播图也会自动播放图片。轮播图也称为焦点图,是网页中比较常见的网页特效。6.鼠标经过,轮播图模块, 自动播放停止。利用动画函数做动画效果。
2023-02-16 10:29:38
128
原创 dom-自定义属性操作和节点操作
script>// 1. 获取元素的属性值// (1) element.属性//(2) element.getAttribute('属性') get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM 中,节点使用 node 来表示。HTML DOM 树中的所有节点均可通过 JavaScript 进行访问,所有 HTML 元素(节点)均可被修改,也可以创建或删除。
2023-02-15 17:56:06
655
原创 dom -操作元素
JavaScript的 DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。(注意:这些操作都是通过元素对象的属性实现的)
2023-02-15 15:14:19
92
原创 API-事件基础
JavaScript 使我们有能力创建动态页面,而事件是可以被 JavaScript 侦测到的行为。简单理解:触发--- 响应机制。网页中的每个元素都可以产生某些可以触发 JavaScript 的事件,例如,我们可以在用户点击某按钮时产生一个 事件,然后去执行某些操作。
2023-02-15 13:52:45
157
原创 WebAPI
API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,无需理解其内部工作机制细节,只需直接调用使用即可。简单点说就是 API 是为我们提供的一个接口,帮助我们实现某种功能,我们会使用就可以了,不必纠结内部如何实现。
2023-02-15 12:46:12
147
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人