1.CSS作用
CSS:层叠样式表单,渲染HTML元素标签的样式。通过使用CSS样式设计页面的格式,可将页面的内容与表现形式分离。不仅可使维护站点的外观更加容易,而且还可以使HTML文档代码更加简练,缩短浏览器的加载时间。
2.CSS3动画
animation:
@keyframes规则用于创建动画,在 @keyframes 中规定CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。
在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:
- 规定动画的名称 animation-name
- 规定动画的时长 animation-duration
用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。
0% 是动画的开始,100% 是动画的完成。
属性 | 描述 | |
---|---|---|
@keyframes | 规定动画。 | |
animation | 所有动画属性的简写属性,除了 animation-play-state 属性。 | |
animation-name | 规定 @keyframes 动画的名称。 | |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | |
animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 | |
animation-delay | 规定动画何时开始。默认是 0。 | |
animation-iteration-count | 规定动画被播放的次数。默认是 1。 | |
animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | |
animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 | |
animation-fill-mode | 规定对象动画时间之外的状态。 |
CSS的transition和animation有何区别
transition和animation都可以作动效。
transition
是过渡,由一个状态过渡到另一个状态,比如高度100px过渡到200px;transition的作用在于,指定状态变化所需要的时间。
(1)transition需要事件触发,所以没法在网页加载时自动发生。
(2)transition是一次性的,不能重复发生,除非一再触发。
(3)transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。
(4)一条transition规则,只能定义一个属性的变化,不能涉及多个属性。
animation
是动画,animation有帧的概念,可以设置关键帧keyframe,一个动画可以由多个状态过渡组成。
3.选择器权重及优先级
权重分为四级,权重值越大优先级越高。
1.内联样式。如:style=“xxx”,权值为1000
2.ID选择器。如:#content,权值为100
3.类,伪类和属性选择器。如:.content,:hover,[attribute],权值为10
4.元素选择器,伪元素选择器。如:div,p,权值为1
注意:通用选择器(*),子选择器(>),相邻同胞选择器(+)并不在四个等级中,权值为0
权重值越大优先级越高,相同权值后定义覆盖前面定义的
!important 强制重定义,提升优先级。
不要用标签名限制 class 规则,如div.info这样的写法,其实我们可以直接写为.info,从右到左解析的原因可以知道为什么其低效。
4.JQuery机制
5.AJAX
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。AJAX是一种在无需重新加载整个网页的情况下,能够更新部分网页的情况。
1.创建一个ajax对象,var ajax = new XMLHttpRequest();
2.连接服务器,ajax.open(method,url,true ); 异步传输(多个事情一起做)
3.发送请求,ajax.send( );
4.接受返回,处理数据。
readystate(浏览器服务器进行到哪一步了)
0:(未初始化)未调用open方法
1:(载入)已调用send方法,正在发送求情
2:(载入完成)send完成
3:(解析)正在解析响应内容
4:(完成)响应内容解析完成
status HTTP状态码
200:成功
301:永久重定向
302:临时重定向
304:资源找到,但不符合条件
404:找不到资源
500:服务器端出错
6.HTTP协议
HTTP协议是超文本传输协议
HTTP是一个基于TCP/IP通信协议来传递数据(HTML 文件, 图片文件, 查询结果等)。
HTTP协议工作于客户端-服务端架构为上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。Web服务器根据接收到的请求后,向客户端发送响应信息。
1.输入地址
2.浏览器通过DNS服务器查找域名的IP地址(DNS查找过程:浏览器缓存->系统缓存->路由器缓存)
3.浏览器向web服务器发送一个HTTP请求
4.服务器永久重定向响应(从http://example.com到http://www.example.com)
5.浏览器跟踪重定向地址
6.服务器处理请求
7.服务返回一个HTTP响应
8.浏览器显示HTML
9.浏览器发送请求获取嵌在HTML中的资源(如图片,音频,视频,css,js等)
10.浏览器发送异步请求
7.原型
JS进阶(2):人人都能懂的原型对象8.闭包
9.Promise
10.回调机制
11.ES6 Class 继承 与原生JS继承区别
在ES5中,继承实质上是子类先创建属于自己的this,然后再将父类的方法添加到this
(也就是使用Parent.apply(this)
的方式)或者this.__proto__
(即Child.prototype=new Parent()
)上。
而在ES6中,则是先创建父类的实例对象this,然后再用子类的构造函数修改this
12.跨域
允许跨域请求: link, img, script
不允许跨域: xhr对象 (ajax请求)
变通: script 需要服务器返回一段可执行的js语句
服务器应该返回包含数据的一条可执行的js语句复制代码
如何实现?
客户端实现: JSONP (填充式json)
1. 在客户端定义处理函数
2. 在按钮单击事件中,动态创建script元素,src设置为服务端地址,并携带请求参数callback=函数名(jsonp不支持POST请求,因为script只支持get请求)
3. 在服务器端,接收请求参数中的函数名,将函数名和要返回的数据,拼接为一条可执行的js语句
4. 客户端script,请求服务端php,获得可执行语句,自动调用提前定义好的函数处理数据
5. 在客户端处理函数结尾,要动态删除script
服务器端代理:添加http请求头
CORS