前端面试题

最新推荐文章于 2023-05-03 20:54:03 发布

步行者之神

最新推荐文章于 2023-05-03 20:54:03 发布

阅读量465

点赞数

分类专栏： web 文章标签：面试题前端

web 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1、你做过的最满意的前端作品？

2、你了解哪些新技术？

3、你是怎样接触前端的？
4、你对你的学校和专业怎么看？

5.下图绿色区域的宽度为100%，其中有三个矩形，第一个矩形的宽度是200px，第二个和第三个矩形的宽度相等。请使用CSS3中的功能实现它们的布局。

已知HTML结构是：
<div class="box">
<div class="item">column 1</div>
<div class="item">column 2</div>
<div class="item">column 3</div>
</div>

5.解答：

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title>Document</title>  
     <style>  
     .box {  
         background-color: green;  
         display: box;  
         display: -moz-box;  
         display: -webkit-box;  
         display: -0-box;  
         width: 100%;  
     }  
     .box .boxOne {  
     background-color: white;  
     -moz-box-flex:0;  
     -webkit-box-flex:0;  
     -0-box-flex:0;  
     width: 200px;  
     margin: 10px;  
     }  
     .box .boxTwo {  
     background-color: white;  
     -moz-box-flex:1;  
     -webkit-box-flex:1;  
     -0-box-flex:1;  
     margin: 10px 0;  
     }  
     .box .boxThree {  
     background-color: white;  
     -moz-box-flex:1;  
     -webkit-box-flex:1;  
     -0-box-flex:1;  
     margin: 10px;  
     }  
     </style>  
 </head>  
 <body>  
     <div class="box">  
         <div class="boxOne">column1</div>  
         <div class="boxTwo">column2</div>  
         <div class="boxThree">column3</div>  
     </div>  
 </body>  
 </html>  

6、在tmall.com的某个页面中存在一个id等于J_iframe_taobao的iframe，该iframe的域名是taobao.com。在不考虑IE浏览器的情况下，用最简洁的代码实现页面与该iframe进行双向通信？
...
<iframe id="J_iframe_taobao" src="http://taobao.com/xxx"></iframe>
...

6.解答：
看别人的不知道对不对：

[html]view plaincopy 
   
 <iframe id="J_iframe_taobao" src="http://taobao.com/xxx" onload="getdata()"></iframe>  
 <script>  
     function getdata()  
        {  
            var iframe =document.getelmentById('J_iframe_taobao');  
            iframe.onload = function()  
           {  
               var data =iframe.contenWindow.name;  
               alert(data);  
           }  
           iframe.src="about:blank";  
        }  
 </script>  

----------------------------------------------
另一个大神写的答案：

[html]view plaincopy 
   
 父页面监听  
 var cb = function(json){  
             if(json){  
                 if(json == 'SUCC') {  
                     QT.WM.close();  
                 } else {  
                     json = $.parseJSON(json);  
                     wan360.appurl = json.appurl;  
                     wan360.appname = json.appname;  
                 }  
             }  
         };  
         wan360.xdomain.listen({APP: cb});  
 子页面发送：  
 wan360.xdomain.sendMessage(window.parent,'{"appurl":"'+app.appurl+'","appname":"'+app.appname+'"}','APP');  
 好吧，答案应该是html5的postMessage，下面的代码可能有误~  
   
     var onmessage = function(e) {  
            var data = e.data,p = document.createElement_x('p');  
            p.innerHTML = data;  
            document.getElementById('J_iframe_taobao').appendChild(p);  
         };  
         //监听postMessage消息事件  
         if (typeof window.addEventListener != 'undefined') {  
           window.addEventListener('message', onmessage, false);  
         } else if (typeof window.attachEvent != 'undefined') {  
           window.attachEvent('onmessage', onmessage);  
         }  

7、请用html5标准完成以下页面布局（要求完整书写整个页面的html代码，不需要写CSS）

7.解答：

[html]view plaincopy 
   
 <pre name="code" class="html"><!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title>Html5</title>  
 </head>  
 <body>  
     <header></header>  
     <nav></nav>  
     <div>  
         <aside></aside>  
         <section></section>  
     </div>  
     <footer></footer>  
 </body>  
 </html>  

加CSS样式：

