好未来--面经-1

1.css 基础

例如:
(1)使div2在div1在垂直居中

<div class= "div1">
  <div class="div2">
 </div>
<div>
   .div1{
            width: 200px;
            background: #a9dba9;
            height: 500px;
            margin: 0px;
            vertical-align: middle;
        }
        .div2{
            width: 100px;
            height: 100px;
            background: #00A000;
           position: relative;
           top:50%;
            /*left: 50%;*/
            /*margin-left:-50px;*/
           margin-top: -50px;
        }

(2)使span的宽度和高度

span{
  width:100px;
  height:500px;
/*
答案:display:line-block
*/
}

(3)个页面上两个div左右铺满整个浏览器,要保证左边的div一直为100px,右边的div跟随浏览器大小变化(比如浏览器为500,右边div为400,浏览器为900,右边div为800),请写出大概的css代码。

<div id="left">Left sidebar</div>
<div id="content">Main Content</div>

<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
#left {
    float: left;
    width: 220px;
    background-color: green;
}
#content {
    background-color: orange;
    margin-left: 220px;
    /*==等于左边栏宽度==*/
}
</style>

2 js 基础

(1)
执行结果:

var name = "dog";
function Animal(name){
    this.name = name;
};
var animal = Animal("cat");
console.log(name);
console.log(animal.name);

结果:

cat 
TypeError: animal is undefined [详细了解]

(2)

var name = "dog";
function Animal(name){
    this.name = name;
};
var animal = new Animal("cat");
console.log(name);
console.log(animal.name);

执行结果:

dog
cat

(3)

<ul>
  <li>hello1</li>
 <li>hello2</li>
 <li>hello3</li>
</ul>
实现点击某个<li>后,该li变红色,其他<li>变蓝色
..........
  li:hover{
          background: red;
}
ul:hover{
     background: blue;
}

3 算法

(1)给任意数组arr=[1,2,2,2,3,3,3,4],去掉重复元素。去重后的结果为arr=[1,2,3,4],并使用arr.unique()调用.

var arr = [1,1,12,2,2,2,3,3,3];
Array.prototype.unique= function () {
    var b = {};

    for(var i = 0;i < this.length;i++){
        b[this[i]+""]="0";
    }
    this.length = 0;
    for(var i in b){
        this.push(parseInt(i));
    }
    console.log(this);
}
arr.unique();

(2)给一个字符串,找出出现次数最多的元素:

function theMost(arr) {
    var b = {};
    if(arr==null||arr.length == 0||arr=={}){
        return;
    }
    var c = arr.charAt(0);
    var maxCount = 1;
    for(var i = 0;i < arr.length;i++){
        var key = arr.charAt(i)+"";
        if(b.hasOwnProperty("key")){
            b[key]++;
        }else{
            b[key] = 1;
        }
        if(b[key] > maxCount){
            maxCount = b[key];
            c = key;
        }
    }
    return c;

}
theMost("abcabcaae");

(3)给出数字n,找出1-n中,1出现的次数。例如:n=12。在1,2,3,4,5,6,7,8,9,10,11,12中,1出现了5。


3前端知识点

1.与事件相关的知识
(1)事件冒泡和事件捕获。
(2)事件代理
2.ajax 相关知识
(1)ajax同步和异步的区别
(2)jsonp实现跨域的原理,如何触发返回的回调函数。
3.回调相关知识。

function X(f1,f2){
//X执行成功,执行f1,不成功执行f2。
//f1,f2有时也可能不会作为参数传递,即X执行成功与失败都不要求执行回调函数。
}??瞎编的答案。
//:js中参数放在arguments数组中,通过判断arguments长度来判断是否传递了参数。

4.js中的两个定时器。setTimeOut()和SetIntervial();
区别:

    function fun1 (){
        var n = 1;
        console.log("hello");
        setTimeout("fun1()",1000);
    }
和
setInterval(function(){},1000);
一样吗?//好像是一样的。。。。

5.json字符串转对象。

$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串
JSON.parse(jsonstr); //可以将json字符串转换成json对象 
JSON.stringify(jsonobj); //可以将json对象转换成json对符串 
eval('(' + jsonstr + ')'); //可以将json字符串转换成json对象,注意需要
//json字符外包裹一对小括号 

转换成json对象
6.html页面加载优化:
(1)合并压缩html,js,css
(2)页面中图片较多时,在html 中预留大小,如果图片是背景,使用css sprint。
(3)js 放在页面最下面。
(4)js 按需异步加载。(defer async ,requirejs 等)

7 对象的深克隆和浅克隆

浅克隆:克隆出的对象会共同拥有引用型变量。
深克隆:克隆对象时,对对象的引用型属性也要进行深克隆。

8.事件代理

感想:

#1.算法很重要。
#2.css,js基础语句很重要(不要总想着用的时候再查,要熟练)
#3.js,作用域,原型链。
#4.找一个可以提现个人亮点的项目,和面试官详细介绍。


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 2,583评论 0 25
  • 照看着生活在Halamshiral的精灵们。 几乎没有人意识到他们无处不在。仆人擦着地板,侍者倒着酒水,园丁除着杂...
    Mr_Blacky阅读 244评论 0 0
  • 自存永存者将他的圣民抛撒于万国之中, 殿堂之主将他的圣物交付与异国他乡, 异国之民在发笑,他乡之君在放荡! 伟大的...
    钟道阅读 4,858评论 0 6
  • 时间总是匆匆流逝,世间的人与物也无一例外地在改变着, 时间来了,我们没有跟上它的脚步,时间走了,我们也无法捉住它青...
    橙梦萌妹阅读 665评论 0 0
  • 你,曾是我不知所措。 而我,从来都是你的无关痛痒。 我曾经对你说你回头看看, 一定会有我的身影。 我站得脚都酸了,...
    至暮无成阅读 280评论 0 1