1.获取一堆name名相同的div,点击弹出显示第几个div
(本题主要考察闭包的用法,是在面试中常被问的题目,不难但是比较容易上当的题目)
var boxes = document.getElementsByTagName("div");
for(var i = 0; i < boxes.length; i++) {
boxes[i].index = i+1;
boxes[i].onclick = function() {
alert(this.index);
}
}
答案二
var boxes = document.getElementsByTagName("div");
for(var i = 0; i < boxes.length; i++) {
(function(i){
boxes[i].onclick = function() {
alert(i+1);
}
})(i);
}
2.abcdefgsdds 获取里面字面最多的字母(答案有很多)
var str = “abcdefgsdds”;
var obj = {};
var arr = [];
var letter;
for(var i = 0,len = str.length;i
letter = str[i];
if(!obj[letter]){
obj[letter] = 1;
}else{
obj[letter]++;
}
}
var max_key,max_num=0;
for(key in obj){
if(max_num
max_num = obj[key];
max_key = key;
}
}
document.write(“字母:”+max_key+” 次数:”+max_num);
答:”abcdefghi".substring(6)
答:”asdjhklzxc".substring(3,-1)
5.翻转字符串
答:”asd".split("").reverse().join("")
答:arr.shift()
var arr = [1,2,1,3,2,3,5,6,5] ;
var newArr = [];
for(var i = 0; i < arr.length; i++) {
if(newArr.indexOf(arr[i]) == -1) {
newArr.push(arr[i]);
}
}
alert(newArr)
答:Number,String,Boolean,Object,Null,Undefined
8.说一下拖拽的原理?怎么样实现多个DIV在拖拽时有相撞让它们改变属性与属性值和他们的位置?(部分程度不太好的看到拖拽会懵,项目期有这个情况)
mousedown,mousermove,mouseup事件
e.clientX,e.clientY 鼠标位置
碰撞检测
9.用JS创建一个a标签,在body中显示,点击在新窗口打开
var alink = document.createElement("a");
alink.innerHTML = "google";
alink.href = "http://www.google.com";
alink.target = "_blank";
document.body.appendChild(alink);
10.鼠标滚轮动画
function mousewheel(element,up,down) {
element.onmousewheel = fn;
if(window.addEventListener) {
element.addEventListener("DOMMouseScroll",fn,false)
}
function fn(e) {
var e = e || window.event;
console.log(e);
if(e.wheelDelta > 0 || e.detail < 0) {
up();
}else {
down();
}
e.cancelBubble = true;
e.stopPropagation();
}
}
mousewheel(document,function(){},function(){})//函数调用
12.定位右下角广告
答:使用css position:fixed
答:A绝对定位,脱离文档流即可
14.JS中避免命名冲突的三个方法(有些同学或许会想不到这些概念)
答:命名空间,闭包,匿名函数
答:a外部引入b内部嵌套c行内代码例:按钮 对比css引入
答:1.区分大小写;
2.第一个字符必须是一个字母、下划线(_)或一个美元符号($)
3..不能含有空格
4.不能以关键字或保留字命名,不能以数字开头
答:参考http://www.haorooms.com/post/web_xnyh_jscss
答:!&& *> =
19.在循环中,break和continue语句的功能有何不同
答:break 终止整个循环,continue终止当次循环
答:事件流解释即可
21.说说什么叫做事件委托
答:利用事件冒泡的原理,子元素的事件会冒泡到父元素,可以只给父元素添加事件,通过事件目标判断元素。优点:节省内存,动态添加的子元素也包含事件
22.列举不少于6条的IE与FF脚本兼容性问题,需要写出命令(也许同学们缺乏总结,看着简单,实际很难答全)
(1) window.event:
表示当前的事件对象,IE有这个对象,FF没有,FF通过给事件处理函数传递事件对象
(2) 获取事件源
IE用srcElement获取事件源,而FF用target获取事件源
(3) 添加,去除事件
IE:element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function)
FF:element.addEventListener(“click”, function, true) element.removeEventListener(“click”, function, true)
(4) 获取标签的自定义属性
IE:div1.value或div1[“value”]
FF:可用div1.getAttribute(“value”)
(5) document.getElementByName()和document.all[name]
IE;document.getElementByName()和document.all[name]均不能获取div元素
FF:可以
(6) input.type的属性
IE:input.type只读
FF:input.type可读写
(7) innerText textContent outerHTML
IE:支持innerText, outerHTML
FF:支持textContent
(8) 是否可用id代替HTML元素
IE:可以用id来代替HTML元素
FF:不可以
23.构造函数有何优缺点?
答:构造函数可以创建多个对象,
缺点:容易跟普通函数一样调用
答:函数内部又定义了一个函数,内部函数引用外部函数的变量,就构成了闭包
同步:按顺序执行,同一时刻只能执行一个事件
异步:不按顺序执行,同一时刻可以执行多个任务
26.写倒计时距离2018年还有多少天多少小时多少分钟多少秒
var time = document.getElementById("time");
function clock() {
//设置目标日期
var targetDate = new Date(2018,0,1);
var currentDate = new Date();
var remainTime = targetDate - currentDate;
//天数
remainDay = parseInt(remainTime/1000/60/60/24);
//小时数
remainHours = parseInt(remainTime/1000/60/60%24);
//分钟
remainMinutes = parseInt(remainTime/1000/60%60);
//秒
remainSeconds = parseInt(remainTime/1000%60);
time.innerHTML = remainDay + "天"+remainHours+"小时"+remainMinutes+"分钟"+remainSeconds+"秒";
}
setInterval(clock,1000);
27.alert怎样换行
答:转义字符,换行符\n
alert("大家好\n大家好")
答:固定高度,overflow-y:scroll
29.向上滚动动画如何实现
document.body.scrollTop = "xxx";
document.documentElement.scrollTop = "xxx";
30.form表单提交
答:默认提交,form.onsubmit = function(){}可在表单数据提交之前验证
答:javascript是具体实现,ECMAScript是标准,大纲
32.==与===的区别?
==等于,判断值是否相等,会有类型转换
===全等,判断类型跟值是否相等,类型不会转换
33.什么是DOM?
答:文档对象模型
答:Undefined无定义,null空
35.有两个对象,var o = {num:1};var p = {num:2};要求书写一段代码,使得o+p===3为true。
Object.prototype.toString = function(){
return this.num;
}
this的指向:普通函数内的this指向全局变量
构造函数内部this指向新创建出来的对象
对象方法内的this指向的是调用该方法的对象
call,apply,bind可以改变this的指向
38.构造函数
答:new关键字后紧接的函数即为构造函数,约定首字母大写
39.原型,原型链的理解
答:ECMA5之前没有类的概念,js的继承是基于原型链的
html 语义化,符合标准,减少嵌套层数,加快浏览器DOM解析速度
css 合并,压缩少写冗余css代码,使用精灵图...
js 减少DOM操作,使用变量缓存数据,少用全局变量,做动画的元素都绝对定位...