[html]view plaincopy 
   
 <pre name="code" class="html"><!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title>阿里校招前端第7体</title>  
     <style type="text/css">  
         * {  
             margin: 0px;  
             padding: 0px;  
         }  
         html,body,article{  
             height: 100%;  
             width: 100%;  
         }  
         header,nav,aside,hgroup,footer{  
             border: 1px solid black;  
             display: block;;  
             text-align: center;  
             margin: 10px;  
             line-height: 50px;  
         }  
         header,footer,nav{  
             height: 50px;  
             border-radius: 10px;  
         }  
         article{  
             display: box;  
             display: -moz-box;  
             display: -o-box;  
             display: -webkit-box;  
         }  
         aside{  
             box-flex:0;  
             -moz-box-flex:0;  
             -o-box-flex:0;  
             -webkit-box:0;  
             width: 200px;  
             border-radius: 10px 0 0 10px;  
             margin-top: 0px;  
             margin-right: 0px;  
   
         }  
         hgroup{  
             box-flex:1;  
             -moz-box-flex:1;  
             -o-box-flex:1;  
             -webkit-box-flex:1;  
             border-radius: 0 10px 10px 0 ;  
             margin-top: 0px;  
         }  
         footer{  
             margin-top: 0;  
         }  
     </style>  
 </head>  
 <body>  
     <header>头部</header>  
     <nav>导航</nav>  
     <article>  
         <aside>侧边栏</aside>  
         <hgroup>内容区</hgroup>  
     </article>      
     </div>  
     <footer>脚部</footer>  
 </body>  
 </html>  

8、请写一个 getParents 方法让它可以获取某一个 DOM 元素的所有父亲节点。

8.解答：

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title>Html5</title>  
 </head>  
 <body>  
     <div>  
         <div id='test'></div>  
         <div></div>  
     </div>  
     <script type="text/javascript">  
         var getParents = function(id){  
             var nodes = id.parentNode;  
             while(nodes.tagName){  
                 document.write(nodes.tagName+"</br>");  
                 nodes = nodes.parentNode;  
             }  
             return nodes;  
         }  
         getParents(test);  
     </script>  
 </body>  
 </html>  

9、请写出至少5个html5新增的标签，并说明其语义和应用场景。

9.解答：

[html]view plaincopy 
   
 ①canvas 标签定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。  
 ②command 标签定义命令按钮，比如单选按钮、复选框或按钮。  
 ③datalist 标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。  
 ④details 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。与 legend 一起使用，来制作 detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。  
 ⑤hgroup 标签用于对网页或区段（section）的标题进行组合。  
 ⑥mark主要用来在视觉上向用户呈现那些需要突出的文字。mark标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。  

10、实现如下图所示的布局

要求：sidebar 固定宽度200px，content和header宽度自适应
当window宽度小于600px时，变成三行布局

默认如下
宽度小于600px时如下

下面是HTML结构：
<div class='header'>
<h1>header</h1>
</div>
<div class="sidebar">
<h1>sidebar</h1>
</div>
<div class="content">
<h1>content</h1>
</div>

请写出其css代码：（提示，可以使用media query来检测浏览器窗口宽度）

10.解答：

[html]view plaincopy 
   
 </pre><p></p><pre name="code" class="html"><!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title>Document</title>  
     <style type="text/css">  
     @media(max-width: 600px){  
         *{  
             margin: 0px;  
             padding: 0px;  
         }  
         div{  
             height: 50px;  
             margin: 5px;  
         }  
         .header{  
             width:auto;  
             background-color: red;  
         }  
         .sidebar{  
             width: auto;  
             background-color: green;  
         }  
         .content{  
             width: auto;  
             background-color: blue;  
         }  
     }  
     @media(min-width: 600px){  
         *{  
             margin: 0px;  
             padding: 0px;  
         }  
         div{  
             height: 50px;  
             margin: 5px;  
         }  
         .header{  
             width:auto;  
             background-color: red;  
         }  
         .sidebar{  
             width: 200px;  
             background-color: green;  
             float: left;  
             margin-top: 0;  
         }  
         .content{  
             width: 100%;  
             background-color: blue;  
             margin-left: 210px;  
         }  
     }  
           
     </style>  
 </head>  
 <body>  
 <div class='header'>              
       <h1>header</h1>          
 </div>          
 <div class="sidebar">              
       <h1>sidebar</h1>          
 </div>  
 <div class="content">  
       <h1>content</h1>  
 </div>  
 </body>  
 </html>  

