前端基础
文章平均质量分 61
前端基础路线图:
HTML5、CSS3、JavaScript、JQuery、ECMAScript6、NodeJS、Bootstrap
csj50
这个作者很懒,什么都没留下…
展开
-
前端基础之《JavaScript(9)—holderjs占位图》
holderjs占位图原创 2022-11-16 10:52:36 · 250 阅读 · 0 评论 -
前端基础之《Bootstrap(14)—JavaScript插件_固定右侧栏目、回到顶部》
data-spy="affix":代替position: fixed;data-offset-bottom="200":离开底部的距离。data-offset-top="60":离开顶部的距离。1、自己实现固定在侧边栏。2、affix实现固定。原创 2022-11-15 15:31:25 · 597 阅读 · 0 评论 -
前端基础之《Bootstrap(13)—JavaScript插件_标签页、工具提示、弹出框、折叠效果和幻灯片》
(2)标签页的a链接上加上【data-toggle="tab"】(1)把标签页的a链接的href,和下面div的id绑定起来。(4)在tab-pane后面增加动画样式。1、怎么把标签页和下面内容关联起来。是bootstrap封装的js。一、data-开头的是什么。原创 2022-11-11 16:44:44 · 1025 阅读 · 0 评论 -
前端基础之《Bootstrap(12)—JavaScript插件_滚动监听、侧边栏浮动》
滚动文件,监听它的位置,然后有个缩略地图跟着走。一楼,二楼,三楼,四楼,回到顶部。2、滚动监听,滚动区域就是监听的区域。监听的是整个body区域。1、使用导航条+面板组合。原创 2022-11-11 14:37:08 · 712 阅读 · 0 评论 -
前端基础之《Bootstrap(11)—JavaScript插件_模态框和下拉菜单》
modal-content:对话框里面的内容。data-dismiss属性:关闭指定目标。.modal-header:对话框头部。.modal-footer:对话框底部。.modal-dialog:对话框。.modal-body:对话框体部。1、模态框就是一个弹窗。.modal:模态框。原创 2022-11-10 16:58:57 · 612 阅读 · 0 评论 -
前端基础之《Bootstrap(10)—CSS组件_媒体对象、列表组、面板》
这是一个抽象的样式,用以构建不同类型的组件,这些组件都具有在文本内容的左或右侧对齐的图片(就像博客评论或 Twitter 消息等)。3、回复就是拿一份media搁到p标签下面。.media-heading:右边里面的。.media-object:左边里面的。.media-left:左边的。.media-body:右边的。发表回复、评论的场景。原创 2022-11-10 11:09:21 · 597 阅读 · 0 评论 -
前端基础之《Bootstrap(9)—CSS组件_分页、标签、警告框和进度条》
1、分页效果(.pagination)大的(.pagination-lg)小的(.pagination-sm)4、上一页和下一页(.pager)中等的(.pagination)灰色:label-default。蓝色:label-default。绿色:label-success。黄色:label-warning。红色:label-danger。青色:label-info。5、上一页下一页两端对齐。1、标签(.label)禁用:disabled。原创 2022-11-08 15:10:36 · 506 阅读 · 0 评论 -
前端基础之《Bootstrap(8)—CSS组件_导航条》
4、折叠的小方块按钮(.navbar-toggle .collapsed)2、头部和折叠小按钮(.navbar-header)3、文字对齐(.navbar-brand)1、nav标签:灰色小条。原创 2022-11-08 10:42:16 · 2179 阅读 · 0 评论 -
前端基础之《Bootstrap(7)—CSS组件_输入框组和导航》
2、为input添加额外元素(.input-group-addon)3、input-group大尺寸(.input-group-lg)4、input-group小尺寸(.input-group-sm)5、为输入框组添加按钮(.input-group-btn)1、输入框组(.input-group)原创 2022-11-04 09:41:51 · 435 阅读 · 0 评论 -
前端基础之《Bootstrap(6)—全局CSS样式_表单》
6、radio怎么只能选中一个,name相同的radio是同一个radio。3、表单浅灰色占位符(placeholder属性)2、输入框的样式(.form-control)1、基本表单(.form-group)4、单选框(.checkbox)5、多选框(.radio)原创 2022-11-03 14:32:56 · 771 阅读 · 0 评论 -
前端基础之《Bootstrap(5)—CSS组件_字体图标、按钮组和下拉菜单》
6、两端对齐的按钮组(.btn-group-justified)4、按钮组垂直排列(.btn-group-vertical)5、按钮组嵌套(.dropdown-toggle)1、把多个按钮连在一起(.btn-group)2、按钮工具条(.btn-toolbar)1、bootstrap提供的文字图片。选项(.dropdown-menu)巨大的(.btn-group-lg)微小的(.btn-group-xs)1、下拉菜单(.dropdown)小的(.btn-group-sm)7、按钮组带下拉菜单。原创 2022-11-03 10:48:53 · 881 阅读 · 0 评论 -
前端基础之《Bootstrap(4)—全局CSS样式_图片、辅助类、响应式工具》
1、表格响应式(.table-responsive)2、图片响应式(.img-responsive)1、让块标签居中(.center-block)2、蓝色(.text-primary)3、绿色(.text-success)5、黄色(.text-warning)1、圆角(.img-rounded)2、右浮动(.pull-right)2、圆形(.img-circle)1、灰色(.text-muted)1、蓝色(.bg-primary)2、绿色(.bg-success)1、左浮动(.pull-left)原创 2022-11-02 11:12:59 · 387 阅读 · 0 评论 -
前端基础之《Bootstrap(3)—全局CSS样式_排版、代码、表格和按钮》
将table包裹在中,缩小屏幕会出现水平滚动条。6、响应式表格(.table-responsive)10、无样式列表(.list-unstyled)5、紧缩表格(.table-condensed)3、带边框(.table-bordered)11、内联列表(.list-inline)2、条纹状(.table-striped)4、鼠标悬停(.table-hover)1、标题(.page-header)3、标记。原创 2022-11-01 14:46:04 · 300 阅读 · 0 评论 -
前端基础之《Bootstrap(2)—全局CSS样式_栅格系统》
bootstrap.min.css:是去除空格和回车,压缩版。bootstrap.css:是供我们学的没有压缩版。3、bootstrap javascript插件。1、bootstrap全局CSS样式。2、bootstrap CSS组件。二、项目引入Bootstrap。一、Bootstrap要点。其实就是官网上的这三个。原创 2022-11-01 10:10:01 · 1287 阅读 · 0 评论 -
前端基础之《Bootstrap(1)—简介和安装》
手机端可以把网站封装成安卓、IOS。使用DCloud、APICloud。1、bootstrap准确来说是一套css框架。3、要使用bootstrap中js插件,必须包含jquery。1、用于生产环境的 Bootstrap。是把所有的回车、换行都去掉了。2、特别是针对移动端。原创 2022-10-31 17:30:10 · 331 阅读 · 0 评论 -
前端基础之《NodeJS(4)—Buffer缓冲区》
1、从结构上看Buffer非常像一个数组,它的元素为16进制的两位数。3、实际上Buffer中的内存不是通过JavaScript分配的,而是在底层通过C++申请的。3、数组中不能存储二进制文件,而Buffer就是专门用来存储二进制数据。4、也就是说我们可以直接通过Buffer来创建内存中的空间。2、服务器开发,数组类型不够用。1、使用Buffer不需要引入模块,直接使用即可。2、将一个字符串保存到buffer中,并且返回。2、实际上一个元素就表示内存中的一个字节。1、js原生的数组,性能比较差。原创 2022-10-31 13:47:38 · 653 阅读 · 0 评论 -
前端基础之《NodeJS(3)—包管理》
1、CommonJS的包规范允许我们将一组相关的模块组合到一起,形成一组完整的工具。2、CommonJS的包规范由包结构和包描述文件两个部分组成。1、包实际上就是一个压缩文件,解压以后还原为目录。包描述文件:描述包的相关信息,以供外部读取分析。2、符合规范的目录,应该包含如下文件。包结构:用于组织包中的各种文件。(2)bin:可执行二进制文件。(5)test:单元测试。(3)lib:js代码。原创 2022-10-28 13:42:37 · 686 阅读 · 0 评论 -
前端基础之《NodeJS(2)—模块化》
比如jquery和jquery插件,要分别引入jquery、jquery插件。1、node中默认执行ES6语法,import导入、export导出模块会报错。(2)在package.json中添加:"type": "module"1、ECMAScript5没有模块化功能(ECMAScript6有了)5、在Node中,一个js文件就是一个模块。二、NodeJS模块化语法—使用ES6语法。(1)执行:npm init -y。不同包要到不同的官网上找。原创 2022-10-27 14:00:34 · 1470 阅读 · 0 评论 -
前端基础之《NodeJS(1)—NodeJS简介》
在Node出现之前,JS通常作为客户端程序设计语言使用,以JS写出的程序常在用户的浏览器上运行。但是NodeJS在前端的应用中是十分广泛的,比如npm包管理、前端工程化(整合babel、webpack、eslint等工具)。Node.js使用了一个事件驱动、非阻塞式I/O的模型。简单说是在服务端执行js代码的环境,类比java中jvm。(1)在终端切换到目录,使用node命令执行。2、NodeJS现在不一定是用来写服务器的。二、使用node执行js文件。一、什么是NodeJS。1、执行单个js文件。原创 2022-10-27 13:28:41 · 641 阅读 · 0 评论 -
前端基础之《JavaScript(8)—vscode调试页面》
安装Live Server插件,右键 - Open with Live Server。原创 2022-10-26 15:03:04 · 214 阅读 · 0 评论 -
前端基础之《ECMAScript 6(12)—模块化》
模块化是指将一个大的程序文件,拆分成许多小的文件,然后将小文件组合起来,实现我们的功能。1、模块化功能主要由两个命令构成:export和import。1、ES6之前模块化规范有(规范对应的模块加载框架)import:命令用于输入其他模块提供的功能。export:命令用于规定模块的对外接口。1、模块化的优势有以下几点。四、ES6模块化引入。原创 2022-10-26 14:26:43 · 441 阅读 · 0 评论 -
前端基础之《ECMAScript 6(11)—数值扩展和对象方法扩展》
Number.EPSILON是JavaScript表示的最小精度,EPSILON属性的值接近于2.22E-16(2.22乘以10的负16次方)比如:比较两个数谁大谁小,如果两个数的差值小于Number.EPSILON,那么认为这两个数相等的。用在浮点数运算上面。原创 2022-10-25 15:01:30 · 228 阅读 · 0 评论 -
前端基础之《ECMAScript 6(10)—class类》
基本上,ES6的class可以看做只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。ES6提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板。1、ES5通过构造函数实例化对象的语法。通过class关键字,可以定义类。1、ES6中class类。二、class声明类。原创 2022-10-24 15:01:35 · 297 阅读 · 0 评论 -
前端基础之《ECMAScript 6(9)—集合介绍与API》
它类似于数组,但成员的值都是唯一的,集合实现了Iterator接口,所以可以使用【扩展运算符...】展开和【for...of】进行遍历。(4)has:检测集合中是否包含某个元素,返回boolean值。(3)delete:删除元素,返回boolean值。1、ES6提供了新的数据结构Set(集合)(2)add:增加一个新元素,返回当前集合。(1)size:返回集合的元素个数。Set本质上也是一个对象。2、集合的属性和方法。原创 2022-10-21 17:06:06 · 202 阅读 · 0 评论 -
前端基础之《ECMAScript 6(8)—Promise》
1、Promise是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数,用来封装异步操作并可以获取其成功或失败的结果。1、Promise接收一个函数类型的参数。这个函数有两个入参。入参名字可以叫resolve和reject。2、把异步函数封装在Promise对象中,成功调用resolve(),失败调用reject()。一秒钟后,控制台打印:数据库中的用户数据。二、Promise基本语法。一、什么是Promise。原创 2022-10-21 11:19:46 · 308 阅读 · 0 评论 -
前端基础之《ECMAScript 6(7)—异步技术》
1、生成器函数是ES6提供的一种异步编程解决方案,语法行为与传统函数完全不同。可以看到打印出的对象里有next方法。用next方法执行函数。2、生成器其实是一个特殊的函数,用于异步编程。比如:node中fs模块,ajax。3、以前用的方式都是纯回调函数。function+星号+函数名。原创 2022-10-20 14:15:34 · 351 阅读 · 0 评论 -
前端基础之《ECMAScript 6(6)—数组》
扩展运算符能将【数组】转换为逗号分隔的【参数序列】原创 2022-10-19 11:29:46 · 196 阅读 · 0 评论 -
前端基础之《ECMAScript 6(5)—函数》
报错:Uncaught TypeError: Person is not a constructor。箭头函数this是静态的,this始终指向函数在声明时所在作用域下的那个this值。this始终指向函数声明时所在作用域下的this的值。1、ES6允许使用箭头(=>)来定义函数。2、箭头函数不能作为构造器去实例化对象。二、箭头声明函数的特性。1、this是静态的。原创 2022-10-18 14:03:14 · 232 阅读 · 0 评论 -
前端基础之《ECMAScript 6(4)—对象》
1、ES6允许在大括号里面,直接写入变量和函数,作为对象的属性和方法,这样的书写更加简洁。以前是improve: function (){};2、对象内定义函数也简化了。原创 2022-10-18 13:55:24 · 147 阅读 · 0 评论 -
前端基础之《ECMAScript 6(3)—模板字符串》
单引号里包含换行符,报错:Uncaught SyntaxError: Invalid or unexpected token。ES5里声明字符串使用单引号和双引号,模板字符串符号是反引号``。1、ES6引入了新的声明字符串的方式—模板字符串。(1)内容中可以直接出现换行符。3、模板字符串的特性。原创 2022-10-18 13:28:53 · 426 阅读 · 0 评论 -
前端基础之《ECMAScript 6(2)—let、const声明和解构赋值》
在for循环三个代码块里声明了三个i,它们是互不影响的,此时items[i].style.background = 'pink';因为i的问题,i是用var定义的全局变量,页面加载完成后,i已经是3了,此时items[3]是没有这个元素的。块级作用域是,这个变量作用域在代码块里面有效,出代码块就无效了。1、let用来声明变量,作用和var一样,但是它有新的特性。原有作用域:全局、函数、eval,ES6引入了块级作用域。let不允许在变量声明之前,去使用这个变量。let声明的变量就是块级作用域的。原创 2022-10-18 09:58:08 · 268 阅读 · 0 评论 -
前端基础之《ECMAScript 6(1)—ECMAScript概念》
ECMAScript是由ecma国际通过ECMA-262标准化的脚本程序设计语言。(2)ES6加入许多新的语法特征,编程实现更简单、高效。(1)ES6的版本变动内容最多,具有里程碑意义。3、为什么学习ECMAScript 6。5、ECMAScript 6 编程环境。4、ECMAScript 6 兼容性。2、什么是ECMAScript。(3)ES6是前端发展趋势。欧洲计算机制造协会。原创 2022-10-18 00:17:49 · 186 阅读 · 0 评论 -
前端基础之《JavaScript(7)—json数据处理》
方法将某个JavaScript对象转换成JSON字符串形式。用于将一个JSON字符串转换为JavaScript对象。返回json字符串(或者字符串数组),放到属性里面。2、在页面设置隐藏输入框,获取后台的值,再取出来。二、javascript中json转换。一、页面获取后台返回的数据。3、直接取后台返回的属性。原创 2022-10-17 09:43:20 · 983 阅读 · 0 评论 -
前端基础之《JavaScript(6)—JS DOM对象》
document.documentElement //html标签。obj.textContent //获取元素标签内的text内容。obj.innerHTML //获取元素标签内的html内容。obj.outerHTML //获取元素标签外的html内容。obj.tagName //获取元素对象的标签名。document //文档流。一、已经用过的js dom对象。二、获取元素对象方法。三、元素对象常用属性。因为点不包含很多属性。原创 2022-10-13 10:59:24 · 561 阅读 · 0 评论 -
前端基础之《JavaScript(5)—JS BOM对象》
fullscreen=1|0 //是否全屏。left="" //离屏幕左上角的left。location=1|0 //是否有地址栏。top="" //离屏幕左上角的top。menubar=1|0 //是否有菜单。height="" //窗口高。五、navigator对象属性。width="" //窗口宽。六、screen屏幕对象属性。七、history对象属性。八、history对象方法。三、window对象属性。四、window对象方法。二、BOM浏览器对象。1、open()方法。原创 2022-10-11 17:12:17 · 352 阅读 · 3 评论 -
前端基础之《JavaScript(4)—JS事件对象》
看到图片滚着滚着就加载,是靠滚动了多少高,要加载什么。1、文档的高,屏幕的文档区域的高(body的高)4、滚动的高度(滚动条从最上面往下滚动了多少)3、屏幕的总高度(窗口整个可滚动区域的高)2、有效的高,屏幕可视的高。一、元素对象常用属性。原创 2022-09-29 17:06:33 · 427 阅读 · 0 评论 -
前端基础之《JavaScript(3)—JS内置对象》
(2)元素集合 [元素obj,元素obj,元素obj]forIn取出的是数组元素以及元素集合本身的属性和方法。自定义对象和元素对象用forIn遍历。自定义数组和对象集合,用for遍历。(3)for循环和forIn循环。3、随机获取1到4之间的数字。for循环取出的是数组元素。原创 2022-09-29 10:30:25 · 334 阅读 · 0 评论 -
前端基础之《JavaScript(2)—JS变量类型和语法》
3、放在页面任何地方都可以,建议放在body体后面,加载时间在body体的后面。1、只要在函数外面定义的变量,不管带不带var全部都是全局变量,建议只要不在函数里面的全部带上var。2、很多对象摸不清,突然之间跑出来document对象、window对象。2、在函数里面定义的变量,带var的是局部变量,不带var的是全局变量。面向底层类的一种面向对象语言,基于突然从天上掉下来的对象。4、js是面向对象的语言,严格的说是基于对象的语言。1、页面上的任何东西,都是对象。原创 2022-09-27 16:48:49 · 442 阅读 · 0 评论 -
前端基础之《JavaScript(1)—JS函数带括号和不带括号区别》
不带括号是把函数的指针赋值给变量。相当于把函数定义在变量后面。原创 2022-08-10 11:33:02 · 507 阅读 · 0 评论 -
前端基础之《CSS3样式设计(2)》
transform属性。transform属性。二十九、CSS3背景。原创 2022-09-22 15:40:55 · 269 阅读 · 0 评论