
前端基础笔记
文章平均质量分 92
杰瘦瘦
从零开始自学前端,该账号用来记录自己平时学习的学习笔记
展开
-
day32 Ajax 3
目录一、XMLHttpRequest1、什么是 XMLHttpRequest2、使用 XMLHttpRequest 发起 GET 请求3、发起 GET 请求时携带查询参数4、使用 XMLHttpRequest 发起 POST 请求,并携带查询参数5、使用 XMLHttpRequest 发起 POST 请求,并携带请求体数据二、数据交换格式1、什么是数据交换格式2、什么是 JSON3、序列化和反序列化4、JSON 文件三、防抖和节流1、什么是防抖.....原创 2022-08-18 08:56:59 · 94 阅读 · 0 评论 -
day31 Ajax 2
目录一、form 表单1、什么是表单2、表单的三个组成部分3、form标签的属性一览表4、jQuery 的 serialize() 函数二、axios 请求方法的别名1、什么是请求方法的别名2、全局配置请求根路径三、axios 拦截器1、什么是拦截器2、axios拦截器代码四、文件上传1、FormData介绍2、FormData 的基本用法3、使用FormData 实现头像上传...原创 2022-08-18 00:33:04 · 145 阅读 · 0 评论 -
day30 Ajax 1
一、服务器相关的基础概念1、客户端2、服务器3、客户端与服务器通信的过程4、资源与 URL 地址二、Ajax1、什么是 Ajax2、使用 Ajax 请求数据的 5 种方式3、axios三、请求报文 & 响应报文1、什么是请求报文和响应报文2、请求报文的格式3、响应报文的格式4、http 响应状态码四、接口相关的基础概念1、接口的概念2、接口文档的概念3、接口测试工具-Postman......原创 2022-08-15 23:29:43 · 272 阅读 · 0 评论 -
day29 JS高级 4
一、this1、默认值(1)普通函数(2)箭头函数2、定义值(1)call(2)apply(3)bind二、class1、封装(1)实例成员(3)构造函数2、继承(1)extends(2)super3、拷贝(1)浅拷贝(2)深拷贝.........原创 2022-08-13 17:33:06 · 104 阅读 · 0 评论 -
day28 JS高级 3
一、面向对象1、封装(1)命名空间(2)构造函数(3)原型对象2、继承(1)原型继承(2)原型链二、异常处理1、throw2、 try ... catch原创 2022-08-12 00:23:29 · 86 阅读 · 0 评论 -
day27 JS高级 2
一、面向对象1、 构造函数2、 实例成员3、静态成员二、一切皆对象1、引用类型2、包装类型3、拓展原创 2022-08-11 10:56:42 · 105 阅读 · 0 评论 -
day26 JS高级 1
目录一、作用域1、局部作用域2、全局作用域3、作用域链4、闭包5、变量提升二、函数1、函数提升2、参数3、箭头函数三、解构赋值1、数组解构2、对象解构一、作用域作用域(scope)规定了变量能够被访问的“范围”,离开了这个“范围”变量便不能被访问,作用域分为全局作用域和局部作用域。1、局部作用域局部作用域分为函数作用域和块作用域。(1)函数作用域在函数内部声明的变量只能在函数内部被访问,外部无法...原创 2022-08-11 09:32:33 · 87 阅读 · 0 评论 -
day25 Web APIs 7
一、正则表达式1、正则表达式介绍2、语法3、元字符4、修饰符原创 2022-08-10 23:19:51 · 129 阅读 · 0 评论 -
day24 Web APIs 6
一、Window对象1、BOM(浏览器对象模型)2、定时器-延时函数3、JS执行机制4、location对象5、navigator对象6、histroy对象二、swiper插件三、本地存储1、本地存储特性2、localStorage3、sessionStorage(了解).........原创 2022-08-08 22:31:08 · 143 阅读 · 0 评论 -
day23 Web APIs 5
一、滚动事件和加载事件1、滚动事件2、加载事件二、元素大小和位置1、scroll家族2、offset家族3、client家族原创 2022-08-01 15:31:03 · 150 阅读 · 0 评论 -
day22 Web APIs 4
一、事件对象1、获取事件对象2、事件对象常用属性二、事件流1、事件流与两个阶段说明2、事件捕获和事件冒泡3、阻止事件流动三、事件委托原创 2022-07-30 18:48:27 · 144 阅读 · 0 评论 -
day21 Web APIs 3
一、节点操作1、DOM节点2、查找节点3、增加节点4、删除节点二、时间对象1、实例化2、时间对象方法3、时间戳三、重绘和回流1、浏览器是如何进行界面渲染的2、回流(重排)3、重绘.........原创 2022-07-23 21:54:04 · 195 阅读 · 0 评论 -
day20 Web APIs 2
一、事件1、事件介绍2、事件监听版本3、事件类型二、高阶函数1、函数表达式2、回调函数三、环境对象原创 2022-07-22 21:47:20 · 96 阅读 · 0 评论 -
day19 Web APIs 1
一、Web API 基本认知1. 作用和分类2、什么是DOM3、DOM树4、DOM对象(重点)二、获取DOM对象1、根据CSS选择器来获取DOM元素(重点)三、设置/修改DOM元素内容1、document.write()2、元素innerText属性3、元素.innerHTML属性四、设置/修改DOM元素属性1、设置/修改元素常用属性2、设置/修改元素样式属性3、设置/修改表单元素属性五、定时器-间歇函数1、定时器函数介绍2、定时...原创 2022-07-22 19:36:54 · 236 阅读 · 0 评论 -
day18 JS基础5-对象
一、对象1、什么是对象2、对象的使用3、操作对象4、遍历对象5、内置对象二、基本数据类型和引用数据类型1、基本数据类型和引用数据类型介绍2、堆栈空间分配区别3、简单类型的内存分配4、复杂类型的内存分配...原创 2022-07-21 21:24:50 · 1119 阅读 · 0 评论 -
day17 JS基础4-函数
一、函数1、函数是什么2、函数的使用3、函数传参4、函数返回值5、作用域6、匿名函数原创 2022-07-21 08:47:41 · 157 阅读 · 0 评论 -
day16 JS基础3
一、for循环1、for 循环的基本使用2、退出循环3、循环嵌套二、数组1、数组是什么2、数组的基本使用3、操作数组原创 2022-07-19 22:01:28 · 71 阅读 · 0 评论 -
day15 JS基础2
目录一、运算符1、算术运算符2、赋值运算符3、一元运算符4、比较运算符5、逻辑运算符6、运算符优先级二、语句1、表达式和语句2、分支语句(1)什么是算术运算符? 数学运算符也叫算术运算符,主要包括加、减、乘、除、取余(求模)。(2)算术运算符执行的优先级顺序 同时使用多个运算符编写程序时,会按着某种顺序先后执行,我们称为优先级。JavaScript中优先级越高越先被执行,优先级相同时以书从左向右执行。(1)什么是赋值运算符? 赋值运算符:对变量进行赋值的运算符,使用原创 2022-07-13 20:42:24 · 249 阅读 · 0 评论 -
day14 JS基础1
目录一、JavaScript 介绍1. JavaScript是什么2、JavaScript 书写位置3、JavaScript 注释4、JavaScript 结束符5、JavaScript 输入输出语法二、变量1、变量是什么?2、变量的基本使用3、变量的本质4、变量命名规则与规范5、let和var的区别6、数组 三、数据类型1、基本数据类型2、引用数据类型四、类型转换1、为什么需要类型转换?2、隐式转换3、显式转换(1)JavaScript(是什么?) 是一种运行在客户端(浏览器)的编程语言,实原创 2022-07-10 16:41:08 · 473 阅读 · 0 评论 -
day13 响应式网页
目录一、媒体查询1、基本语法2、书写顺序3、外链式CSS引入 4、隐藏二、BootStrap1、了解BootStrap2、BootStrap使用步骤3、BootStrap栅格系统4、全局样式5、组件 6、Glyphicons字体图标7、插件8、定制 响应式网页指的是同一套代码适配多种屏幕设备,大屏、小屏、pad、手机全都能兼容和适配。作用:能够根据设备宽度的变化,设置差异化样式开发常用写法: 代码:2、书写顺序min-width(从小到大)max-width(从大到小)需求: 代代码原创 2022-07-06 09:28:03 · 160 阅读 · 0 评论 -
day12 移动web2
目录一、rem1、什么是rem?2、媒体查询二、Less语法1、安装vscode插件:Easy Less2、使用Less语法快速编译生成CSS代码3、使用Less运算写法完成px单位到rem单位的转换4、使用Less嵌套写法生成后代选择器5、使用Less变量设置属性值6、使用Less导入写法引用其他Less文件7、使用Less语法导出CSS文件 rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个长度的相对单位。因为rem的特原创 2022-07-02 22:09:19 · 368 阅读 · 0 评论 -
day11 移动web1
目录一、移动端特点1、PC端网页和移动端网页有什么不同?2、谷歌浏览器3、分辨率 4、视口5、二倍图二、 百分比布局1、什么是百分比布局?三、Flex布局1、主轴对齐方式 2、侧轴对齐方式 3、伸缩比使用谷歌模拟器调试移动端网页(1)屏幕尺寸概念屏幕尺寸:指的是屏幕对角线的长度,一般用英寸来度量 (1)移动端主流设备分辨率PC分辨率:缩放150%:总结:分辨率分类:而制作网页参考的是逻辑分辨率手机各大型号分辨率: (1)什么是视口? 视口简单理解就是可视区域大小我们称之为视口。在PC端,视口大小就原创 2022-07-02 20:30:31 · 278 阅读 · 0 评论 -
day10 CSS布局6
目录一、空间转换1、空间转换介绍2、空间位移3、透视4、空间旋转 5、立体呈现 6、空间缩放二、动画1、动画的介绍2、动画的使用3、动画属性 语法:语法: 注意点:作用:语法:小技巧:实现方法:代码:展示效果:当我们鼠标放在图像上面的时候就可以看到对应的立体效果了语法:注意点:过渡和动画的使用场景:实现步骤:(1)定义动画定义动画有2种方式 (2)使用动画 代码:3、动画属性使用animation相关属性控制动画执行过程 代码: 注意:拆分属性:(一般直接写上面的复合属性) 其中ani原创 2022-07-02 20:29:10 · 133 阅读 · 0 评论 -
day9 CSS布局5
目录一、字体图标1、什么是字体图标?2、字体图标的优点3、下载字体包4、使用字体图标二、平面转换1、平面转换概念2、位移3、旋转4、多重转换(旋转+位移)5、缩放三、渐变例如京东网站上的: 图标库Iconfont官网:iconfont-阿里巴巴矢量图标库登录(新浪微博)→选择图标库→选择图标,加入购物车→购物车→添加至项目→下载至本地使用字体图标–类名: (1)引入字体图标样式表 (2)调用图标对应的类名,必须调用2个类名 编辑 平面转换就是改变盒子在平面内的形态(位移、旋转、缩放),是一种2D转换原创 2022-06-26 23:39:03 · 123 阅读 · 0 评论 -
day8 CSS布局4
目录一、CSS样式补充1、精灵图2、背景图片大小3、盒子阴影 4、过渡二、项目前置认知1、网页与网站的关系2、骨架结构标签3、SEO三大标签4、ico图标设置5、版心6、拓展补充三、项目结构搭建(1)精灵图介绍场景:项目中将多张小图片,合并成一张大图片,这张大图片称之为精灵图优点:减少服务器发送次数,减轻服务器的压力,提高页面加载速度(2)精灵图的使用步骤作用:设置背景图片的大小语法:background-size: 宽度 高度;取值: background连写拓展完整连写:background: colo原创 2022-06-26 18:13:54 · 227 阅读 · 0 评论 -
day7 CSS布局3
目录一、定位1、网页常见布局方式2、定位的常见使用场景3、使用定位的步骤4、静态定位5、相对定位6、绝对定位7、固定定位8、元素的层级关系二、装饰1、认识基线2、文字对齐问题3、垂直对齐方式4、光标类型5、边框圆角4、溢出部分显示效果5、元素本身隐藏6、拓展点(1)透明(2)边框合并(3)焦点伪类选择器(4)属性选择器(1)标准流(2)浮动(3)定位(1)可以解决盒子与盒子之间的层叠问题(2)可以让盒子始终固定在屏幕中的某个位置(1)设置定位方式(2)设置偏移值偏移值设置分为两个方向,水平和纯质方向各选一个原创 2022-06-16 21:44:54 · 164 阅读 · 0 评论 -
day6 CSS布局2
目录一、结构伪类选择器1、作用和优势2、选择器二、伪元素三、标准流四、浮动1、浮动的作用2、浮动的代码3、浮动的特点4、拓展点:CSS书写顺序五、清除浮动1、清除浮动的介绍2、清除浮动的方法(1)直接设置父元素高度(2)额外标签法(3)单伪元素清除法(4)双伪元素清除法(5)给父元素设置overflow : hidden代码示例:展示效果:伪元素:一般页面中的非主体内容可以使用伪元素区别:种类:注意点:代码示例:展示效果:标准流:又称文档流,是浏览器在渲染显示网页内容时默认采用的一套排版规则,规原创 2022-06-13 23:13:26 · 121 阅读 · 0 评论 -
day5 CSS布局1
一、CSS三大特性CSS三大特性有:继承性 层叠性 优先级前面的内容继承性和层叠性已经学习过了,接下来三大特性中最为复杂的优先级的学习1、优先级的介绍特性:不同选择器具有不同的优先级,优先级高得选择器样式会覆盖优先级低的选择器样式优先级的先后顺序:继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important注意点:!importtant不能提升继承的优先级,只要是继承优先级最低! 实际开发中!important原创 2022-06-07 22:48:23 · 163 阅读 · 0 评论 -
day4 CSS基础2
一、选择器进阶1、复合选择器(1)后代选择器作用:根据HTML标签的嵌套关系,选择父元素后代中满足条件的元素语法:选择器1 选择器2 {css}示例:找到div的儿子p并设置文字颜色为蓝色展示效果:......原创 2022-06-05 21:30:46 · 162 阅读 · 0 评论 -
day3 CSS基础1
一、CSS简介1、介绍CSS称为层叠样式表,它是一种专门描述结构文档的表现方式的文档,主要用于网页风格设计,包括字体大小、颜色、以及元素的精确定位等。在传统的web网页设计里,使用CSS能让单调的HTML网页更富有表现力。2、CSS写在哪里CSS写在style标签里,style标签一般写在head标签里面,title标签下面。例:展示效果:3、 CSS引入方式内嵌式:CSS写在style标签中。style标签虽然可以写在页面任意位置...原创 2022-05-30 22:59:37 · 356 阅读 · 0 评论 -
day2 HTML基础
一、列表标签列表标签主要分为三种:无序列表 有序列表 自定义列表1、无序列表场景:在网页中表示一组没有顺序之分的列表标签组成:标签名 功能说明 ul 表示无序列表的整体,用语包裹li标签 li 表示无序列表的每一项,用语包含每一行的内容 显示特点:列表中的每一项前默认显示圆点标识注意点:ul标签中只允许包含li标签 li标签可以包含任意内容例:<ul> <li>篮球</li>原创 2022-05-23 21:51:28 · 153 阅读 · 0 评论 -
day1 基础认识
1、什么是网页?(1)网站是指在因特网上根据一定的规则,使用HTML等制作的用于展示特定内容相关的网页集合。(2)网页是网站中的“一页”,通常是HTML格式的文件,它要通过浏览器来阅读。(3)网页是构成网站的基本元素,它主要通过由图片、链接、视频、文字、声音等元素构成,通常我们看到的网页,常见以.htm或.html后缀结尾的文件,因此将其俗称为HTML文件。2、常用的浏览器有哪些? 目前市面上一些主流的浏览器分别有IE、火狐(Firefox)、谷歌(Chrome)、saf...原创 2022-05-21 23:01:39 · 1016 阅读 · 0 评论