前端知识总结
前端知识全面总结
宫小白(转掘金了)
热爱文学,热爱生活,热爱编程
展开
-
js高级上篇
js高级上篇本系列分为上下两篇知识导航:构造函数与原型链继承es5新增方法对象类1. 构造函数与原型链先回忆一下对象的这种创建方式:构造函数 function Per(name, age) { this.name = name; this.age = age; } var pe...原创 2020-02-15 21:27:51 · 142 阅读 · 0 评论 -
webAPI案例之十分钟搞懂js原生轮播
webAPI案例之十分钟搞懂js原生轮播一般轮播图的功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。 2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。 3.图片播放的同时,下面小圆圈模块跟随一起变化。 4.点击小圆圈,可以播放相应图片。 5.鼠标不经过轮播图,轮播图也会自动播放图片。鼠标经过,轮播图模块, 自动播放停止。虽然boots...原创 2020-02-09 20:13:36 · 243 阅读 · 0 评论 -
webAPI案例之三分钟玩转动画封装
webAPI案例之三分钟玩转动画封装动画原理:获得盒子当前位置让盒子在当前位置加上1个移动距离(注意此元素需要添加定位才能使用left)利用定时器不断重复这个操作加一个结束定时器的条件1. 从简单开始效果图:思路相关:相关代码:<!DOCTYPE html><html lang="en"><head> <met...原创 2020-02-08 10:49:27 · 137 阅读 · 0 评论 -
webAPI系列之_5分钟玩转BOM_02篇
webAPI系列之_5分钟玩转BOM_02篇知识导航:offset系列client系列scroll系列4 offset系列4.1 概述offset 译为偏移量,在这里我们使用 offset系列相关属性可以动态的得到元素的位置(偏移)、大小等。常见属性:值得注意的是:它获取的数值是不带单位的4.2 offset与style属性的区别stylestyle 只能得到行内样...原创 2020-02-07 22:40:28 · 182 阅读 · 0 评论 -
webAPI系列之_5分钟玩转BOM_01篇
写在前面:每天进步一点点,相信河流终将汇聚成海洋知识导航:BOM简介定时器三大对象1. 简介1.1 何为BOM BOM(Browser Object Model)浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。 BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。1.2 BOM的构成window是BOM...原创 2020-02-05 23:26:08 · 251 阅读 · 0 评论 -
webAPI系列之_7分钟玩转DOM下篇
知识导航:玩转DOM下篇事件高级DOM事件流常用鼠标事件常用键盘事件6. 事件高级传统的的注册时间的方法如demo.onclick=function(){}这种方式有一个很大的缺点。即同一个元素只能绑定一个事件处理函数。 <button>按钮</button></body><script> var btn = ...原创 2020-02-05 17:34:23 · 277 阅读 · 0 评论 -
webAPI系列之_7分钟玩转DOM上篇
严格自律=绝对自由玩转DOM上知识导航:上篇(本篇):何为DOM事件基础获取元素操作元素下篇(下一篇介绍):节点操作事件高级常用鼠标事件常用键盘事件1. 何为DOM文档对象模型(Document Object Model,简称DOM),是 W3C 组织推荐的处理可扩展标记语言(html或者xhtml)的标准编程接口W3C 已经定义了一系列的 DOM 接口,通过这些...原创 2020-02-05 00:03:59 · 1625 阅读 · 0 评论 -
webAPI案例之三分钟玩转tab栏
经典案例之Tab栏简单效果:难点解析:这个小案例的难点在与当我们给li编写事件处理函数时,也要拿到对应的div。解法就是我们要知道lis的个数和divs是相同的。而且我们要拿的这俩个元素它们是有非常大的联系的。比如我拿到的是lis[2],那么对应的div就应是divs[2]。事件处理函数中divs的目标索引我们是无法直接拿到,但是我们却可以通过这个处理函数的this拿到触发事件...原创 2020-02-04 23:57:37 · 355 阅读 · 1 评论 -
js初级_04
自律每一天,进步每一天,幸福每一天知识导航:js中常用内置对象Math对象Date对象Array对象string对象博文脑图大纲:1. js种常见内置对象JavaScript 中的对象分为3种:自定义对象 、内置对象、 浏览器对象前两种属于js基础内容,浏览器对象在web API中解释学习要领:学习一个内置对象的使用,只要学会其常用成员的使用即可1.1 Math对...原创 2020-02-02 13:50:13 · 551 阅读 · 0 评论 -
js初级_03
自律每一天,进步每一天,幸福每一天知识导航函数作用域预解析js对象博文脑图大纲:1. 函数函数:就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。1.1 函数声明1.利用函数关键字 function 自定义函数方式(命名函数)// 声明定义方式function fn() {...}// 调用 fn();2.函数表达式方式(匿...原创 2020-01-31 20:18:23 · 335 阅读 · 0 评论 -
js初级_02
知识导航:运算符流程控制数组博文脑图大纲:1. 运算符运算符(operator)也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号在js中常用的运算符有:算数运算符递增和递减运算符比较运算符逻辑运算符赋值运算符1.1 算数运算符用于执行两个变量或值的算术运算;常用的算术运算符:值得注意的是这里存在一个浮点数精度的问题。因为浮点数值的最高精...原创 2020-01-30 21:50:20 · 566 阅读 · 0 评论 -
js初级_01
自律每一天,进步每一天,幸福每一天知识导航:js初识js中的变量js数据类型运算符流程控制循环1. js初识js是一种运行在客户端的脚本语言。即它不像java一样,它不需要编译,运行过程中由 js 解释器( js 引擎)逐行来进行解释并执行它的应用十分广泛,在我们的前端是必不可少的。同时node.js同样也是一种后台技术js由ECMAScript、DOM、BOM组成。那...原创 2020-01-29 23:21:10 · 1900 阅读 · 1 评论 -
前端移动开发布局_响应式bootstrap
知识导航:响应式开发原理bootstrap介绍及基本使用(主要)1.响应式开发原理利用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的设备的划分:小于768的为超小屏幕(手机)768~992之间的为小屏设备(平板)992~1200的中等屏幕(桌面显示器)大于1200的宽屏设备(大桌面显示器)响应式布局容器响应式需要一个父级做为布局容器,来配合子级...原创 2020-01-28 23:18:48 · 533 阅读 · 0 评论 -
前端移动开发布局_rem+less+媒体查询
知识导航何为rem何为媒体查询何为less1. 何为remrem (root em)是一个相对单位,类似于em,em是父元素字体大小。而rem的参照物是html的fontsize比如 html { font-size: 20px; } div { width: 2rem; ...原创 2020-01-28 11:38:43 · 455 阅读 · 0 评论 -
前端移动开发布局_flex布局
百分比布局就是在传统布局中将盒子宽度换为其父亲宽度的百分比,较为简单。不做整理知识导航简单介绍父项常见属性子项常见属性1. 简单介绍...原创 2020-01-18 18:20:14 · 479 阅读 · 0 评论 -
前端移动开发布局_基础入门
知识导航视口二倍图css3中的盒子模型市场上常用的移动开发选择移动端常见布局1. 视口视口(viewport)就是浏览器显示页面内容的屏幕区域(简单认为就是我们的屏幕)。并且它又分为布局视口、视觉视口和理想视口。1.1 布局视口 layout viewport...原创 2020-01-17 08:18:40 · 542 阅读 · 1 评论 -
前端基础总结之css 10_css3_3D
知识导航:透视:perspctive3D 位移:translate3d(x, y, z)3D 旋转:rotate3d(x, y, z)正文之前先来解释一下页面的三维坐标系x轴:还是水平向右(正值方向)y轴:竖直向下(正值方向)z轴:垂直于屏幕向外(正值方向)1. 透视属性perspective及3D呈现 transfrom-style1.1 透视属性如果想使我们的页面...原创 2020-01-09 22:23:40 · 331 阅读 · 0 评论 -
前端基础总结之css 09_css3_2d转换及动画
知识导航:2D 转换之 translate移动旋转缩放动画animation1. 2D转换2d转换的作用是将我们的盒子在二维平面上移动、旋转、缩放。属性:transform对应属性值translate,移动rote,旋转scale,缩放下面逐一解释1.1 移动基本语法:综合写法transform: translate(x, y)分开写transf...原创 2020-01-08 22:12:08 · 231 阅读 · 0 评论 -
前端基础总结之css 08_css3选择器
知识导航:c3中新增选择器属性选择器结构伪类选择器伪元素选择器1. 属性选择需求:在不改变结构的情况选择下面的input盒子。用我们以前的选择器,类,id可能很好实现。但用它们还得去结构里面添加类名有没有别的方法呢,属性选择器来了。实现: input[type="password"] { width: 100px; ...原创 2020-01-08 18:55:26 · 352 阅读 · 0 评论 -
前端基础总结之html_html5
知识导航:基本概念新增语义标签新增多媒体标签新增input标签属性1. 基本概念问:何为h5?答:就是html的最新版本,对html的第五次重大修改。它又定义了新的标签和属性。2. 新增语义标签什么是语义化呢,先看我们先前写的案例。<body> <div class="head"></div> <div class=...原创 2020-01-08 16:16:54 · 226 阅读 · 1 评论 -
前端基础总结之css 06_精灵等综合
知识导航:盒子的显示与隐藏用户界面样式鼠标样式input轮廓线文本域脱拽问题设置垂直对齐使溢出text文本以省略号显示css精灵1. 盒子的显示与隐藏应用:使一个盒子显示或者隐藏。如:开始鼠标未经过我的淘宝当鼠标经过我的淘宝即,鼠标经过时盒子显示。鼠标移出时,盒子隐藏1.1 display显示基本语法:display: none 隐藏对象displa...原创 2020-01-07 00:19:20 · 256 阅读 · 0 评论 -
前端基础总结之css 05_定位
知识导航:何为定位定位的分类及其特点定位应用定位是否也改变显示模式1. 何为定位分别看下面的效果图:图一图二像图一左下角的可以随着页面的滚动,但自身位置可以保持在浏览器可视位置相对不变的小导航栏;图二压在轮播图上边的几个小圆点。这两种效果使我们前几篇所用技术无法办到的。也许你会想浮动也可以使盒子脱标,压在其标准流盒子的上方。但这里我很遗憾的告诉你,浮动的盒子是无法压住图...原创 2020-01-06 18:33:46 · 554 阅读 · 0 评论 -
前端基础总结之css 04_浮动
知识导航:浮动的概念浮动的用法浮动的应用与父兄弟盒子的关系清除浮动网页布局的核心就是如何使用css摆放盒子,及其修改样式。浮动的作用举足轻重1. 浮动的概念css提供了三种方法让我们进行盒子的摆放,它们分别是:普通流块级元素独占一行从上向下依次排列;行内元素则可在一行,从左至右。超过了其父盒子宽度自动换行浮动让盒子脱离标准流,它的主要作用是使块级的盒子可以在一行显示。...原创 2020-01-05 18:16:14 · 643 阅读 · 0 评论 -
前端基础总结之css 03_盒模型
知识导航:盒子边框盒子内边距盒子外边距涉及部分c3内容网页的本质就是利用css设置盒子的大小,摆放盒子的位置。最后把内容图片、文字等放入其中。标准的盒子模型:1. 盒子边框基本语法:border : border-width || border-style || border-color属性作用border-width定义边框粗细,单位是px...原创 2020-01-04 23:19:51 · 453 阅读 · 0 评论 -
前端基础总结之css 02
知识导航复合选择器标签的显示模式行高css背景css三大特性1. 复合选择器问:我们有了上篇的基础选择器为什么还要学习复合选择器呢?答:在实际开发应用中基础选择并不能满足我们的需要,不能快速准确的选择标签。而复合选择器则能更为准确更为精确的选中目标元素1.1 后代选择器用来选择元素或元素组的子孙后代即当标签发生嵌套时,内层标签就成为了外层标签的后代语法格式:父级 子级...原创 2020-01-04 18:19:29 · 810 阅读 · 0 评论 -
前端基础总结之css 01
css 网站的美容师,它的作用便是对页面的样式进行修改、美化知识导航css引入的三种格式css基础选择器font属性基本外观属性css初识概念:CSS(Cascading Style Sheets) ,通常称为CSS样式表或层叠样式表(级联样式表)作用:主要用于设置 HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的...原创 2020-01-03 19:55:51 · 491 阅读 · 1 评论 -
前端基础总结之html 02
表格、列表、表单1. 表格作用对数据进行展示1. 创建表格基本语法<table> <tr> <td>单元格内的文字</td> ... </tr> ...</table>注解table :表格标签tr:行标签,一行可嵌套多个tdtd:单元格标签表格中没有对列的定义,只能对...原创 2019-12-18 23:37:57 · 216 阅读 · 0 评论 -
前端基础总结之html 01
1. 起始1.1 认识网页网页主要由图片,文字,超链接等元素组成。除了这些元素,网页中还可以包含音频、视频以及Flash等。1.2 浏览器查看浏览器的市场占有份额查看网站: http://tongji.baidu.com/data/browser什么叫做浏览器内核:浏览器最核心的部分叫做Rendering Engine ,准确的翻译为渲染引擎。习惯称之为浏览器内核。负责对网页语法...原创 2019-12-16 19:11:42 · 327 阅读 · 0 评论 -
ajax详细总结
ajax定义:其实他就是浏览器提供的一套 API,可以通过 JavaScript 调用,从而实现通过代码控制请求与响应。实现 网络编程。api的含义,API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。(类似于DOM,浏...原创 2019-12-14 12:18:40 · 465 阅读 · 0 评论