前端知识点总结

前端知识点总结

1 HTML

1.1 组成

HTML标签： 单  双   
HTML标签属性  class   id     

1.2 HTML标签

# 页面结构标签
 html  body  head
 
# HEAD 头部标签
 meta   title    style  link   script   
 
# 格式标签
 p   h1~6   pre    br   hr     
 
# 文本标签
em  strong   sub  sup   del  ins   i 

# 列表
ul  ol  li  dl  dt  dd

# 表格
table   thead  tbody  tfoot    tr    td   th    caption
td属性  colspan   rowspan

# 表单
form
input  属性  type  maxlength  size   value   placeholder   autocomplete='on/off'  max  min step             name   pattern  multiple

	  type: text  / password  / radio / checkbox   / button / submit / reset   / email  / 			   number / tel / search / date / time / week / datetime-local  / range / url / file
select  multiple
option
textarea
label
button

1.3 块状元素好内联元素

#块状 块级  独占一行
div   p   hr   br   tr    table    header  footer   h1 h2 h3 ...   
布局的元素  格式类   列表


#内联 行内
span  em  strong   a   img  input  button  sub  sup   del ...
文本类、表单控件 

2 CSS

2.1 CSS选择器

# 基本选择器
#idName  .className  tagName  *     

# 层级选择器
s1 s2
s1>s2
s1+s2
s1~s2

# 属性选择器
[attrName]
[attrName=value]
[attrName*=value]
[attrName^=value]
[attrName$=value]

# 伪类选择器
:link
:visited
:hover
:active
:focus
:first-child     li:first-child
:last-child
:nth-child(n)
:last-nth-child(n)
:only-child
:first-of-type    
:last-of-type
:nth-of-type(n)
:last-nth-of-type(n)
:only-of-type()

# 伪元素选择器
::before   content:''
::after   
::first-letter
::first-line
::placeholder  
::selection

2.2 取值

长度单位
px   em    百分比  rem

颜色单位
colorName
rgb()
rgba()
HEX 十六进制
hsl()
hsla()

2.3 CSS属性

# 字体
font-family
font-size
font-weight
font-style
font-variant: small-caps
font 复合属性

# 文本
text-align:
vertical-align: 长度单位 
line-height
text-decoration: underline/overline/line-through/none
word-wrap: 
white-space:pre/pre-line/nowrap
word-spacing
letter-spacing
text-indent


# 颜色
color
opacity: 不透明度  

# 背景
background
backgorund-color
background-image
background-repeat
background-postion
background-attachment
background-size: cover / contain / 长度

# 边框
border
border-color
border-width
border-style
border-top
border-top-width
border-top-color
border-bottom-style
....
border-radius
border-top-left-radius
...
box-shadow


# 列表
list-style
list-style-type
list-style-position
list-style-image

# 表格
table-layout
border-collapse
border-spacing
empty-cells
caption-side


# 浮动
float
clear

# 定位
postion:relative / absolute / fixed
left
top
right
bottom
z-index

# 布局
display
overflow
overflow-x
overflox-y
width
height
max-width
min-width
max-height
min-height
box-sizing: border-box / content-box

# 外边距
margin
margin-left
margin-top
margin-right
margin-bottom

# 内边距
padding
padding-left
padding-right
padding-top
padding-bottom

# 变换
transform:   translate()  translatex()  translate()
             rotate()
             skew()  skeyx()  skewy()
transform-origin


# 过渡
transition-name
transition-duration
transition-timing-function：ease / linear
transition-delay
transition


# 动画
@keyframes 动画名称 {
    0% {
        
    }
    
    100% {
        
    }
}

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-play-state:runing  pasued

# CSS3 网络字体
字体图标

# 其他
* 渐变

3 JavaScript

3.1 基本语法

指令结束符  ；或者换行
注释  //   /* */
变量  变量名规范 (不能是关键字)

3.2 数据类型

String
Number
Boolean
Null
Undefined
Object
Array
Function
........
RegExp

3.3 运算符

算术  ++  --  + - * / %  **（ES6）
比较  > >= < <=  == !=  ===   !==  
逻辑  &&   ||   !
位运算符 
赋值   =  +=  -=  /=  *=  %=
其他  +(字符串拼接)   typeof    delete    ?: 

3.4 内置对象

# String对象
length
substr()
substring()
slice()
indexOf()
lastIndexOf()
search() 可以写正则
split()
trim()

# Number
toFixed()
toString()

# Array
length
---------------------
push()
unshift()
pop()
shift()
splice()
reverse()
sort()
--------------------
concat()
join()
indexOf()
lastIndexOf()
----------------------
forEach()
map()
filter()
some()
every()
reduce()


# Function
apply()
call()

# Math
PI
abs()
pow()
max()
min()
ceil()
floor()
round()
random()


# Date
getFullYear()
getMonth()
getDate()
getDay()
getHours()
getMinutes()
getSeconds()
getMilliseconds()
getTime()
getUTC....
set...
setUTC...


#RegRxp
test()
exec()
字符串方法： search()  match() replace()

4 BOM/DOM

4.1 BOM

