前端基础必备知识点

我会带着你远行 2022-01-23 03:59 319阅读 0赞

## 前端基础必备知识点 ##

二、**静态页阶段**

1.  内容、元素、高度居中  
    a）块级元素水平使用margin:0 auto；  
    b）内联文本居中在父级使用text-align:center;  
    c）绝对定位居中（子绝父相），居中元素left:50%,margin-left: -元素本身宽度的一半（负值）。  
    d）文字高度垂直行高等于高度Height：50px；line-height：50px；  
    e）弹性盒子display: flex;justify-content: center;align-items: center;
2.  **浮动**  
    Float:left和float:right，能够让元素（内联元素会自动转换为块级）排列到一排上去，因为块级元素独占一行
3.  **怎么清除浮动**  
    A）在浮动的父级元素上添加类名clearfix（伪元素方法，内容自己百度）  
    B）加上overflow: hidden的属性，无论页面是否出问题，只要有地方浮动，就必须要清除浮动（不清除会导致页面塌陷）
4.  **常见定位方式**  
    A) 相对定位position: relative：元素本身占据文档流中的位置，根据top和left的值，相对本身位置进行偏移 （如果top:0,left:0就保持本身位置）  
    B) 绝对定位position:absolute：元素本身不占据位置，会以外层最近定位的元素为父级，再根据top、left的值，进行定位。（如果top:0,left:0就会以父级左上角为顶点定位）（子绝父相是里面元素的绝对定位，外层相对定位，可以让里面的元素定位在外面的元素中）  
    C) 固定定位position:fixed：元素不占据位置，以浏览器为父级，再根据top、left的值，进行定位。（如果bottom:0,right:0就会以浏览器右下角为顶点定位）

三、**Css3和html5（记住有哪些功能即可，方便以后查询文档）**  
1.Html5  
A) 语义化标签  
B) 音频、视频  
C) Web存储（sessionStorage、localStorage）  
D) 新表单类型：滑块、取色器、数字文本、邮件文本等  
E) 新表单元素  
F) 新表单属性  
G) 拖拽  
H) Canvas（可以使用插件echarts、chart、D3等插件）  
I) 地址地理位置（可以使用百度地图、高德地图）

2.Css3  
A) 圆角 border-radius  
B) 盒子阴影 box-shadow  
C) 字体阴影 text-shadow  
D) 2D(平移) translate()、rotate()、scale()、skew()  
E) 3D translate（x,y,z）  
F) 过渡 transition  
G) 媒体查询 @media  
H) 弹性布局 flex  
I) 改变盒子模型 box-sizing  
J) 动画 @keyframes  
K) 背景透明 background：rgba  
L) 背景大小 background-size  
M) 渐变 radial-gradient(径向渐变)、linear-gradient（线性渐变）  
N) 字体 @font-face

四、**Js基础阶段**

1.  Js的数据类型  
    A) 字符串string  
    B) 数字number  
    C) 数组array（复杂类型）  
    D) 布尔boolean  
    E) 对象object（复杂类型）  
    F) 函数function（复杂类型）  
    G) 未定义/空Undined/Null
2.  数组（可以存储一些数据）  
    A）创建数组，var arr =\[\];  
    B）存数据arr\[0\]=’我是第一项’  
    C）取数据var a = arr\[0\];  
    D）遍历数组for(var i=0;i<arr.length;i++)\{console.log(arr\[i\])\}
3.  对象（可以存储一些数据）  
    A）创建对象，var obj=\{\};  
    B）第一种：存数据obj.name=’前端12期’、第二种：obj\[‘name’\]=’王凡’、第三种：obj\[name\]=’杨旭升’。三种方式都可以对obj这个对象存入name属性和值（键值对），但是第二、第三种需要注意，name带了引号则是字符串，存入name这个键。如果不带引号则name是个变量，需要先提前申明，这种方式可以配合for循环每次存入不同点键值对  
    C）取数据var a = obj\[name\];  
    D）遍历对象 for(var key in obj)\{console.log(obj\[key\])\}
4.  函数（可以帮我们做一些事情）  
    A）创建函数，function fn()\{\};  
    B）调用函数fn()  
    C）传入参数fn(a,b) 调用函数的时候括号中放入数据则为实参，在函数内部的a和b 则形式参数，可以替代传入的实参数据 function fn(a,b)\{console.log(a,b)\}  
    D）return的使用1、在函数调用处返回return后面跟着的数据（没有返回值则为undefined） 2、 截断后面的代码运行
