前端重要知识点总结,以供学习参考,持续更新,若有错,请各位大佬指点。
HTML/CSS部分
1.doctype的作用
告知浏览器的解析器用什么文档标准解析文档,浏览器模式分为标准模式和混杂模式,若未声明则按混杂模式解析,会导致无兼容性
2.块级元素、行内元素、空元素,块级、行内如何区分
块级元素:div p h1-h6 ul li ...
行内元素:a span img input textarea em ...
空元素:img br hr input meta
区分块级、行内元素:块级元素独占一行,可设置width height;行内元素不可设置,且与其他行内元素位于同一行
3.css盒子模型
内容 padding margin border
4.css选择器
id选择器、类选择器、标签选择器、后代选择器、属性选择器、子选择器、伪类选择器、通配符选择器(*)
优先级:!important > 内联 > id > class > tag > *
特指度:I-C-E计算公式
5.css定位
static:默认定位
absolute:绝对定位,相对于第一个非static定位的父级元素定位,原位置消失
relative:相对定位,相对于原来的位置定位,原位置仍保留
fixed:绝对定位,相对于浏览器窗口定位
6.display的值
none:元素消失
block:像块级元素一样显示
inline:像行内元素一样显示
inline-block:对象呈行内元素显示,但是内容作为block对象呈现
list-item:元素像列表一样显示(取列表的list-style-type)
7.display:none和visibility:hidden的区别
display:none指的是元素彻底消失
visibility:hidden元素还占空间,留一片空白区域
8.transition过渡
9.src和href的区别
src(source)用于替代当前元素,href(hypertext reference)建立一个引用连接。
10.localStorage、sessionStorage和cookie的区别
localStorage和sessionStorage是 H5 web storage API提供的
三者都存储在浏览器端
localStorage:存储持久数据,浏览器关闭后不丢失,存储大小>5M,仅本地保存。
sessionStorage:存储临时数据,数据在浏览器关闭后丢失,存储大小>5M,仅本地保存。
cookie:在设置的cookie过期时间前一直有效,存储大小<4K,会自动传递到服务器,服务器也可写cookie到客户端
11.一次完整的HTTP请求
js部分
1.js面向对象:继承、多态、封装
继承:实例继承原型的属性
多态:同一个方法在不同时刻表现出不同的状态(比如子对象继承了父对象的属性,但是觉得不合适,可以重写属性,覆盖父对象的属性)
封装:代码复用性提高
2.js三大核心
ECMAScript:核心语言功能
DOM: 提供访问和操作网页内容的方法和接口
BOM:提供与浏览器交互的方法和接口
3.数据类型
Undefind、Null、Number、String、Boolean、Object,Symbol(ES6新增)
4.强制类型转换和隐式类型转换
①强制类型转换:parseInt parseFloat Number String
②隐式类型转换:+ - == if while 将参数转换为boolean值
5.数据结构
栈:先入后出 push(从末端插入) pop(从末端移除)
队列:先入先出 push(从末端插入) shift(从前端移除) unshift(从前端插入)
6.ajax请求的post和get方法区别
get:使用url传递参数,容量小,安全性差,有缓存
post:一般用于修改服务器上的资源,容量大,无缓存
7.ajax
最大特点:局部刷新页面
ajax核心:XMLHttpRequest对象 或 ActiveXObject对象(IE5 IE6)
请求流程:①创建XHR对象;②调用XHR对象的open方法(接收三个参数:请求类型、url、是否异步发送请求的布尔值);③当状态码为2时,调用XHR的send方法,发送请求;④触发XHR对象的onreadystatechange事件;⑤判断readyState状态(0-4)是否完成请求(4代表完成);⑥判断status(HTTP状态);⑦调用成功、失败的函数
注意:为了确保跨浏览器兼容性,必须在调用open()方法之前指定onreadystatechange事件
解析json数据:JSON.parse()
8.jsonp原理
由回掉函数和数据构成,通过动态创建script标签使用
9.同源策略
一个域上的脚本不允许访问另一个域的文档,安全性
10.事件
HTML事件:嵌入在html元素中的事件(缺点:html与js耦合性太强)
DOM0级事件:将函数赋值给一个事件处理程序
DOM2级事件:addEventListener() removeEventListener()
IE事件:attachEvent() detachEvent()
阻止事件冒泡、获取:stopPropagation()
11.主流浏览器内核
webkit:safari chrome
presto:opera
gecko:firefox
trident:IE
12.DOM操作
创建:document.createElement
添加:①appendChild ②insertBefore
修改:①removeChild ②remove ③replaceChild ④replaceNode
12.2 DOM扩展
①querySelector等选择器
②自定义属性 data-
13.BOM
核心:window
打开窗口:window.open()
弹出窗口:alert confirm等
location对象:常用href属性
history对象:history.go(-1)返回上一页
14.理解this对象
在全局函数中,this等于window,当函数作为某个对象的方法调用时,this等于该对象
15.闭包
有权访问另一个函数作用域中的变量的函数
16.call apply
call()和apply()的作用相同,call()第一个参数是this值,其余参数需要逐个列举出来,apply()传递的第一个参数是this,其余参数是参数数组
jquery部分
1.jquery选择器
①基本选择器:id class element *
②层次选择器:parent>child(所有子元素) prev+next(prev之后的相邻元素,可用next()代替) prev~siblings(prev所有兄弟元素,可用nextAll()代替)
③简单过滤选择器(常用的)
:odd 索引值为奇数的元素,从0开始
:event 索引值为偶数的元素,从0开始
:eq(index) 索引值为index的元素,从0开始
:gt(index) 索引值大于index的元素,从0开始
:lt(index) 索引值小于index的元素,从0开始
④内容过滤选择器
:contains(text) 包含text文本的元素
:has(selector) 包含selector元素的元素
:empty 不包含子元素的或文本内容为空的元素
:parent 含有子元素或文本的元素(内部不为空的元素)
⑤可见性过滤选择器
:hidden 获取所有不可见的元素
:visible 获取所有可见的元素
⑥属性过滤选择器(常用)
[ attribute ] 获取包含给定属性的元素
[ attribute=value ] 获取给定属性是某个值的元素
⑦子元素过滤选择器
:nth-child() 获取每个父元素下的特定位置的元素,从1开始
:first-child 获取每个父元素的第一个子元素
:last-child 获取每个父元素的最后一个子元素
:only-child 获取每个父元素下的仅有一个子元素类别
⑧表单元素属性过滤选择器
:enabled 获取表单中所有属性为可用的元素
:disabled 获取表单中所有属性为不可用的元素
:checked 获取表单中所有被选中的元素
:selected 获取表单中所有被选中的option元素
⑨表单选择器(常用)
:input 获取所有的input textarea select
:password 获取所有的密码框
:radio 获取所有的单选按钮
:checkbox 获取所有的复选框
:submit 获取素有的提交按钮
:button 获取所有按钮
:file 获取所有的文件域
2.元素操作
attr() 获取、设置属性
html() 获取第一个、修改所有内容
text() 获取所有、修改所有内容
val() 获取、修改表单元素的值
css() 设置元素样式
addClass() 增加元素类名
toggleClass 切换元素类名
removeClass 删除元素类名
3.DOM操作
创建节点:$()
内部插入节点:
①append() 插入在内部最后一个位置
②appendTo() 把所选元素追加到另外指定元素的集合中
③prepend() 插入到内部第一个位置
外部插入节点
①after(content) before(content) 插入到目标元素外部的后面/前面,content为插入内容
②insertAfter(content) insertBefore(content) 插入到目标元素的后面/前面,content为目标元素