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));
}