5.  If else的使用  
    条件判断语句，比如判断是否为单数  
    E）If(判断条件)\{判断为真后执行的代码\}  
    F）If(判断条件)\{判断为真后执行的代码\}else\{判断为假后执行的代码\}
6.  For的使用  
    A）For循环，通常可以自己循环N次，或者循环遍历数组  
    B）For(var i=初始值;i<=循环次数;i++)\{每次执行的代码\}  
    初始值和循环次数都可以随意配置
7.  “+”的使用  
    A) “+”号两边都是数值类型则起到计算的作用  
    B) “+”号两边任意一边为字符串，则起拼接作用  
    如：var a = “前端” Var q = a+15+”期” ，则q为前端15期

# . 基本常识 #

a）长度从1开始  
b）索引号从0开始  
c）没有被引号包起来的是变量，被引号包起来为常量  
d） typeof a运算符返回一个用来表示表达式的数据类型的字符串,可能的字符串有：“number”、“string”、“boolean”、“object”、“function” 和 “undefined”;  
e）如若想知道a是否为数组或者为某个构造函数的实例对象用instanceof

1.  **Math方法**  
    a）Math.ceil(num) 向上取整  
    b）Math.floor(num) 向下取整  
    c）Math.random() 获取0-1之间的随机数，取的到0，取不到1  
    d）Math.round() 四舍五入取整数
2.  **Date方法（了解）**  
    a）Date().getFullYear() 获取年  
    b）Date().getFullYear() 获取年  
    c）Date().getFullYear() 获取年  
    d）Data().getMonth() 获取月，这里获取的是0-11之间的数，所以要加1  
    e）Data().getDate() 获取日  
    f）Data().getDay() 获取星期，这里获取0-6，所以要加1  
    g）Data().getHours() 获取小时  
    h）Data().getMinutes() 获取分钟  
    i）Data().getSeconds() 获取秒钟
3.  **字符串方法**  
    a）Str.Length 获取长度  
    b）Str.substr(a,b) 截取字符串，从第a项开始，一共截取b个。返回截取后的结果  
    c）Str.replace(‘a’,’b’) 替换字符串中的内容，把字符串中的a替换成b  
    d）Str.IndexOf(‘a’) 检查是否包含a这个字符，如果存在返回索引号，如果不存在返回-1  
    e）Str.charAt(num) 单独取出该字符串索引为num的字符串  
    f）Str.slice(‘a’,’b’) 截取字符串，从第a项开始，一共截取b个。返回截取后的结果  
    g）Str.split(‘,’) 切开字符串变成一个数组，匹配括号中的内容切分为数组
4.  **数组方法**  
    a）arr.length 获取数组长度  
    b）arr.slice(‘a’,’b’) 截取数组，从第a项开始，一共截取b个。返回截取后的结果  
    c）arr.push(‘a’) 把括号中的内容追加到数组的最后一项中  
    d）array.shift( ) 删除并返回数组的第一个元素  
    e）arr.join(‘’) 把数组的元素拼接变成一个字符串，把数组中的每一项用括号中的内容拼接成一个字符串  
    f）arr.indexof(‘a’) 检查是否包含a这一项，如果存在返回索引号，如果不存在返回-1
5.  **类型转换方法**  
    a）number.toString() 把其他类型的数据转换成字符串类型  
    b）parseInt(‘number’) 把字符串类型的数字转化成整数类型（例 40px 转 40）  
    c）parseFloat(‘number’) 把字符串类型的数字转化成数字类型的小数（例 42.4aaa 转 42.4）  
    d）JSON.stringify(‘objcet’) 把对象转化成字符串（ajax阶段学习）  
    e）JSON.parse(‘string’) 把字符串类型转化成对象（ajax阶段学习）

五、**JsDom操作阶段**

1.  js获取元素  
    a）document.getElementById(‘id’) 利用唯一id获取元素，获取一个元素标签  
    b）document.getElementsByTagName(‘element’) 利用标签名，获取所有标签，获取的是一个伪数组，可以使用取数组的方式\[0\]取出第一个元素  
    c）document.getElementsBysClassName(‘’) 利用类名，获取所有该类名的元素，获取的是一个伪数组，可以使用取数组的方式\[0\]取出第一个元素,这个有兼容性，不常用  
    d）document.querySelector() 获取一个元素，可以通过.a获取类为a的元素，通过\#a获取id为a的元素，通过a获取标签为a的元素  
    e）document.querySelectorAll()获取一个元素集合（伪数组）