11.有一个页面区块如图所示，请用符合语义化的标签书写HTML代码。

11.解答:

[html]view plaincopy 
   
 <div>  
     <h4>店铺动态评分<span>与同行业相比</span></h4>  
     <ul>  
         <li>描述相符：<a href="" target="_blank"><em title='4.8'>4.8 </em><span><b>高于</b><em>16.14%</em></span></a></li>  
         <li>服务态度：<a href="" target="_blank"><em title='4.8'>4.8 </em><span><b>高于</b><em>13.32%</em></span></a></li>  
         <li>发货速度：<a href="" target="_blank"><em title='4.8'>4.8 </em><span><b>高于</b><em>29.57%</em></span></a></li>  
     </ul>  
 </div>  

12.在CSS样式中常使用px、em两种长度单位，各有什么优劣，在表现上有什么区别？

12解答：

[html]view plaincopy 
   
 px表示像素，em是相对单位。  
 px作为尺寸时，部分浏览器中放大页面时，文字不会变大。  
 em在缩放查看网页时，能准确缩放文字。  
 px像素(Pixel)，相对长度单位，像素px是相对于显示器屏幕分辨率而言的(引自CSS2.0手册)；em是相对长度单位，相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(引自CSS2.0手册)。  

13.请列举所知道的css选择器，并说明怎么判断优先级？

13.解答

[html]view plaincopy 
   
 标签选择器  如 div{}  
 类选择器，如 .className{}  
 id选择器，如 #idName{}  
 后代选择器，如 .polaris span img{}，后代选择器实际上是使用多个选择器加上中间的空格来找到具体的要控制的标签。  
 群组选择器，如 div,span,img{}，群组选择器实际上是对CSS的一种简化写法，只不过把有相同定义的不同选择器放在一起，省了很多代码。  
 伪类选择器，如 div:first-child{}，伪类选择器就好像是给元素添加了一个幻象类，并根据这个类添加相应的样式，与类选择器不同，伪类选择器的类名都是固定的，且以“ ： ”开头。  
 伪元素选择器，如 h2:first-letter{}，伪元素选择器就好像是在元素中添加了一个伪元素，比如这里可以理解成<h2><h2:first-letter>F</h2:first-letter>irst</h2>，但实际上却是<h2>First</h2>。  

14.有两个盒子 A、B，B 在 A 盒子中，它们的 CSS 是这么定义的：

A {
position:relative;
width:500px;
height: 500px;
background-color:green;
}
B {
position:absolute;
max-width:300px;
max-height:300px;
background-color:blue;
}
如何实现 B 在 A 中水平方向和垂直方向居中？

14.解答

说实话这题我没太看懂，我就说下垂直居中和水平居中的方法吧。
水平居中大家都知道margin:0 auto就行了，垂直居中也有display:table，然后vertical-align: middle;这都是基本方法，但是我目测这道题考察的是css3吧。css3可以用下面的方法实现子元素居中（不同浏览器需要写私有属性）

[html]view plaincopy 
   
 display: box;   
 box-orient: horizontal;   
 box-pack: center;   
 box-align: center;  

15.

//现有代码如下:

[html]view plaincopy 
   
 function test() {  
     var a = 1;  
     setTimeout(function() {  
         alert(a);  
         a = 3;  
     }, 1000);  
     a = 2;  
     setTimeout(function() {  
         alert(a);  
         a = 4;  
     }, 3000);  
 }  
    
 test();  
 alert(0);  

//请注意,代码中有三处alert.他们分别会alert出什么值,时间上的顺序是怎样的?

//请详述得到这个答案的原因,特别是test函数的局部变量a是对运行结果的影响.

[html]view plaincopy 
   
 15解答：  
 我用谷歌浏览器测试，弹出顺序是：0 2 3  
 （但是我看到别人答案是alert2 3 0，时间顺序为 3 1 2）  

16.当我们使用CSS3新属性，比如：box-shadow或者transition时，我们怎么检测浏览器是否支持这些属性？
请设计一个JavaScript函数，该函数接受一个CSS属性名作为参数，并返回一个boolean值，表明浏览器是否支持这个属性。

