腾讯实习面试总结

1、HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

2、css3 中的一些有趣的新特性：

新添加的选择器
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:last-child
E:first-of-type
E:only-child
E:only-of-type
E:empty
E:checked
E:enabled
E:disabled
E::selection
E:not(s)

@Font-face 特性
Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

CSS3 多列布局
.multi_column_style{
-webkit-column-count: 3;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;
}
<div class="multi_column_style">
.................
.................
</div>

边框和颜色

1. 颜色的透明度

color: rgba(255, 0, 0, 0.75);
background: rgba(0, 0, 255, 0.75);

2.CSS3 提供了圆角的支持

border-radius: 15px;

3.CSS3 的渐变效果

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));

4.阴影（Shadow）和反射（Reflect）效果

.class1{
text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);
}
.class2{
box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
}

.classReflect{

-webkit-box-reflect: below 10px

-webkit-gradient(linear, left top, left bottom, from(transparent),

to(rgba(255, 255, 255, 0.51)));

}

CSS3 的 Transitions, Transforms 和 Animation

3.怎样使用css3实现幻灯片效果

使用css3的animation属性切换背景图片

但是第一次切换时存在闪屏问题，现在还没有解决，哪位大神了解的告诉我一下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>css3幻灯片</title>
    <script type="text/javascript">
    var img01 = new Image();
    var img02 = new Image();
    var img03 = new Image();
    var img04 = new Image();
    img01.src = "img/1.jpg";
    img02.src = "img/2.jpg";
    img03.src = "img/3.jpg";
    img04.src = "img/4.jpg";

    /*var images = new Array();

    function preLoad() {
        for (var i = 0; i < preLoad.arguments.length; i++) {
            imgs[i] = new Image();
            imgs[i].src = preLoad.arguments[i];
        }
    }

    preLoad("img/1.jpg", "img/2.jpg", "img/3.jpg")*/
    </script>
</head>
<style type="text/css">
#pic {
    width: 800px;
    height: 450px;
    margin: 100px auto;
    overflow: hidden;
    box-shadow: 0px 5px 5px #666;
    background-position: center;
    background-size: cover;
    -webkit-animation-name: bgPic;
    -webkit-animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes bgPic {
    0% {
        background: url('img/1.jpg') no-repeat;
    }
    25% {
        background: url('img/2.jpg') no-repeat;
    }
    50% {
        background: url('img/3.jpg') no-repeat;
    }
    75% {
        background: url('img/4.jpg') no-repeat;
    }
}

@-webkit-keyframes bgPic {
    0% {
        background: url('img/1.jpg') no-repeat;
    }
    25% {
        background: url('img/2.jpg') no-repeat;
    }
    50% {
        background: url('img/3.jpg') no-repeat;
    }
    75% {
        background: url('img/4.jpg') no-repeat;
    }
    100% {
        background: url('img/2.jpg') no-repeat;
    }
}

@keyframes "bgPic" {
    0% {
        background: url('img/1.jpg') no-repeat;
    }
    25% {
        background: url('img/2.jpg') no-repeat;
    }
    50% {
        background: url('img/3.jpg') no-repeat;
    }
    75% {
        background: url('img/4.jpg') no-repeat;
    }
    100% {
        background: url('img/2.jpg') no-repeat;
    }
}
</style>

<body>
    <div id="pic">
    </div>
</body>

</html>

4.js的基本数据类型

最新的 ECMAScript 标准定义了 7 种数据类型:

6 种原始类型:
- Boolean
- Null
- Undefined
- Number
- String
- Symbol (ECMAScript 6 新定义)
和 Object

5.AJAX

简单来说，就是通过XMLHttpRequest对象像服务器发送异步请求，从服务器获取数据之后，再通过JS来操作DOM节点。

方法：

1.open（请求类型，url，布尔值）

2.send（）参数为作为请求主体发送的数据，如果不需要请求主体发送数据，则传入null

3.abort（）取消异步请求

4.getAllResponseHeaders()把HTTP请求的所有响应首部作为键/值对返回

5.getResponseHeader("header")返回指定首部的串值

6.setRequestHeader("header", "value")把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post'方法一定要 )

6.JSON与 JSONP

JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议,一个是描述信息的格式，一个是信息传递双方约定的方法

JSON

前面简单说了一下，JSON是一种基于文本的数据交换方式，或者叫做数据描述格式，你是否该选用他首先肯定要关注它所拥有的优点。

JSON的优点：

1、基于纯文本，跨平台传递极其简单；

2、Javascript原生支持，后台语言几乎全部支持；

3、轻量级数据格式，占用字符数量极少，特别适合互联网传递；

4、可读性较强，虽然比不上XML那么一目了然，但在合理的依次缩进之后还是很容易识别的；

5、容易编写和解析，当然前提是你要知道数据结构；

JSON的缺点当然也有，但在作者看来实在是无关紧要的东西，所以不再单独说明。

JSONP

为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

注：

1、ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；

2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

3、所以说，其实ajax与jsonp的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取。

4、还有就是，jsonp是一种方式或者说非强制性协议，如同ajax一样，它也不一定非要用json格式来传递数据，如果你愿意，字符串都行，只不过这样不利于用jsonp提供公开服务。

总而言之，jsonp不是ajax的一个特例，哪怕jquery等巨头把jsonp封装进了ajax，也不能改变着一点！

7.undefined Null 的区别

（1）相似性

undefined和null在if语句中，都会被自动转为false，相等运算符甚至直接报告两者相等。

（2）JavaScript的最初版本是这样区分的：null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

null表示"没有对象"，即该处不应该有值。典型用法是：

（1）作为函数的参数，表示该函数的参数不是对象。
（2）作为对象原型链的终点。


Object.getPrototypeOf(Object.prototype)
// null

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：

（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。


var i;
i // undefined

function f(x){console.log(x)}
f() // undefined

var  o = new Object();
o.p // undefined

var x = f();
x // undefined

posted @ 2016-09-25 09:49 殷的博客-Exploration 阅读(228) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

殷的博客-Exploration

腾讯实习 面试总结