前端基础必备知识点

前端基础必备知识点

二、静态页阶段

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期

8

. 基本常识

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

9. Math方法
   a）Math.ceil(num) 向上取整
   b）Math.floor(num) 向下取整
   c）Math.random() 获取0-1之间的随机数，取的到0，取不到1
   d）Math.round() 四舍五入取整数

10. 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() 获取秒钟

11. 字符串方法
    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(‘,’) 切开字符串变成一个数组，匹配括号中的内容切分为数组

12. 数组方法
    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

13. 类型转换方法
    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）$(‘.class1’).addClass(‘class2class3’)找到元素新增类名（只新增不提换）b）$(‘.class1’).removeClass(‘class2 class3’) 找到元素删除类名（只删除括号内的，不删除全部）

3. 样式操作
   a）$(‘.class1’).css(‘color’:’red’)设置单个样式b）$(‘.class1’).css({‘color’:’red’,’background’:’red’}) 设置多个样式

4. 页面操作
   a）$(‘.class1’).html()获取元素结构内容b）$(‘.class1’).html(‘

   我是p标签

   ’) 把内容当作结构渲染到页面上
   c）$(‘.class1’).text()获取元素内容d）$(‘.class1’).text(‘

   我是p标签

   ’) 把内容当作文本渲染到页面上
   e）$(‘.class1’).val()获取表单元素内容f）$(‘.class1’).val(‘123’) 设置表单元素的内容
   g）$(‘.class1’).attr(‘name’)获取元素属性值h）$(‘.class1’).attr(‘ name’,’myname’) 设置元素属性值，第一个值填你要设置的属性
   i）名，第二个值填你要设置的属性值，这里设置name=‘myname’
   j）$(‘.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() 获取所有同级别的兄弟元素

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（如下图）。底层原理方面是完全不一样的。

8. Template模板引擎
   a）Art-template是目前渲染速度最快的模板引擎，方便我们把json字符串中的数据拼接到页面结构中，最后渲染到页面上。
   b）使用方法：

9. 首先引入template.js

10. 写一段死数据的页面结构

11. 取出死数据中需要被循环的部分的页面结构，进行修改为模板引擎语法（简洁语法和原生语法，同样支持if判断和for循环），并给模板一个id。如下图，上半部分是死数据，下面部分为转换后的模板语言，each后面放的就是被渲染的数组（categories）

12. 在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：移动端屏幕更加精细，一个物理像素点中可以包含22 或者33个像素点。所以在固定在头部加一句代码即可。
   j）单位：
5. Px：固定显示大小
6. Em：字符大小，根据父元素字体大小来变化。属性带继承
7. Rem：字符大小，根据根目录大小来变化。不带继承。可以配合remjs或者媒体查询方式来控制html的font-size
   k）触摸事件：分为三个阶段：手指触摸开始、手指移动、手指离开屏幕。与点击事件不同，click存在延迟事件，所以一般自己封装tap或者引用框架中的tap事件。

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