16.解答

[html]view plaincopy 
   
 var supports = (function() {  
    var div = document.createElement('div'),  
       vendors = 'Khtml Ms O Moz Webkit'.split(' '),  
       len = vendors.length;  
    
    return function(prop) {  
       if ( prop in div.style ) return true;  
    
       prop = prop.replace(/^[a-z]/, function(val) {  
          return val.toUpperCase();  
       });  
    
       while(len--) {  
          if ( vendors[len] + prop in div.style ) {  
             // browser supports box-shadow. Do what you need.  
             // Or use a bang (!) to test if the browser doesn't.  
             return true;  
          }  
       }  
       return false;  
    };  
 })();  
    
 if ( supports('textShadow') ) {  
    document.documentElement.className += ' textShadow';  
 }  

17.如果你现在使用的是 Google Chrome 或 Apple Safari，如何让 input 元素在默认情况下显示 “alipay WD Team”，而在光标移入后则显示空白？

17.解答

css3 placeholder必须输入文字才会消失，所以不行，用JS实现

[html]view plaincopy 
   
 onblur="this.value = this.value == ' ' ? this.defaultValue : this.value"   
 onfocus="this.value = this.value == this.defaultValue ? ' ' : this.value"  

18.解释一下
alert(Function instanceof Object);
alert(Object instanceof Function);

这个结果。

18.解答

Object, Function, Array等等这些都被称作是构造“函数”，他们都是函数。而所有的函数都是构造函数Function的实例。从原型链机制的的角度来说，那就是说所有的函数都能通过原型链找到创建他们的Function构造函数的构造原型Function.protorype对象，所以：
alert(Object instanceof Function);// return true
与此同时，又因为Function.prototype是一个对象，所以他的构造函数是Object. 从原型链机制的的角度来说，那就是说所有的函数都能通过原型链找到创建他们的Object构造函数的构造原型Object.prototype对象，所以：
alert(Function instanceof Object);// return true
延伸
有趣的是根据我们通过原型链机制对instanceof进行的分析，我们不难得出一个结论：Function instanceof Function 依然返回true, 原理是一样的

Function是构造函数，所以它是函数对象
函数对象都是由Function构造函数创建而来的，原型链机制解释为：函数对象的原型链中存在Function.prototype
instanceof查找原型链中的每一个节点，如果Function.prototype的构造函数Function的原型链中被查到，返回true
因此下面代码依然返回true
alert(Function instanceof Function);// still true
结论

在JavaScript语言中，一切的一切都是对象，它们全部继承自Object. 或者说所有对象的原型链的根节点都是Object.prototype
理解原型链机制在JavaScript中式如何工作的是非常重要的。掌握了它，不管一个对象多么复杂，你总能够轻而易举地将它攻破。

19./现有代码如下：
var foo = 1;
function main(){
alert(foo);
var foo = 2;
alert(this.foo)
this.foo = 3;
}
//1.请给出以下两种方式调用函数时，alert的结果，并说明原因。
var m1 = main();
var m2 = new main();
//2.如果想要var m1 = main()产生的m1和前面的m2完全一致,又该如何改造main函数?

19.解答

[html]view plaincopy 
   
 1、var m1=main()时，alert的结果是undefined和1,原因是首先在alert(foo)的时候，foo在main()函数域内还没有被定义，因此提示undefined,而在输出this.foo时，因为此时的函数执行环境是全局域，相当于window.main()，因此this=window，所以this.foo=window.foo=1  
 var m2=new main()时,alert的结果是undefined和undefined，第一个undefined的原因与前面一种情况相同，而第二个提示undefined的原因是在这种情况下用new构造了一个main()的实例，因此执行环境发生了改变，不再是全局域，而是m2，因此此时的this=m2，因此this.foo=m2.foo，但是由于在alert(this.foo)时，m2中的this.foo还未被定义,因此提示undefined  
 2、若要m1=main()与前面的m2产生的效果一致，则main()函数要修改成为function main(){alert(foo);foo=undefined;alert(this.foo);}即可  

20.写一段脚本，实现：当页面上任意一个链接被点击的时候，alert出这个链接在页面上的顺序号，如第一个链接则alert(1), 依次类推；

20.解答

