我的美团面试
2015-09-24 22:37
726 查看
1 在<ul id="test"></ul>中添加<li>1</li><li>2</li><li>3</li>
$(document).ready(function(){
var ul = document.getElementById("test");
var li;
var textNode;
for(var i=0;i<30;i++){
li= document.createElement("li");
textNode=document.createTextNode(i+1);
li.appendChild(textNode);
ul.appendChild(li);
}
});
<ul id="test">
</ul>
2 在第一题的基础上实现点击哪个li，弹出对应信息
$(document).ready(function(){
var EventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){
console.log("非IE浏览器，如火狐类的！");
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
console.log("IE");
element.attachEvent("on"+type,handler);
handler.call(element);
}else{
console.log("其他");
element["on"+type]=handler;
}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
elemetn["on"+type]=null;
}
},
getEvent:function(event){
return event?event:window.event;
},
getTarget:function(event){
return event.target||event.srcElement; //event.srcElement为IE中的对象
}
};
var ulListner=document.getElementById("test");
EventUtil.addHandler(ulListner, "click", function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
if(target.tagName.toLowerCase()==='li'){
var _v=target.textContent||target.innerText;
console.log(_v);
alert(_v);
}
});
});
<ul id="test">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
3 写一下原生ajax过程
<script type="text/javascript">
//参考网址 http://abstractforever.iteye.com/blog/524148
function getVerify(){//校验
var xhr=createXHR();
var userName = document.getElementById("userName").value;//获取用户名字
console.log(userName);
//xhr.onreadystatechange=callback;//注册回调函数
xhr.onreadystatechange=function(){
if(xhr.readyState==4){//完成，已经接受到全部响应数据，而且已经在客户端使用
if(xhr.status==200){
var responseText=xhr.responseText;
var divNode=document.getElementById("result");
divNode.innerHTML=responseText;
}
}
};
xhr.open("GET", "servlet/UserServlet?username="+userName, true);//true表示异步
//同步方式下，send这句话会在服务器段数据回来后才执行完
//异步方式下，send这句话会立即完成执行
xhr.send(null);
}
function postVerify(){//校验
var xhr=createXHR();
var userName = document.getElementById("userName").value;//获取用户名字
console.log(userName);
//xhr.onreadystatechange=callback;//注册回调函数
xhr.onreadystatechange=function(){
if(xhr.readyState==4){//完成，已经接受到全部响应数据，而且已经在客户端使用
if(xhr.status==200){
var responseText=xhr.responseText;
var divNode=document.getElementById("result");
divNode.innerHTML=responseText;
}
}
};
xhr.open("POST", "servlet/UserServlet", true);//true表示异步
//POST方式需要自己设置http的请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POST方式发送数据
xhr.send("username=" + userName);
}
function createXHR(){
var xmlHttpRequest=null;
if(window.XMLHttpRequest){//针对FireFox，Mozillar，Opera，Safari，IE7，IE8
console.log("XMLHttpRequest对象");
xmlHttpRequest=new XMLHttpRequest();
}else if(window.ActiveXObject){ // //针对IE6，IE5.5，IE5
console.log("ActiveXObject对象");
//两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中
//排在前面的版本较新
var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
for ( var i = 0; i < activexName.length; i++) {
try {
//取出一个控件名进行创建，如果创建成功就终止循环
//如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建
xmlHttpRequest = new ActiveXObject(activexName[i]);
break;
} catch (e) {
}
}
}else{
alert("创建对象失败！");
}
return xmlHttpRequest;
}
</script>
</head>
<body>
<input type="text" name="userName" id="userName"/>
<input type="button" onclick="getVerify()" value="get验证"/>
<input type="button" onclick="postVerify()" value="post验证"/>
<br/>
结果为(get的结果可能为乱码，Post传递参数没有乱码)：
<div id="result">
</div>
</body>
后台界面为：
response.setContentType("text/html");
String username = request.getParameter("username");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
// 将数据返回给页面
out.print("" + username + "----可以使用");
4 说一下状态码
5 输出：
var Obj={
v1:"ttt",
te:function(){
console.log(this.v1);
console.log(this);
}
}
Obj.te();//
结果为：
ttt
Object { v1="ttt", te=function()}
6 说一下三次握手的过程
7 说一下你知道的排序算法，并就一种，写代码
8 二维数组：
$(document).ready(function(){
var ul = document.getElementById("test");
var li;
var textNode;
for(var i=0;i<30;i++){
li= document.createElement("li");
textNode=document.createTextNode(i+1);
li.appendChild(textNode);
ul.appendChild(li);
}
});
<ul id="test">
</ul>
2 在第一题的基础上实现点击哪个li，弹出对应信息
$(document).ready(function(){
var EventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){
console.log("非IE浏览器，如火狐类的！");
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
console.log("IE");
element.attachEvent("on"+type,handler);
handler.call(element);
}else{
console.log("其他");
element["on"+type]=handler;
}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
elemetn["on"+type]=null;
}
},
getEvent:function(event){
return event?event:window.event;
},
getTarget:function(event){
return event.target||event.srcElement; //event.srcElement为IE中的对象
}
};
var ulListner=document.getElementById("test");
EventUtil.addHandler(ulListner, "click", function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
if(target.tagName.toLowerCase()==='li'){
var _v=target.textContent||target.innerText;
console.log(_v);
alert(_v);
}
});
});
<ul id="test">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
3 写一下原生ajax过程
<script type="text/javascript">
//参考网址 http://abstractforever.iteye.com/blog/524148
function getVerify(){//校验
var xhr=createXHR();
var userName = document.getElementById("userName").value;//获取用户名字
console.log(userName);
//xhr.onreadystatechange=callback;//注册回调函数
xhr.onreadystatechange=function(){
if(xhr.readyState==4){//完成，已经接受到全部响应数据，而且已经在客户端使用
if(xhr.status==200){
var responseText=xhr.responseText;
var divNode=document.getElementById("result");
divNode.innerHTML=responseText;
}
}
};
xhr.open("GET", "servlet/UserServlet?username="+userName, true);//true表示异步
//同步方式下，send这句话会在服务器段数据回来后才执行完
//异步方式下，send这句话会立即完成执行
xhr.send(null);
}
function postVerify(){//校验
var xhr=createXHR();
var userName = document.getElementById("userName").value;//获取用户名字
console.log(userName);
//xhr.onreadystatechange=callback;//注册回调函数
xhr.onreadystatechange=function(){
if(xhr.readyState==4){//完成，已经接受到全部响应数据，而且已经在客户端使用
if(xhr.status==200){
var responseText=xhr.responseText;
var divNode=document.getElementById("result");
divNode.innerHTML=responseText;
}
}
};
xhr.open("POST", "servlet/UserServlet", true);//true表示异步
//POST方式需要自己设置http的请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POST方式发送数据
xhr.send("username=" + userName);
}
function createXHR(){
var xmlHttpRequest=null;
if(window.XMLHttpRequest){//针对FireFox，Mozillar，Opera，Safari，IE7，IE8
console.log("XMLHttpRequest对象");
xmlHttpRequest=new XMLHttpRequest();
}else if(window.ActiveXObject){ // //针对IE6，IE5.5，IE5
console.log("ActiveXObject对象");
//两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中
//排在前面的版本较新
var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
for ( var i = 0; i < activexName.length; i++) {
try {
//取出一个控件名进行创建，如果创建成功就终止循环
//如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建
xmlHttpRequest = new ActiveXObject(activexName[i]);
break;
} catch (e) {
}
}
}else{
alert("创建对象失败！");
}
return xmlHttpRequest;
}
</script>
</head>
<body>
<input type="text" name="userName" id="userName"/>
<input type="button" onclick="getVerify()" value="get验证"/>
<input type="button" onclick="postVerify()" value="post验证"/>
<br/>
结果为(get的结果可能为乱码，Post传递参数没有乱码)：
<div id="result">
</div>
</body>
后台界面为：
response.setContentType("text/html");
String username = request.getParameter("username");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
// 将数据返回给页面
out.print("" + username + "----可以使用");
4 说一下状态码
5 输出：
var Obj={
v1:"ttt",
te:function(){
console.log(this.v1);
console.log(this);
}
}
Obj.te();//
结果为：
ttt
Object { v1="ttt", te=function()}
6 说一下三次握手的过程
7 说一下你知道的排序算法，并就一种，写代码
8 二维数组：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- java面试题十三 string创建了几个对象
- 一道面试题
- android面试题汇总
- PHP面试
- 面试题目<转载>
- PHP面试出场率较高的题目<转载>
- 百度面试杂感
- 找工作之路之华为面试经历
- 面试题
- Intel 的面试经历中国研究院
- 剑指Offer第七章面试题（Java版）
- IBM软件集团大中华区总架构师寇卫东：话说程序员的职业生涯-IT程序人生-职业生涯规划
- 【程序员养生】:养护肾脏
- Java基础知识强化67：基本类型包装类之Integer直接赋值的面试题
- 白话经典算法系列之十二 数组中只出现1次的两个数字(百度面试题)
- 白话经典算法系列之十一 一道有趣的GOOGLE面试题 --【解法2】
- 白话经典算法系列之十 一道有趣的GOOGLE面试题
- 2016 百度研发岗面试总结
- 确定两串乱序同构（程序员面试金典）
- 《程序员面试金典》--判断链表是否为回文链表