前端知识点串讲
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