[html]view plaincopy 
   
 window.onload = function(){  
     var links = document.getElementByTag('a');  
     var l = links.length;  
     for(var i = 0;i<l;i++){  
         links[i].onclick = function(x){  
         return function(){alert(x+1);};  
         }(i);  
     }  
 };  

21.在CSS样式中常使用px、em两种长度单位，各有什么优劣，在表现上有什么区别？

21.解答

同12题

22.(new Date).getTime() 和 +new Date() 都可以取到当前时间戳，它们的实现原理是什么，哪个效率更高？

23.有哪些前端代码优化/性能优化的方法？

23.解答

[html]view plaincopy 
   
 ①Yslow-23条规则  
 YslowYahoo发布的一款基于FireFox的插件,主要是为了提高网页性能而设计的，下面是它提倡了23条规则，还是很不错的，分享一下：  
   
 1.减少HTTP请求次数  
 合并图片、CSS、JS，改进首次访问用户等待时间。  
 2. 使用CDN  
 就近缓存==>智能路由==>负载均衡==>WSA全站动态加速  
 3. 避免空的src和href  
 当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值。测试  
 4. 为文件头指定Expires  
 使内容具有缓存性。避免了接下来的页面访问中不必要的HTTP请求。  
 5. 使用gzip压缩内容  
 压缩任何一个文本类型的响应，包括XML和JSON，都是值得的。旧文章  
 6. 把CSS放到顶部  
 7. 把JS放到底部  
 防止js加载对之后资源造成阻塞。  
 8. 避免使用CSS表达式  
 9. 将CSS和JS放到外部文件中  
 目的是缓存，但有时候为了减少请求，也会直接写到页面里，需根据PV和IP的比例权衡。  
 10. 权衡DNS查找次数  
 减少主机名可以节省响应时间。但同时，需要注意，减少主机会减少页面中并行下载的数量。IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时，IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。  
 11. 精简CSS和JS  
 12. 避免跳转  
 同域：注意避免反斜杠 “/” 的跳转；跨域：使用Alias或者mod_rewirte建立CNAME（保存域名与域名之间关系的DNS记录）  
 13. 删除重复的JS和CSS  
 重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存，它们都存在重复运算 JavaScript的问题。  
 14. 配置ETags  
 它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性，例如某个文件在1秒内修改了10次，Etag可以综合  Inode(文件的索引节点(inode)数)，MTime(修改时间)和 Size来精准的进行判断，避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用，可取后两个参数。使用ETags减少Web应用带宽和负载  
 15. 可缓存的AJAX  
 “异步”并不意味着“即时”：Ajax并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。  
 16. 使用GET来完成AJAX请求  
 当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。因此使用GET获取数据时更加有意义。  
 17. 减少DOM元素数量  
 是否存在一个是更贴切的标签可以使用？人生不仅仅是DIV+CSS  
 18. 避免404  
 有些站点把404错误响应页面改为“你是不是要找***”，这虽然改进了用户体验但是同样也会浪费服务器资源（如数 据库等）。最糟糕的情况是指向外部 JavaScript的链接出现问题并返回404代码。首先，这种加载会破坏并行加载；其次浏览器会把试图在返回的404响应内容中找到可能有用的部分当 作JavaScript代码来执行。  
 19. 减少Cookie的大小  
 20. 使用无cookie的域  
 比如图片 CSS 等，Yahoo! 的静态文件都在主域名以外，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名的影响。  
 21. 不要使用滤镜,png24的在IE6半透明那种东西，别乱使，淡定的切成PNG8+jpg  
 22. 不要在HTML中缩放图片  
 23. 缩小favicon.ico并缓存  
 ②Page Speed在运行时会分析一些Web服务器配置和服务器上下载下来的代码，还会创建一个结果列表，其中包括如何改进网页的建议。分析基于一个分为五类的最佳实践列表：  
 　　* 优化缓存——让你应用的数据和逻辑完全避免使用网络  
 　　* 减少回应时间——减少一连串请求-响应周期的数量  
 　　* 减小请求大小——减少上传大小  
 　　* 减小有效负荷大小——减小响应、下载和缓存页面的大小  
 　　* 优化浏览器渲染——改善浏览器的页面布局  
   
 　这些实践考虑了页面加载时间，以及发出页面请求到客户端看到结果之间的时间。页面加载时间包括创建TCP连接、解析DNS名称、发送请求、获取（包括来自于缓存的）资源、执行脚本、渲染。  