2.  **事件**  
    a）点击事件el.onclick =function()\{\}  
    b）聚焦事件el.onfocus()=function()\{\}  
    c）失焦事件el.onblur =function()\{\}  
    d）元素被改变事件el.οnchange=function()\{\}  
    e）键盘按下事件el.onkeydown =function()\{\}  
    f）键盘弹起事件el.onkeyup =function()\{\}  
    g）鼠标移入事件el.οnmοuseenter=function()\{\}（跟onmouseover比没有冒泡问题）  
    h）鼠标移出事件el.οnmοuseleave=function()\{\}（跟onmouseout比没有冒泡问题）  
    i）鼠标移动事件el.οnmοusemοve=function()\{\}
3.  **类名操作（直接替换class）**  
    a）el.ClassName 获取元素类名  
    b）el.ClassName=’setclass1 setclass2’ 设置类名（多个类名，必须空格隔开来设置）
4.  行内样式操作(宽、高、颜色、背景色、背景图、边框线、定位等等)  
    a）获取元素颜色el.style.color  
    b）设置元素的颜色el.style.color =’red’  
    c）获取元素背景el.style.background  
    d）设置元素背景el.style.background=’red’
5.  行内自定义属性操作(任何自定义属性都可以设置，type、name、src、href、disabled等等)  
    a）获取元素name属性 getAttribute(‘name’);  
    b）设置元素的颜色setAttribute(‘name’,’q12’);  
    c）获取元素type属性 getAttribute(‘type);  
    d）设置元素的颜色setAttribute(‘type,’password’);
6.  取值(表单input、标签div、span)  
    a）表单元素取值 input.value()  
    b）表单元素设置值 input.value(‘qianduan12’)  
    c）标签元素取值div.innerText  
    d）标签元素设置值 div.innerText = ‘qianduan12’;(不可以识别
    
    标签，会直接到页面上显示)  
    e）标签元素取值div.innerText  
    f）标签元素设置值 div.innerText = ‘
    
    qianduan12
    
    ’;(可以识别
    
    标签渲染成页面节点)
7.  节点操作（可以直接获取元素节点的都是有兼容性问题的）  
    a）el.parentNode获取el元素的父级元素  
    b）el.children 获取el元素里面所有子元素（伪数组）  
    c）el.firstElementChild 获取el元素里面的第一个子元素  
    d）el.lastElementChild 获取el元素里面的最后一个子元素  
    e）el.nextElementSibling 获取el元素相邻的下一个元素  
    f）el.previousElementSibling获取el元素相邻的上一个元素
8.  **动态创建**  
    a）方法创建标签：var newel = document.createElement(‘el1’);利用el2.appendChild(newel),把新创建出来的元素追加到el2上面  
    b）申明变量：var html = ‘
    
    我是一个标签，但本质是字符串
    
    ’，通过innnerHTML可以直接渲染到页面上去。  
    c）动态创建通常配合for循环和字符串拼接，可以实现多次不一样内容的创建
9.  **获取坐标(了解)**  
    a）var height1= window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0 浏览器被卷去的高度(获取宽度可以换成x、left)  
    b）var height2=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth|| 0 浏览器可视窗口区域宽度(获取高度可以换成height)  
    c）event.screenX 鼠标与屏幕最左侧的距离  
    d）event.clientX 鼠标与浏览器最左侧的距离  
    e）this.offsetWidth 当前元素本身的宽度  
    f）this.offsetLeft 当前元素距离最左侧父级元素的偏移量  
    g）event.pageX-this.offsetLeft; 鼠标在当前元素中X轴的位置  
    h）this.clientWidth 当前元素的宽度（不包括外边距和边线）

六、\*\*

## Jquery常用方法 ##

\*\*

