面试题整理

1.javascript的window.onload事件与jQuery的$(document).ready方法有什么区别？

       咋一看这还不简单？onload肯定是等DOM结构加载完，媒体文件图片等加载完才开始执行function里面的操作,而ready仅仅是在DOM结构加载完以后就开始执行function里面的代码的。

2.原生javascript如何实现jQuery的ready方法？

话说这个问题还真被难住了，现记录下答案：

function ready(fn){  
    if(document.addEventListener){   //标准浏览器  
        document.addEventListener('DOMContentLoaded',function(){  
            //注销事件，避免反复触发  
            document.removeEventListener('DOMContentLoaded',arguments.callee,false); 
            //执行函数   
            fn();
        },false);  
    }else if(document.attachEvent){   //IE浏览器  
        document.attachEvent('onreadystatechange',function(){  
            if(document.readyState=='complete'){  
                document.detachEvent('onreadystatechange',arguments.callee);  
                //执行函数   
                fn();  
            }  
        });  
    }  
}

3.如何将一个不定宽高的div水平垂直都居中？

思路1：利用margin负间距居中（应该是当前比较流行的）

div.child{
  position:absolute;
  left:50%;
  top:50%;
}
然后利用js获取div宽高（w,h）;
$("div.child").css({
    "margin-left":-w/2,"margin-top":-h/2
});

思路2：利用margin:auto实现绝对定位元素的居中

//假设宽高为400px  200px，其他值也是可以的
.child{
    width: 400px;
    height: 200px;
    background: green;
    position:absolute;
     left:0;
     top: 0;
     bottom: 0;
     right: 0;
    margin: auto;
}

思路3：利用transform变形

.child{
  width: 400px;
  height: 200px;
  background: green;
  position:absolute;
  left:50%;
  top:50%;
  transform：translate(-50%,-50%);//相对自己的50%
}

思路4：利用表格思想给父元素设置display:table-cell;div作为表格内容

          .grandparent{
                display: table;
                width: 100%;
                height: 600px;
            }
            .parent{
                text-align: center;
                vertical-align: middle;
                display: table-cell;
            }
            div{
                width: 200px;
                height: 200px;
                background: green;
                display: inline-block;
              } 

思路5：父元素display:flex布局

       .parent{
             height:600px;
             display:flex;
             justify-content:center;//水平居中
             align-items:center;//垂直居中
        }
        .child{
            background: green;
            width: 200px;
            height: 200px;
        }

4.ajax跨域问题

4.1 何为跨域

跨域是指从一个域名的网页去请求另一个域名的资源。协议（http&https）、端口(80&81)、域名（baidu&google）、二级域名（news&sports）不相同，都为跨域。

4.2跨域请求数据的几种方式

1. iframe + window.name
2.iframe + window.postMessage
3.JSONP
4.CORS(header:(Access-Control-Allow-Origin : *)
5.Nginx反向代理

第一种方法：Nginx反向代理
第二种方法：CORS
第三种方法：第二种方法：[JSONP]方式可以携带cookie，但是只能是GET方法

5.如何判断数据类型为数组？

$.isArray([]); // true

[].constructor === Array; // true

[] instanceof Array; // true

typeof [] === 'object' && [].length === 0 // true

Array.isArray([]); // true

6.原生javascript实现ajax请求

  

    宝贝昵称：
    
    联系电话：
    
  
  

     照片描述：
    
   


/*序列化表单数据*/
    function serialize(form){        
        var parts = new Array();
        var field = null;
        for (var i=0, len=form.elements.length; i < len; i++){
            field = form.elements[i];
            parts.push(encodeURIComponent(field.name) + "=" + 
            encodeURIComponent(field.value));                
        }        
        return parts.join("&");
    }
    /*xhr对象向服务器传数据*/
   function submitData(){
            var xhr = new XMLHttpRequest();       
            xhr.onreadystatechange = function(){
                if (xhr.readyState == 4){
                    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                        alert(xhr.responseText);
                        var data = JSON.parse(xhr.responseText);
                        console.log(data);
                    } else {
                        alert("Request was unsuccessful: " + xhr.status);
                    }
                }
            };
            xhr.open("post", "db.jsp", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//使用XHR来模仿表单提交，加一个请求头部。
            var form = document.getElementById("info");            
            xhr.send(serialize(form));
        }