24.有一个数组，其中保存的都是小写英文字符串，现在要把它按照除了第一个字母外的字符的字典顺序(字典顺序就是按首字母从a-z顺序排列，如果首字母相同则按第二个字母……)排序，请编写代码：

例：
["abd","cba","ba",]
排序后
["ba","cba","abd"]

24.解答

[html]view plaincopy 
   
 #include <iostream.h>  
 #include <cstdio.h>  
 #include <cstring.h>  
 #include <algorithm.h>  
 using namespace std;  
 #define STRINGN 128  
 #define MAXN 1024  
 struct data  
 {  
     char name[STRINGN];  
 };  
 data array[MAXN];  
 bool cmp(data x,data y)  
 {  
     return strcmp(x.name + 1, y.name + 1) < 0; }   
 int main() {   
 #ifdef TEST       
 freopen("input", "r", stdin);     
 freopen("output", "w", stdout);   
 #endif    
 int n;    
 for (n = 0; cin >> array[n].name; ++ n);  
    
     sort(array,array+n,cmp);  
     for (int i = 0; i < n; ++ i)  
         cout << array[i].name << endl;  
     return 0;  
 }  

25.

1.你了解arguments对象么,它有哪些属性?

2.arguments是数组么?如果不是请写一段代码将其转化为真正的数组,什么情况下需要这么做?
3.arguments有什么特性,可以用这些特性做什么?

25.解答

[html]view plaincopy 
   
 function A(){  
 　　　var  Args = Array.prototype.slice.call(arguments, 0);  
 　　　B(Args.slice(1));  
 　　}  

26.请为JavaScript每个Array对象添加一个类似于PHP的shuffle()的方法。

26.解答

[html]view plaincopy 
   
 var data = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);      
     if (!Array.prototype.shuffle) {  
         Array.prototype.shuffle = function() {  
             for(var j, x, i = this.length; i; j = parseInt(Math.random() * i), x = this[--i], this[i] = this[j], this[j] = x);  
             return this;  
         };  
     }       
     alert(data.shuffle());  

27.CSS的“伪类”和“伪元素”有什么区别？请举例伪元素的几种应用场景。

28.页面中有个id为J_banner的区块，请使用CSS实现在普通屏幕上使用图片banner.png为背景，在retina屏幕上显示更高分辨率的图片banner_retina.png作为背景

28.解答

css3的images-set属性：

[html]view plaincopy 
   
 background-image:url(1x.png);  
 background-image:-webkit-image-set(url(1x.png) 1x,url(2x.png) 2x);  

29.下面是一段html代码，展示效果如图A所示。请给出一段css，使这段代码达到图B的展示效果。

A:B:

[html]view plaincopy 
   
 <ul>   
 <li>   
 <a href="#"><img width="100" height="100" src="a.jpg /></a>   
 <p>文字一</p>   
 </li>   
 <li>   
 <a href="#"><img width="100" height="100" src="a.jpg" /></a>   
 <p>文字二</p>   
 </li>   
 </ul>   
 <ul>   
 <li>文字三</li>   
 <li>文字四</li>   
 <li>文字五</li>   
 <li>文字六</li>   
 </ul>  

要求：

1.不允许修改html结构；
2.css不必考虑浏览器默认样式的因素，布局正确即可；
3.不要求严格对齐，如有需要，元素尺寸可自定义。

30.页面上有一个节点 <div id=”a” style=”background-color:#000; width:200px; height:200px;”></div>，请实现当鼠标移至该节点时，该节点的透明度从 100 渐变为 20：

31./请补全下面的函数，仅当p为数组时返回true.
//可给出多种实现方式,每种实现方式不一定完美,如果不完美,需要说明每种实现的限制
function isArray(p) {
//你的代码在这里
}

32.var a = [-3,-1,0,1,3,5,7,9], b = [-4,-2,0,2,3,4,5,6,7,8];
//返回一个合并过的数组[-4,-3,-2,-1,0,0,1,2,3,3,4,5,5,6,7,7,8,9]

33.

<p>1</p>
<p>2</p>
<p>3</p>
请编写一段css，让数字1颜色变蓝。

33.解答