1.  Jq获取元素  
    a）KaTeX parse error: Expected 'EOF', got '\#' at position 3: (‘\#̲id’) 利用唯一id获取元…(‘element’) 利用标签名，获取所有标签对象  
    c）$(‘.class’) 利用类名，获取所有该类名的元素对象
2.  类名操作  
    a） ( ‘ . c l a s s 1 ’ ) . a d d C l a s s ( ‘ c l a s s 2 c l a s s 3 ’ ) 找 到 元 素 新 增 类 名 （ 只 新 增 不 提 换 ） b ） (‘.class1’).addClass(‘class2 class3’) 找到元素新增类名（只新增不提换） b） (‘.class1’).addClass(‘class2class3’)找到元素新增类名（只新增不提换）b）(‘.class1’).removeClass(‘class2 class3’) 找到元素删除类名（只删除括号内的，不删除全部）
3.  样式操作  
    a） ( ‘ . c l a s s 1 ’ ) . c s s ( ‘ c o l o r ’ : ’ r e d ’ ) 设 置 单 个 样 式 b ） (‘.class1’).css(‘color’:’red’) 设置单个样式 b） (‘.class1’).css(‘color’:’red’)设置单个样式b）(‘.class1’).css(\{‘color’:’red’,’background’:’red’\}) 设置多个样式
4.  页面操作  
    a） ( ‘ . c l a s s 1 ’ ) . h t m l ( ) 获 取 元 素 结 构 内 容 b ） (‘.class1’).html() 获取元素结构内容 b） (‘.class1’).html()获取元素结构内容b）(‘.class1’).html(‘
    
    我是p标签
    
    ’) 把内容当作结构渲染到页面上  
    c） ( ‘ . c l a s s 1 ’ ) . t e x t ( ) 获 取 元 素 内 容 d ） (‘.class1’).text() 获取元素内容 d） (‘.class1’).text()获取元素内容d）(‘.class1’).text(‘
    
    我是p标签
    
    ’) 把内容当作文本渲染到页面上  
    e） ( ‘ . c l a s s 1 ’ ) . v a l ( ) 获 取 表 单 元 素 内 容 f ） (‘.class1’).val() 获取表单元素内容 f） (‘.class1’).val()获取表单元素内容f）(‘.class1’).val(‘123’) 设置表单元素的内容  
    g） ( ‘ . c l a s s 1 ’ ) . a t t r ( ‘ n a m e ’ ) 获 取 元 素 属 性 值 h ） (‘.class1’).attr(‘ name’) 获取元素属性值 h） (‘.class1’).attr(‘name’)获取元素属性值h）(‘.class1’).attr(‘ name’,’myname’) 设置元素属性值，第一个值填你要设置的属性  
    i）名，第二个值填你要设置的属性值，这里设置name=‘myname’  
    j） ( ‘ . c l a s s 1 ’ ) . p r o p ( ‘ s e l e c t e d ’ ) 获 取 自 带 元 素 属 性 值 ， 这 里 主 要 针 对 d i s a b l e / c h e c k e d / s e l e c t e d 三 个 属 性 时 ， p r o p 获 取 的 值 是 t r u e / f a l s e k ） (‘.class1’).prop(‘ selected’)获取自带元素属性值，这里主要针对disable/checked/selected三个属性时，prop获取的值是true/false k） (‘.class1’).prop(‘selected’)获取自带元素属性值，这里主要针对disable/checked/selected三个属性时，prop获取的值是true/falsek）(‘.class1’).prop(‘ selected’,true) 设置自带元素属性值，第一个值填你要设置的属性名，第二个值填你要设置的属性值，
5.  **触发事件**  
    a）点击事件$(‘.class1’).click(function()\{\})  
    b）聚焦事件focus()  
    c）失焦事件blur()  
    d）元素被改变事件change()  
    e）键盘按下事件keydown()  
    f）键盘弹起事件keyup()  
    g）鼠标移入事件mouseenter()  
    h）鼠标移出事件mouseleave()  
    i）鼠标移动事件mousemove()  
    j）页面滚动事件scroll()  
    k）入口函数或者页面加载事件ready()
6.  **查询操作**  
    a）$(‘.class1’).children() 获得子元素  
    b）.find() 获得所有子孙后代的元素  
    c）.next() 获得下一个元素  
    d）.nextAll() 获得后面所有的元素  
    e）.prev() 获得上一个元素  
    f）.prevAll() 获得前面所有的元素  
    g）.parent() 获取父级元素  
    h）.parents() 获取所有祖级元素  
    i）.siblings() 获取所有同级别的兄弟元素
7.

## ajax和jsonp ##

a）动态获取数据，如果是同源（比如后台写的接口数据，请使用ajax，跨域其实也可以使用，但是需要后台修改请求设置）、跨域（比如聚合、360、腾讯等提供的接口数据，请使用jsonp），通过一系列操作，填写地址、类型、参数（都由后台提供），最终获取后台提供数据到本地。接着就是拿到动态数据去渲染页面，这里可以使用字符串拼接，也可以使用template模板引擎  
b）get常用于获取数据，没有一定要求，根据后台文档来填下面的内容  
c）Post常用于提交数据，没有一定要求，根据后台文档来填下面的内容  
d）Type、url、data、dataType等所有的参数都是按照接口文档中的内容填写，只有success中的方法是成功请求回后台数据后，前端渲染页面的操作代码是自己写。  
e）Ajax本质是发起XMLHttpRequest请求。一般会直接返回一个json字符串。（接收后需要转化为对象）  
f）Jsonp本质是利用script的跨域特性，对后台发起一个请求。一般也是返回一个json字符串（这个返回的字符串有些特殊，返回的是一个函数调用，把真正的返回值，当作一个参数放在函数内）  
g）从使用角度来讲jq的ajax和jsonp使用基本保持一致，唯一注意的是如果是jsonp，需要把dataType中的值填写为jsonp（如下图）。底层原理方面是完全不一样的。

1.  **Template模板引擎**  
    a）Art-template是目前渲染速度最快的模板引擎，方便我们把json字符串中的数据拼接到页面结构中，最后渲染到页面上。  
    b）使用方法：
2.  首先引入template.js
3.  写一段死数据的页面结构
4.  取出死数据中需要被循环的部分的页面结构，进行修改为模板引擎语法（简洁语法和原生语法，同样支持if判断和for循环），并给模板一个id。如下图，上半部分是死数据，下面部分为转换后的模板语言，each后面放的就是被渲染的数组（categories）
5.  在js中调用template方法，该方法会返回拼接完毕的页面结构：var html = template(‘模板id’，后台请求来的数据)  
    值的注意的地方是，放后台数据的位置一定要放一个对象（父级对象），需要循环遍历的数组必须在这个对象下面（子级数组）。  
    5.最后把html()、append()等添加到页面当中

七\*\*、Js库\*\*  
a）jQuery就是一个封装好的js，他提供了大量的方法，把一些存在兼容性问题和操作复杂的方法都封装了起来。方便我们去调用，js转jq（$(元素)）、jq转js（jq对象\[0\]）。口号：write Less，Do More（写的少做多）  
b）Zepto 针对移动端专门开发的一套js库，是jQuery的轻量级替代品，使用风格与jquery基本一致，但是放弃了一些jq的兼容性，把功能分模块，按需引用

八、**UI组件的推荐（了解）**  
a）Bootstarp UI组件鼻祖（栅格系统），响应式布局都可以使用  
b）Amaze 国产比较优秀的ui组件，对国内网站排版和字体展示比较符合国人要求，响应式也可以用  
c）Mui 移动端优先，性能优化比较好，可以支持低端手机。而且组件的体验都是贴近原生（ios为主）的效果。  
d）Layui 偏向做后台管理系统。  
e）Wui 仿微信风格的UI组件。  
f）Vant、element、mint主要都是基于vue的开发UI组件

九\*\*、移动端\*\*  
a）布局：  
b）2.响应式布局（responsive）  
c）  
d）针对越来越多的移动端设备，一个web设计能够兼容多个终端。通过CSS3中的Media Query（媒介查询），采用栅格化方式，分别为不同的屏幕分辨率定义布局。  
e）  
f）3.弹性布局（flexbox）  
g）  
h）响应式布局中的一种，为了实现响应式布局，CSS3提供的一种最新布局模式。提供更加高效的方式来对布局容器的子元素进行排列、对齐和分配空白空间。

1.  固定布局：主要用于pc端，宽高写死，一般都有版心。
2.  流式布局：主要用于移动端，以百分比为主要形式，让屏幕自适应，这种布局方式定义灵活，能够根据屏幕的情况变化，但是这种方式设计的效果不太容易控制。
3.  弹性布局：主要用于移动端，以css3中的flex属性布局为主。布局灵活，可以根据不同屏幕适配。
4.  响应式布局：主要用于多终端显示，一套代码在不同屏幕下显示不一样的效果（原理：媒体查询，ui框架中使用为栅格布局）  
    i）视口API：移动端屏幕更加精细，一个物理像素点中可以包含2*2 或者3*3个像素点。所以在固定在头部加一句代码即可。  
    j）单位：
5.  Px：固定显示大小
6.  Em：字符大小，根据父元素字体大小来变化。属性带继承
7.  Rem：字符大小，根据根目录大小来变化。不带继承。可以配合remjs或者媒体查询方式来控制html的font-size  
    k）触摸事件：分为三个阶段：手指触摸开始、手指移动、手指离开屏幕。与点击事件不同，click存在延迟事件，所以一般自己封装tap或者引用框架中的tap事件。

十、面向对象  
a）原型 每个对象都有原型，都可以通过访问 .prototype可以访问到该对象的原型，构造函数通过new出来的实例都可以调用它的原型  
b）继承 自己没有的属性和方法通过原形链（爸爸甚至是爷爷）继承、自己整条原形链上没有的的，可以使用call、apply来借调，使用。  
c）闭包 跨作用域访问变量，优点是防止变量命冲突，缓存私有数据，缺点是大量闭包浪费内存，影响性能