前端开发笔记
栓q
橘 日向
这个作者很懒,什么都没留下…
展开
-
js-12Dom节点对象
【代码】js-12Dom节点对象。原创 2022-11-29 14:43:01 · 155 阅读 · 0 评论 -
IDEA编辑器使用配置记录
文件-设置-高级设置-编辑器-勾选原创 2022-11-30 09:20:08 · 104 阅读 · 0 评论 -
TypeScript入坑
会监视输出文件,在它们改变时重新编译成js文件,避免重复手动操作。如果由于缺乏声明而不能推断出类型,那么它的类型被视作默认的动态 any 类型。当类型没有给出时,TypeScript 编译器利用类型推断来推断类型。实现功能:定义一个函数,要求参数类型与返回值类型一致。类型注解:在变量定义时,需要声明变量的数据类型。可查看到版本信息,则说明安装成功。安装完毕后,可在命令行中使用。tsc 文件名–watch。相当于是定义类时使用到的模板。的定义就是一个泛型的结构。可看作是一个类型变量。原创 2022-11-30 09:19:07 · 423 阅读 · 0 评论 -
React技术点入坑
图表后台文档说明移动端ant design 组件库4.x版本3/4年前来项目 3.x版本。原创 2022-11-29 14:33:54 · 833 阅读 · 0 评论 -
Git代码管理工具
分布式的版本控制系统。原创 2022-11-29 14:32:18 · 497 阅读 · 0 评论 -
js-day10Data&Bom
01回顾02日期时间对象Date1 =>作用:处理日期时间=>创建对象:构造函数var date = new Date()=>表示当前日期时间2 =>常用方法getFullYear()getMonth() //月份从0开记数,当前月份需要值加一getDate()getHours()getMinutes()getSeconds()getTime()getDay() 3 => 创建指定日期时间对象 var date =原创 2022-05-02 19:24:59 · 219 阅读 · 0 评论 -
js-day09Math对象&进制
01.回顾1数组Array2简单对象 -创建方法 构造函数 字面量 -属性和方法 用点语句访问 名字.属性 名字.方法() -遍历简单对象 for(var key in obj){ //obj[key] 遍历属性值 }03字符串、数值、布尔值是一个包装数据类型 -字符串对象 构建方法: 字面量 构造函数 使用点语句变成复杂数据类型 -属性 .length -索引 str[i原创 2022-05-02 19:23:51 · 186 阅读 · 0 评论 -
js-day08简单对象&字符串对象
01.回顾02.简单对象1、面向对象 1、现实生活中-对象 对象: 具体一个事物 区分不同对象: 特征和行为 2、软件世界-对象 自己创建对象 内置对象: 有 数组Array var arr = new Array() 构造函数 var arr = [] 字面量 对象才有属性和方法 区分对象:属性和方法 arr.length 属性原创 2022-03-20 22:59:16 · 119 阅读 · 0 评论 -
js-day07数组方法&排序
01回顾知识回顾:- 程序语句应用程序 = 程序语句 + 数据结构 + 算法- 数组基础- 数组是做什么的?- 数组创建方式- 访问数组元素+ 索引号- 数组length属性- 数组遍历- 数组数据类型Array- 数组常用方法- push- unshift- pop- shift- splice- sort- reverse - join - indexOf - includes ... -原创 2022-03-20 20:45:54 · 953 阅读 · 0 评论 -
js-day06数组
应用程序 = 程序语句 + 数据结构 + 算法数据结构: 线形表, 链表, 堆栈 , 队列, 树, 图 01、数组: 线形表 一、数组是做什么? 存储一系列有序数据的集合 var num = 100 100 ,200, 300, 400 一系列 二、数组创建 两种方法 - 构造函数: new Array() //空数组原创 2022-03-20 19:17:38 · 75 阅读 · 0 评论 -
js-学习计划
二阶段和一阶段区别- 学习内容1. 逻辑思维2. 记忆 - 待遇不同 二阶段学习 时间: 八周 第一周 javascript语法基础 变量 数据类型 逻辑分支语句 if if-else 循环语句 for while do-while 函数 第二周 javascript内置对象 数组 Array 简单原创 2022-03-20 16:36:47 · 210 阅读 · 0 评论 -
js-day05预编译&递归函数
0.今日目标1.预编译2.函数自带的对象arguments3.递归函数4.常用事件1.预编译预编译:函数在逐行执行之前,会先进行预编译 变量提升:【将变量的声明代码提升到作用域的最前面】 var定义的变量 声明式定义的函数 return后面的语句 if里面的语句【即使条件不成立的情况,也会变量提升】2.arguments-函数自带的对象:记录函数参数相关的信息获取函数实参的个数 arguments.leng原创 2022-03-12 09:43:36 · 66 阅读 · 0 评论 -
js-day04函数&返回值
0.今日目标1.两种定义函数的方式及区别2.形参和实参3.带参函数的定义4.函数的返回值1.函数函数:一段代码的封装。主要用于实现某个功能。 【函数是代码封装和复用的体现】1.定义 1.声明式 function 函数名(){ 函数体; } 2.表达式 let|var 函数名 = function(){ 函数体 } 注意:函数不会原创 2022-03-12 09:40:23 · 176 阅读 · 0 评论 -
js-day03循环控制语句
0.今日目标1.循环的概念及四要素2.for循环的语法3.while的语法4.do while的语法5.跳出循环1.for循环语法: for(初始化①;循环条件②;更新循环变量③){ 循环体④; }循环四要素: 初始化:初始信息的设置-比如循环变量的设置 循环条件:循环要执行需要满足的条件 更新循环变量: 循环体:要重复执行的代码循环执行顺序:①②④③ ②④③...说明:反引号里面使用 ${变量名} 在网页输出中可以原创 2022-03-09 20:44:10 · 101 阅读 · 0 评论 -
js-day02运算符&分支流程语句
0.课程目标1.运算符2.分支流程-if3.分支流程-switch1.运算符1.算术运算符 + - * / % ++ -- 【a++代表先用后加,++a代表先加后用】2.比较运算符 > < >= <= ==【判定值相等】 ===【全等-值和类型都相等】 !=不等 !==3.逻辑运算符 &&与 ||或者 !非-取反4.赋值运算符 = += *=原创 2022-03-08 21:01:25 · 102 阅读 · 0 评论 -
js-day01js引入输出&数据类型
0.课程目标1.js及其组成2.js的三种引入方式3.js的四种输出方式4.变量5.数据类型6.数据类型的强制转换7.运算符1.js的概念及组成概念:JavaScript。基于事件和对象驱动,具有相对安全性的解释型客户端脚本语言。组成: BOM:browser object model 浏览器对象模型,对浏览器进行操作 DOM:document object model 文档对象模型,对元素、属性、属性值进行操作 ECMAScript:ES核心语法,变量、数据类型原创 2022-03-07 21:25:36 · 463 阅读 · 0 评论 -
html-day15手机端知识点
1.手机端术语说明物理像素:屏幕出厂就确定的 css像素:逻辑像素,css里面的px的单位dpr设备像素比 = 物理像素/逻辑像素;移动端视口的设置/理想视口的设置:<meta name="viewport" content="width=device-width, initial-scale=1.0">2. 响应式响应式:一套代码,能够适配多个平台,不论屏幕尺寸或者设备类型都能显示比较正常的效果。原理:利用媒体查询 @media3.移动端适配1.使用百分比。2.使用原创 2022-03-06 14:02:10 · 63 阅读 · 0 评论 -
html-dat14弹性盒子
1.弹性盒子概念:是一种新的布局模式,它让元素有能力控制子元素的排列。语法: display:flex | inline-flex; 设置为弹性盒子inline-flex是行内的弹性盒子,容器的宽度由内容决定。专业术语: 容器:被设置成弹性盒子的元素 项目:容器的子元素 主轴:子元素的排列方向 侧轴:与主轴垂直的轴,又叫交叉轴1.容器身上的属性 1.设置主轴的方向 flex-direction:row | column | row-rev原创 2022-03-06 13:06:03 · 164 阅读 · 0 评论 -
html-day13渐变动画
1.背景渐变1.线性渐变 background:linear-gradient(颜色1,颜色2) 设置普通渐变 background:linear-gradient(颜色1 *%,颜色2 *%) 设置渐变比例 background:linear-gradient(to 方向,颜色1,颜色2) 设置渐变方向 background:lin原创 2022-03-06 12:57:44 · 750 阅读 · 0 评论 -
html-day12css新增属性及选择器
1.优雅降级和渐进增强优雅降级:一开始先针对高版本完成所有功能和酷炫效果,后面再单独针对低版本浏览器进行处理, 以保证其完成最基本的功能即可。【向下兼容】渐进增强:先针对低版本浏览器完成基本功能,然后再针对高版本浏览器添加更多功能和酷炫的效果。 【向上兼容】2.css3新增的属性1.文字阴影 text-shadow:x的偏移 y的偏移 模糊程度 阴影的颜色;2.盒子阴影 box-shadow:x的偏移 y的偏移 模糊程度 延伸半径 阴影的颜色 ins原创 2022-03-06 12:51:32 · 89 阅读 · 0 评论 -
html-day11标签语义化&新增标签
1.标签语义化【面试题】语义:有意义的,能够见名知意,提倡用正确语义的标签去描述对应的内容。常见的标签 页头 header 主体 main 页脚 footer 文章 article 导航 nav 侧栏 aside 独立的区域、节、块 section优点:原创 2022-03-06 12:31:31 · 76 阅读 · 0 评论 -
html-day10css兼容问题及常见的bug&hack
1.css3处理兼容性问题方式 【添加私有前缀】前缀 浏览器内核 代表浏览器-o- presto 欧朋-ms- trident IE-moz- gecko 火狐-webkit- webkit 谷歌、s原创 2022-03-06 12:16:23 · 72 阅读 · 0 评论 -
html-day09隐藏显示&BFC
1.多种显示与隐藏方式的区别1.display:none; 不占据原位置2.visibility:hidden; 会占据原位置 [visibility:visible;显示]3.opacity:0; 会占据原位置。可以点击触摸等。2.表格1.表格相关的属性 1.border-spacing:*px; 双线边框之间的间隔 2.border-collapse:collapse; 双线边框变细边框 注意:必须配合td的边框一起使用才会生效。 3.table原创 2022-02-20 21:58:56 · 409 阅读 · 0 评论 -
html-day08自适应
1.透明度opacity:0~1的数字;filter:alpha(opacity=0~100的数字);0代表完全透明,opacity属性1或者filter的100代表完全不透明;说明:这是让元素整体都透明如果只是让颜色透明,用rgba(R,G,B,透明度);2.自适应概念:能够根据设备类型和尺寸、自动调整页面效果,以达到显示一个比较正常的布局效果。1.宽度自适应 1.不设置宽度 2.使用百分比 3.使用最大最小宽度 min-width:*px; 设原创 2022-02-20 21:53:08 · 87 阅读 · 0 评论 -
html-day07垂直对齐&定位
1.垂直对齐:只有行内块元素可以使用该属性vertical-align:top | middle | bottom | baseline基线默认值;应用: 1.解决图片3px问题 【图片设置垂直对齐方式】 2.让表单中的内容垂直对齐【输入框和按钮垂直对齐】 3.给表格中的内容设置垂直对齐。2.定位概念:将一个元素放在指定的位置上。特指position. [将a强行放在b身上]语法: position:定位方式; left:*px; | right:*p原创 2022-02-20 21:46:17 · 1538 阅读 · 0 评论 -
html-day06继承&文本溢出&元素类型
1.继承 【面试题】概念:有上下级关系的元素之间,上级元素的样式被下级元素所拥有,这个现象就是继承。文本相关的属性和列表相关的属性会被继承。面试题:请列举15个会被继承的属性!2.单行文本溢出显示省略号 【面试题】1.设置宽度 width:*px;2.强制不换行 white-space:nowrap;3.设置溢出隐藏 overflow:hidden;4.设置溢出的标识是省略号 text-overflow:ellipsis;多行文本溢出显示省略号,用js实现。 white原创 2022-02-15 20:30:10 · 102 阅读 · 0 评论 -
html-day05margin的问题&标准模式&常用属性
1. margin的问题【面试题】 1.margin的粘连问题(父随子动) 1.使用padding替代-记得修改高度! 2.给父元素添加透明边框。 [透明transparent] border:1px solid transparent; 3.给父元素添加overflow:hidden; 2.margin的塌陷问题 1.在一个元素身上设置足够的间隔。2.标准模式和怪异模式概念:他们都是盒子原创 2022-02-15 20:10:37 · 163 阅读 · 0 评论 -
html-day04盒子模型
1.浮动:是一种布局属性,主要用于实现一行多列效果语法: float:left; 或者 float:right;应用: 1.一行多列-元素横着排列 2.实现图文环绕效果。 注意:浮动会让元素脱离文档流!2.盒子模型:是一种思维模型,主要用于实现布局效果。组成: 尺寸 + 内边距 + 外边距 + 边框1.尺寸1.设置宽度 width:*px | *%;2.设置高度 height:*px | *%;说明: 如果使用百分比,代表的是其父元素的宽高的百分比。 行原创 2022-02-13 23:03:18 · 236 阅读 · 0 评论 -
html-day01html相关基础
前端:HTML结构+CSS样式+JS交互1.HTML: hyper Text mark-up language超文本标记语言。超文本:除去文本之外,还可以有图片、视频、音频、超链接等等。标记:是一套标记符号语言:用于交流的工具html5:HTML最新版本 + 前端技术的总称 W3C:万维网联盟,是中立的非盈利性组织。扩展: XHTML:可扩展的html html5最新版本的html html4.01是最经典的版本2.命名规则1.名字由数字、字母、下划线组成,原创 2022-02-13 21:44:07 · 227 阅读 · 0 评论 -
html-day03列表&css初识
1.列表1.有序列表 <ol> <li>列表项</li> <li>列表项</li> </ol> 2.无序列表 <ul> <li>列表项</li> <li>列表项</li> </ul>原创 2022-02-13 22:51:23 · 185 阅读 · 0 评论 -
html-day02表单&表格
1.路径1.绝对路径:基于根(协议或者盘符)出发,得到的路径。2.相对路径:从当前文件出发,得到的路径 1.同级 直呼其名 文件名.扩展名 2.上级 ../ 3.下级 /谁 4. 当前文件 ./2.超链接 语法: <a href='链接的地址' target='打开新页面的方式:_self当前标签页打开,_blank是新标签页打开'>内容 </a>原创 2022-02-13 22:00:46 · 83 阅读 · 0 评论