[html]view plaincopy 
   
 p:first-child{color:blue}  

34.请让页面中的一个元素（10px*10px）围绕坐标(200, 300) 做圆周运动

35.用HTML实现下面表格的结构：

36.data-’属性的作用是什么？

36.解答

[html]view plaincopy 
   
 data-为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过getAttribute方法获取。ppk提到过使用rel属性，lightbox库推广了rel属性，HTML5提供了data-做替代，这样可以更好地使用自定义的属性。  

37.请列举CSS中用于隐藏元素的两个属性？两者的差异？

37.解答

[html]view plaincopy 
   
 display:none和visibility: hidden;前者不占位，后者占位。  

38.在jquery中，选择器使用的是sizzle，sizzle的基本原理是”从后往前查找”，比如选择器“ .a > .b > .c”，是先查找”.c”而不是”.a”。请解释为什么大部分情况下“从后往前”比“从前往后”查找速度更快

39.//现有代码如下:
var a = 1;
var obj = { b : 2 };
var fn = function() {};
fn.c = 3;
function test(x, y, z) {
x = 4;
y.b = 5;
z.c = 6;
return z;
}
test(a, obj, fn);
alert(a + obj.b + fn.c);
//这段代码能够正常运行么?如果不能正常运行,请说明原因.
//如果可以运行,最后一行alert的值是多少,并请说明原因.

39解答：

可以运行，alert弹出12.

40.怎么将一个字符串按照长度分成几个字符串：
答案：

[html]view plaincopy 
   
 <script>  
         var n=3;//假设3个字符为一串分开  
         var str = "s1e2t3e5t4w8g6f";  
         var new_str = "";  
         for (var i = 0; i < str.length; i++) {  
             new_str += str.substr(i, 1);  
             if ((i+1) % n == 0)  
                 new_str += ",";  
         }  
         if (str.length % n == 0)  
             new_str=new_str.substr(0, new_str.length - 1);  
         alert(new_str);  
     </script>  

41.数组去重：
答案：

[html]view plaincopy 
   
 Array.prototype.unique3 = function()  
 {  
 var n = [this[0]]; //结果数组  
 for(var i = 1; i < this.length; i++) //从第二项开始遍历  
 {  
 //如果当前数组的第i项在当前数组中第一次出现的位置不是i，  
 //那么表示第i项是重复的，忽略掉。否则存入结果数组  
 if (this.indexOf(this[i]) == i) n.push(this[i]);  
 }  
 return n;  
 }  

42.用CSS实现布局

让我们一起来做一个页面
首先，我们需要一个布局。
请使用CSS控制3个div，实现如下图的布局：

43.用javascript优化布局
由于我们的用户群喜欢放大看页面，于是我们给上一题的布局做一次优化。
当鼠标略过某个区块的时候，该区块会放大25%，并且其他的区块仍然固定不动
效果如下：

提示：
也许，我们其他的布局也会用到这个放大的效果哦。
可以使用任何开源代码，包括曾经你自己写的。

关键字：
javascript、封装、复用

