因为最近要...了，所以先做个准备~~
收集了一些面试题，
1.h5新特性
- 新的Doctype
- 语义化标签header，footer等
- 表单元素email，date类型等，必要属性required、placeholder，正则表达式pattern="[A-Za-z]{4,10}"
- 本地存储localstorage
- Audio，video支持
- data属性
2.input和textarea的区别
3.用一个div模拟textarea的实现 contenteditable
<ul contenteditable="true"> <li>悼念遇难香港同胞 </li> <li>深圳特区30周年</li> <li>伊春空难</li> </ul>
4.左右布局：左边定宽、右边自适应，不少于3种方法
1）圣杯布局
<style> body{ margin:0; } .container{ padding:0 0 0 200px; } .main{ float:left; width:100%; background-color: #eee; } .left{ float:left; width:200px; margin-left:-100%; background-color: pink; position:relative; left:-200px; } </style> <div class = "container"> <div class = "main">main</div> <div class = "left">left</div> </div>
2）左边浮动，右边margin-left或者overflow
<style> body{ margin:0; } .main{ /* margin-left:200px; */ background-color: #eee; overflow: hidden; } .left{ float:left; width:200px; background-color: pink; } </style> <div class = "container"> <div class = "left">left</div> <div class = "main">main123</div> </div>
3）flex,只针对支持flex的浏览器
<style> body{ margin:0; } .container{ display: flex; width:100%; } .main{ background-color: #eee; flex:1; } .left{ width:200px; background-color: pink; } </style> <div class = "container"> <div class = "left">left</div> <div class = "main">main123</div> </div>
4）绝对定位
<style> body{ margin:0; } .main{ background-color: #eee; margin-left:200px; } .left{ width:200px; background-color: pink; position:absolute; top:0; left:0; } </style> <div class = "container"> <div class = "left">left</div> <div class = "main">main123</div> </div>
CSS3用过哪些新特性
radius,box-shadow,animate,transition
| 值 | 描述 |
|---|---|
| animation-name | 规定需要绑定到选择器的 keyframe 名称。。 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线。 |
| animation-delay | 规定在动画开始之前的延迟。 |
| animation-iteration-count | 规定动画应该播放的次数。 |
| animation-direction | 规定是否应该轮流反向播放动画。 |
<style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/ } @keyframes mymove { from {left:0px;} to {left:200px;} } @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} } </style> </head> <body> <p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p> <div></div> </body>
| 值 | 描述 |
|---|---|
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始。 |
<style> div { width:100px; height:100px; background:blue; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } div:hover { width:300px; } </style> </head> <body> <div></div> <p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p> <p><b>注释：</b>本例在 Internet Explorer 中无效。</p> </body>
对栅格的理解
就是把一行分割成若干个栅格，然后根据百分比来分配宽度，offset-left就是外边距margin-left，move-left就是left
（水平）居中有哪些实现方式
<style> body{ margin:0; } .grid-3{ width:200px; height:100px; background-color: pink; position:absolute; top:50%; left:50%; margin:-50px 0 0 -100px; } </style> <div class = "container"> <div class = "grid-3">left</div> </div>
<style> body{ margin:0; } .grid-3{ width:200px; height:100px; background-color: pink; margin:0 auto; } </style> <div class = "container"> <div class = "grid-3">left</div> </div>
<style> body{ margin:0; } #content { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 240px; width: 70%; background-color: pink } </style> <div id="box"> <div id="content"> Content here</div> </div>
1像素边框问题
transform: scale(0.5)
图片懒加载
把图片的真实路径放到其他属性里，url指向同一个图片，监听滚动事件，滚动到底部的时候再进行加载
关键代码为
var test = { isLoaded:true, el:"scrollCb", num:0, init:function(){ this.bindClick(); this.bindScroll(); this.scrollCheck(); }, bindClick:function(){ $("#scrollCb").on("click",this,function(){ if(test.isLoaded){ test.isLoaded = false; test.loading(); } }) }, loading:function(){ $("#"+test.el).html("loading~~~~"); }, bindScroll:function(){ $(window).scroll(function(){ if(isLoaded&&test.scrollCheck()){ isLoaded = false; test.loading(); appendContent(); } }) }, scrollCheck:function(){ var dom = $("#"+test.el); var elHeight = dom.offset().top+dom.height(); var clientHeight = document.documentElement.clientHeight||document.body.clientHeight; var scrollHeight = document.documentElement.scrollTop||document.body.scrollTop; console.log("---elHeight---"+elHeight+"----"+(clientHeight+scrollHeight+0)); return elHeight<clientHeight+scrollHeight?true:false; }, load:function(){ isLoaded = true; $("#scrollCb").html("点击加载") } }
监听滚动的时候，如果每次都要触发事件的话，会影响性能，这时候需要用到节流函数和防抖函数
节流函数就是在某个time内，一定会触发一次func
function throttle(func,delay,time){ var startTime = new Date().getTime(); var timeout; return function(){ clearTimeout(timeout) var curTime = new Date().getTime(); var context = this,args = arguments; if(curTime-startTime>time){ func.apply(context,args); startTime = curTime; }else{ timeout = setTimeout(func,delay) } } }
防抖函数就是延迟执行函数
function throttle(func,delay,time){ var timeout; return function(){ clearTimeout(timeout); var context = this,args = arguments; timeout = setTimeout(function(){ func.apply(context,args) },delay) } }
实现页面加载进度条
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>progress</title> <script src = "../../jquery/jquery-1.12.3.min.js"></script> <script> $({property:0}).animate({property:100},{ duration:3000, step:function(){ var per = Math.round(this.property); console.log(per); $("#progress").css("width",per+"%"); if(per == 100){ $("#progress").addClass("done") } } }) </script> <style> body{ margin:0; } #progress{ height:2px; background-color: #b91f1f; transition:opacity 500ms linear; position:fixed; /* -webkit-animation:pulse 2s; */ } #progress.done{ opacity: 0; } #progress span{ position:absolute; height:2px; -webkit-box-shadow:#b91f1f 10px 0 16px 1px; -webkit-border-radius:100%; opacity: 1; width:150px; right:-10px; -webkit-animation:pulse 1s ease-out 0s infinite; } @-webkit-keyframes pulse{ 30%{opacity:0.5;} 60%{opacity: 0} 100%{opacity:0.5;} } </style> </head> <body> <div id = "progress"> <span></span> </div> </body> </html>
事件委托
就是click，mouseover等事件委托给别人去做，on，delegrate
实现extend函数
$.fn.extend是为查询的节点对象扩展方法，是基于$的原型扩展的方法
$.extend是扩展常规方法，是$的静态方法。
合并多个对象，如
var obj = {name:"123"};
var target = $.extend({sex:"male",height:"123",name:"nam1"},obj);
console.log(target);//输出{sex: "male", height: "123", name: "123"}
;(function($){ $.fn.extend({ "alterBgColor":function(options){ options = $.extend({ odd:"odd", even:"even", selected:"selected" },options); $("tbody>tr:odd",this).addClass(options.odd); $("tbody>tr:even",this).addClass(options.even); $("tbody>tr",this).click(function(){ var hasSelected = $(this).hasClass(options.selected); $(this)[hasSelected?"removeClass":"addClass"](options.selected) .siblings().removeClass(options.selected).find(":checkbox").attr("checked",!hasSelected); }); $("tbody>tr:has(:checked)",this).addClass(options.selected); return this; } }) })(jQuery);
用法
$("#table2").alterBgColor()
还可以链式操作
$("#table2").alterBgColor().find("th").css("color","red");
js有个同源协议，所以不能跨域，但是script标签中的src是可以跨域的，在src中访问其他域的方式就是jsonp
这里的同源指的是：同协议，同域名和同端口。
//注册iframe事件监听 if (typeof window.addEventListener != 'undefined') { // for ie9+、chrome window.addEventListener('message', dealMessage, false); } else if (typeof window.attachEvent != 'undefined') { // for ie8- window.attachEvent('onmessage', dealMessage); } //加载iframe $('#metis').attr('src',"http://10.6.134.240/metis-web/vds/caseMap.action?iframe=1"); // $('#metis').attr('src',$('#metisUrl').val()); /** * 处理子页面事件 */ function dealMessage(e){ var data = eval("("+e.data+")");; if(data.hasOwnProperty("method")){ try{ var callFunction = eval(data.method); if(typeof(callFunction) == "function"){ var parama = null; if(data.hasOwnProperty("argument")){ parama = data.argument; } if(parama){ callFunction(parama); }else{ callFunction(); } } }catch(e){} } } /** * 向iframe metis嵌套页面发送消息 */ function dispatchToMetis(methodName,params){ var msgObj = {"method":methodName}; if(params){ msgObj.argument = params; } var msgStr = JSON.stringify(msgObj); document.getElementById('metis').contentWindow.postMessage(msgStr,'*'); }
实现拖拽功能，比如把5个兄弟节点中的最后一个节点拖拽到节点1和节点2之间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1 {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;} </style> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } function drag2(ev){ ev.dataTransfer.setData("attrid",ev.target.id); } function allowDrop2(ev){ ev.preventDefault(); } function drop2(ev){ ev.preventDefault(); var data = ev.dataTransfer.getData("attrid"); document.getElementsByTagName("ul")[0].insertBefore(document.getElementById(data),document.getElementById("lis2")); } </script> </head> <body> <p>请把span拖放到矩形中：</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br /> <span id="drag1" draggable="true" ondragstart="drag(event)" >span</span> <ul> <li>1</li> <li ondrop="drop2(event)" ondragover="allowDrop2(event)" id = "lis2">2</li> <li>3</li> <li>4</li> <li draggable="true" ondragstart="drag2(event)" id = "lit">5</li> </ul> </body> </html>
动画：setTimeout何时执行，requestAnimationFrame的优点
手写parseInt的实现：要求简单一些，把字符串型的数字转化为真正的数字即可，但不能使用JS原生的字符串转数字的API，比如Number()