面试

window.onload和$(docunment).ready区别

主要三个不同点。1，执行时间  2，编写个数  3，简写1,执行时间     window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。      $(document).ready()在DOM结构绘制完毕后就可以执行。2,编写个数    window.onload不能编写多个，存在多个只会执行一个。    $(document).ready()可以编写多个，都可以执行3,简写   window.onload没有简写   $(document).ready()  简写：$(function(){});----------------------------------window.onload = function() {    console.log('onload');};$(document).ready(function() {    console.log("ready");});

---

js兼容浏览器方法

click

阻止事件冒泡的兼容性写法stopPropagation: function(event){  if (event.stopPropagation){   event.stopPropagation();  } else {   event.cancelBubble = true;  } }创建XMLHttpRequest     if (window.XMLHttpRequest) {   req = new XMLHttpRequest(); } else if (window.ActiveXObject) {   req = new ActiveXObject("Microsoft.XMLHTTP"); } 事件绑定 function add(obj,event){    if (obj.addEventListener) {        obj.addEventListener(event,fn,fase);    }else{        obj.attachEvent("on"+event,fn);    }}addEventListener()兼容firefox、chrome、safari、opera、IE9+attachEvent()兼容IE7,8

jq绑定的几种方式 区别

 如果只是一个简单的事件绑定如 $('button').on('click',function(){}); 与bind()无二样    区别    如果是多个事件绑定到一个函数，或则多个事件绑定到多个函数，就需要用到on了：    多个事件一个函数：    $(document).ready(function(){      $("p").on("mouseover mouseout",function(){       alert("多个事件一个函数");      });    });    多个事件绑定不同的函数    $(document).ready(function(){      $("p").on({        mouseover:function(){$("body").css("background-color","lightgray");},          mouseout:function(){$("body").css("background-color","lightblue");},         click:function(){$("body").css("background-color","yellow");}        });    });    on的第二个参数可以阻止一些情况下的冒泡，    原理简单说就是用选择器来精确到匹配到你想执行函数的那个元素,而bind()就没有这个参数，    因此在使用bind()时很可能产生冒泡

有几种盒子模型

click

content-box和border-box的主要区别是二者的盒子的宽度是否包含元素的边框和内边距。box-sizing:border-box  

矩形点击右移动300px 停3s 返回

 $("#mydiv").click(function() {    $("#mydiv").animate({                left: 300            }, 3000);            setTimeout(function(){                $("#mydiv").animate({                    left: 0                }, 3000);            },6000)        })

jq声明标签

 $('<a/>', {    text: '这还是个链接',    href: 'http://www.baidu.com',    class: 'link',    id: 'baidu',    name: 'baidu'}).appendTo('body');

div水平垂直居中

 #mydiv {    position: fixed;    left: 50%;    top: 50%;    width: 300px;    height: 200px;    margin-left: -150px;    margin-top: -100px;    background: darkcyan;}

深拷贝与浅拷贝

1.浅拷贝    JavaScript存储"对象"都是存地址的，所以浅复制会导致 a 和 b 指向同一块内存地址    数组的赋值其实相当于给了索引，改变其中一个变量其他引用都会改变    var a = [1,2,3];      var b = a;      b[0] = 4;      //a为4 2 3      //b为4 2 3  

变量赋值和变量作为参数传递

    基本数据类型：包括str、num、boolean、null、undefined     引用类型 ：就是对象。包括object、Array、function、date    深拷贝：基本类型的复制，相当于建立一个副本。改变副本中的数据，对前者没有任何影响。    浅拷贝：引用数据类型的复制相当于创建一个影子副本，两者中任何一个有数据变化，另一个也会产生相应变化。    var a = 4;    var b = a;    b = 6;    console.log(a);//4    var a = 5;    function num(x) {        x = 6;        console.log(x);//6    }    num(a);    console.log(a);//5    将变量传入函数相当于复制一个变量，然后把这个复制的变量传入到函数中。    a是一个数字类变量，它的复制对象跟它之间没有任何联系。    在函数内部改变a的值并不会改变函数外a的值。 

div 加padding-top 保持高度不变

box-sizing:border-box;content-box 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。border-box  为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

七牛CDN如何使用网站回源

典型场景：比如我想把前端的js,css等资源放在七牛的cdn上，我需要七牛能自动缓存没有缓存过的资源，然后在设置的有效期后自动删除，完全无需我手动管理这些静态资源。所谓”网站回源“就是七牛如果碰到没有缓存过的资源，会先去原网站拿。比如用户访问www.abc.com/xyz.css，七牛的cdn上没有这个文件，那他会先去原网址拿再缓存起来。

数组去重，升序

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回 -1。var arr = ['1', '2', '3', '6', '3', '5'];var arr_1 = [];for(var i = 0; i < arr.length; i++) {    if(arr_1.indexOf(arr[i]) == -1) {        arr_1.push(arr[i])    }}arr_1.sort(function(a,b){return a - b})console.log(arr_1)

九九乘法表

<style type="text/css">            * {                margin: 0;                padding: 0;            }            .p_1 {                text-align: center;            }            .span_1 {                display: inline-block;                width: 100px;                height: 20px;                line-height: 20px;                border: 1px solid black;                border-bottom: none;            }            .span_2 {                border: 1px solid black;            }            .span_3 {                border-left: none;            }        </style>    </head>    <body>        <script type="text/javascript">            function step() {                for(i = 1; i <= 9; i++) {                    var p_1 = document.createElement("p");                    p_1.className = "p_1";                    for(j = 1; j <= i; j++) {                        var span_1 = document.createElement("span");                        span_1.classList.add("span_1");                        span_1.innerHTML = i + "x" + j + "=" + i * j;                        p_1.appendChild(span_1);                        if(i == 9) {                            span_1.classList.add("span_2");                        }                        if(j > 1) {                            span_1.classList.add("span_3");                        }                    }                    document.body.appendChild(p_1);                }            }        </script>        </head>        <body onload="step()">        </body>

input自定义数组，按中间高两边低排序

<p>请以，为间隔输入一个字符串</p><input type="text" name="enter" id="enter" value="" /><button id="btn" onclick="btn()">排序</button><p id="p_1"></p><script type="text/javascript">    function btn() {        var p_1 = document.getElementById("p_1");        var enter = document.getElementById("enter");        var arr = [];        var top = [];        var tail = [];        arr = enter.value.split(",");        //数组由小到大排序        arr.sort(function(a, b) {            return a - b;        });        for(var i = 0; i < arr.length; i += 2) {            top.push(arr[i]);            tail.unshift(arr[i + 1]);        }        //数组的个数为基数        if(arr.length % 2 != 0) {            tail.shift();        }        p_1.innerHTML = top.concat(tail);    }</script>

二叉树遍历