浏览器对象模型
#window  浏览器中运行JS的全局对象
setInterval()
setTimeout()
clearInterval()
clearTimeout()
alert()
confirm()
prompt()
innerWidth
innerHeight


#histroy
back()
go()
forward()

#navigator
userAgent

#screen
#location
href
path
hostname
hash
.....

4.2 DOM

文档对象模型   

获取页面元素 
querySelector()
querySelectorAll()

操作元素的内容、属性、样式

document   
document.body  body元素
document.documentElement  html元素

4.3 事件 Event

# 绑定事件
dom.addEventLister()
dom.on事件 = function(){}
<p onclick="code...">


# 事件
鼠标  click   dblclick   contextmenu    mouseenter  mouseleave  mousemove   mousedown  mouseup
键盘  keydown  keyup   keypress
表单  blur  focus   submit   reset   select   change   input
文档  load unload beforeunload 
图片  load   error  abort
其他  scroll   resize

# Event对象
keyCode
clientX/clientY
offsetX/offsetY
pageX/pageY
button
target
stopPropagation()
preventDefault()

5 jQuery JS库

5.1 基础

jquery DOM 对象 和 JS dom区别  、 转换
连贯操作

5.2 选择器

# 基础选择器
# 属性选择器
  [attr!=value]
# 子元素选择器
  child和of-type
# 层级选择器
# 过滤 基本筛选器
  :first
  :last
  :eq(index)
  :even
  :odd
  :lt(index)
  :gt(index)
  :not(选择器）  li:not('.item')   li.item
# 内容
  : contains(context)
  : has(选择器)
  ：parent
  : empty
# 可见性选择器
  :hidden
  :visible
# 表单
  :input
  ....
# 表单对象
  :disabled
  :enabled
  :checked
  :selected

5.3 筛选器

# 过滤
first()
last()
eq(index)
not()
filter()
has()
slice()

# 查找
parent()
parents()
offsetParent()
parentsUntil()
children()
find(选择器)
prev()
prevAll()
prevUntil()
next()
nextAll()
nextUntil()
siblings()
closest(选择器)

# 串联
add(选择器)
addBack()
end()

5.4 DOM操作 文档操作

# 内部插入
append()
appendTo()
prepend()
prependTo()

# 外部插入
after()
insertAfter()
before()
insertBefore()

# 包裹
wrap()
wrapAll()
wrappInner()
unwrap()

# 替换
replaceWith()
replaceAll()

# 删除
empty()
remove()

# 克隆
clone()

5.5 样式操作

#css
css()


# 尺寸
width() / height()
innerWidth() / innerHeight()
outerWidth() / outerHeight()

# 位置
offset()
postion()
scrollLeft()
scrollTop()

5.6 属性

# 属性
attr()
removeAttr()
prop()
removeProp()

# class
addClass()
removeClass()
toggleClass()
hasClass()


# 取值
text()
html()
val()

5.7 事件

#绑定
on()
one()

#解除绑定
off()

#委派
父元素.on('事件', ‘子元素’， fn)

# 自动触发事件
$('btn').trigger('click')

# jqueyr 事件

# Event

5.8 jQuery 动画

# 基本
show()
hide()
toggle()

# 滑动
slideUp()
slideDown()
slideToggle()

# 淡入淡出
fadeIn()
fadeOut()
fadeToggle()
fadeTo()

# 自定义动画
animate()

# 动画控制
delay()
finish()
stop()

5.9 jquery插件

6 Boostrap UI样式库

6.1 基础

响应式 media
bootstrap.css
bootstrap.js  依赖于jquery 

6.2 布局

栅格系统
表格
表单
.....

6.3 组件

字体图标
按钮
导航条
..

6.4 插件

模态框
轮播图
.....

7 Vue JS框架

7.1 Vue实例

new Vue ({
    el:,
    template:,
    render:,
    data:,
    computed:,
    watch:,
    methods:
    //钩子
    created:function(){},
    mounted: function(){}
    
})

7.2 Vue视图语法 （模板语法）

# 插值
{{}}  v-html  v-text  v-once

# 属性绑定
v-bind:属性名  :属性名

# 指令
v-for v-else-if  v-html v-text v-once  v-bind v-on ...

# 样式绑定
:class="{}"
:style="{}"

# 条件渲染
v-if
v-else
v-else-if
v-show

# 列表渲染
v-for
key

# 事件
v-on:事件  @事件
修饰符   .stop  .prevent   
键盘修饰符
系统按键的修饰符

# 表单
v-model
文本框
checkbox
radio
select

修饰  v-model.number   .trim  .lazy

7.3 组件

# 注册组件
Vue.component(组件名, {
    props
    data: function(){
        
    }
    同vue实例
	comonents: {
        局部组件
	}
})；


# 组件通信
父组件->子组件   prop
子组件->父组件   $emit()  自定义事件


# 插槽

# 动态组件
<component is="组件名">

7.4 项目

# 前端工具 支持环境
node.js    

# 包管理工具
npm 

# 模块化
webpack   ...

# 自动化工具
grunt
glup
webpack

# Vue全家桶
vue
vue-router
vuex
vue-ssr 服务端渲染
element-ui