42.43.解答

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title>Document</title>  
     <style type="text/css">  
     body{ margin:0; padding:0}    
 div{background:#CCCCCC; position:absolute}    
 #first{width:100px; height:150px}    
 #second{top:160px;width:100px;height:150px}    
 #third{ width:200px; height:310px; left:110px}   
     </style>  
       
 </head>  
 <body>  
 <div id="first"></div>       
 <div id="second"></div>       
 <div id="third"></div>  
 <script type="text/javascript">  
     function zoom(id,x,y){ // 设置缩放函数参数：容器id、横向缩放倍数、纵向缩放倍数（等比例缩放时也可以设定一个参数）    
 var obj=document.getElementById(id); // 获取元素对象值    
 var dW=obj.clientWidth; // 获取元素宽度 ,obj.clientWidth 相当于obj的内容的宽度+padding,不包含border和margin，同obj.scrollWidth;   
 var dH=obj.clientHeight; // 获取元素高度    
 //var oTop=obj.offsetTop; //obj.offsetWidth 相当于obj的内容的宽度 + padding +border,不包含margin   
 //var oLeft=obj.offsetLeft;    
 obj.onmouseover=function(){ // 鼠标移入    
 this.style.width=dW*x+"px"; // 横向缩放    
 this.style.height=dH*y+"px"; // 纵向缩放    
 this.style.backgroundColor="#f00"; // 设置调试背景    
 this.style.zIndex=1; // 设置z轴优先    
 }    
 obj.onmouseout=function(){ // 鼠标移出，设回默认值    
 this.style.width="";    
 this.style.height="";    
 this.style.padding="";    
 this.style.backgroundColor="";    
 this.style.zIndex="";    
 }    
 }    
 zoom("first",1.25,1.25);    
 zoom("second",1.25,1.25);    
 zoom("third",1.25,1.25);   
 </script>   
 </body>  
 </html>  

-------2015年3月前端实习生笔试题目-------------

43.(9题)：实现一个isDuplicate方法，如果这个方法传入的参数包含相同的数字则返回true，否则返回false。

解答：

[html]view plaincopy 
   
 function isDuplicate(){  
     var n = arguments.length;  
     for (var i = 0; i < n-1; i++) {  
         for(var j = i+1; j < n; j++){  
             if(arguments[i] == arguments[j]){  
                 return true;  
                 break;  
             }  
         }  
     }  
     return false;  
 }  
 isDuplicate(1,2,3,2);  

44. (10题)：下面代码希望在点击每段内容的时候给它加个灰色背景，可是下面这段代码好像没有满足要求，请帮忙修改代码：

for(var i = 0; i < document.getElementsByTagName('p').length; i ++) {
var item = document.getElementsByTagName('p')[i];
(function(j) {
document.getElementsByTagName('p')[i].onclick = function() {
item.style.backgroundColor='#eee';
}
}(i))
}

解答：这题一开始没看出来啥问题，后来改代码没反应，之后换了个颜色才发现是原来修改的对的！！只是颜色和屏幕的相近没看出来。

[html]view plaincopy 
   
 <body>  
             
 <p>nijhao </p>     
 <p>dddd</p>  
 <p>nijhao </p>     
 <p>dddd</p>    
 <script type="text/javascript">  
     window.onload = function () {  
         var item = document.getElementsByTagName('p');  
         for (var i = 0; i < item.length; i++) {          
             (function (i) {  
                 item[i].onclick = function () {  
                     this.style.backgroundColor = 'red';  
                 };  
             }(i));  
         }  
     }  
 </script>  
 </body>  

45.(11题)：为字符串实现一个render方法，实现下面的变量替换功能
var greeting = 'my name is ${name}, age ${age}';
var result = greeting.render({name: 'XiaoMing', age: 11});
console.log(result); //my name is XiaoMing, age 11

46.(12题)：实现函数 range([start, ]stop [,step]) 返回一个数组（step大于1）
> range(1, 11); => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
> range(0); => []
> range(10); => [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
> range(0, 30, 5); => [0, 5, 10, 15, 20, 25]

47.(13题)：用js实现随机选取10–100之间的不同的10个数字，存入一个数组，并降序排序.

-------2015年3月前端实习生笔试题目---结束----------

48.在页面中实现如下效果：

解答：

代码：

[html]view plaincopy 
   
 <html xmlns="http://www.w3.org/1999/xhtml">   
 <head>   
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
 <title>2个DIV</title>   
 <style type="text/css">   
 #heng,#shu{left:50%;top:50%;position:absolute; background-color:#f00;}    
 #shu{width:50px;height:150px;margin-left:-25px;margin-top:-75px;}    
 #heng{width:150px;height:50px;margin-left:-75px;margin-top:-25px;background-color:#f00;}    
 </style>   
 </head>   
 <body>   
      <div id="heng"></div>   
      <div id="shu"></div>  
       
 </body>   
 </html>  

49.

50.

51.

52.

[html]view plaincopy 
   
 <html xmlns="http://www.w3.org/1999/xhtml">   
 <head>   
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
 <title>2个DIV</title>   
 <style type="text/css">   
 #heng,#shu{left:50%;top:50%;position:absolute; background-color:#f00;}    
 #shu{width:50px;height:150px;margin-left:-25px;margin-top:-75px;}    
 #heng{width:150px;height:50px;margin-left:-75px;margin-top:-25px;background-color:#f00;}    
 </style>   
 </head>   
 <body>   
      <div id="heng"></div>   
      <div id="shu"></div>  
 </body>   
 </html>  