前端开发js知识及一些常见易混淆的知识点

美团前端开发面试题|前端开发需要英语数学吗|现在最流行的前端开发软件
1.offsetleft = 整数(可以是正,也可以是负数)。如果是浮点数,则始终向下取整
=90px,因为像素里没有小数,自动抛弃整数,表现为向下取整
元素大小:
offsetHeight/offsetWidth: width+border+padding+margin
clientHeight/clientWidth: width+border+padding
dom.style.width : width
offsetTop/offsetLeft:元素距离其包含元素的距离,递归可获得距离body的距离
offsetParent:获得包含的父元素
2.区别
假设:
body{
height:2000px
}
function getInfo()
{
var s = “”;
s += ” 网页可见区域高:”+ document.body.clientHeight;——可见高度是2000px,表示全部可见高度!!!!!
s += ” 网页可见区域宽:”+ document.body.offsetWidth + ” (包括边线和滚动条的宽)”;
s += ” 网页正文全文宽:”+ document.body.scrollWidth;
s += ” 网页正文全文高:”+ document.body.scrollHeight;
s += ” 网页被卷去的高(ff):”+ document.body.scrollTop;
s += ” 网页被卷去的高(ie):”+ document.documentElement.scrollTop;
s += ” 网页被卷去的左:”+ document.body.scrollLeft;
s += ” 网页正文部分上:”+ window.screenTop;
s += ” 网页正文部分左:”+ window.screenLeft;
s += ” 屏幕分辨率的高:”+ window.screen.height;
s += ” 屏幕分辨率的宽:”+ window.screen.width;
s += ” 屏幕可用工作区高度:”+ window.screen.availHeight;
s += ” 屏幕可用工作区宽度:”+ window.screen.availWidth;
s += ” 你的屏幕设置是 “+ window.screen.colorDepth +” 位彩色”;
s += ” 你的屏幕设置 “+ window.screen.deviceXDPI +” 像素/英寸”;
//alert (s);
}
各种宽度:
1.在css中,网页的盒模型,width:是不包括padding border margin 的
js 中,offsetwidth:width+padding+border;
clientWidth:width + padding(会随着浏览器大小而变化)
所以在js中慎用offsetwidth,因为布局一旦变化,函数就会起变化,而obj.style.width 是单独指css中的宽度;
实例:在运动框架中,border引起div宽度变化非常麻烦
3.js事件
区分鼠标事件:onmouseover(鼠标移入事件) 和 onmouseout (鼠标移出事件)
onmousemove(鼠标在内部移动事件)
常用事件:滚动事件——onscroll,反复触发要避免大量代码。读写均是document.body.scrollTop
失焦事件——onblur(不冒泡)
获得焦点——onfocus
事件属性:event
点击位置:
可视区区位置event.clientX/event.clientY
页面位置event.pageX/event.pageY(ie8不支持)
二者区别是页面位置是可视区+滚动条
4.for in 的用法
分两种情况:第一当循环对象时候,便利的是属性名称。注意for in,连原型对象的属性也会弹出来,所以最好检测一下 hasOwnProperty()。此方法返回false,表示属性是继承而来
ver person = {name:milk,age:17}
for(i in person){
if( !hasOwnProperty(i)){
alert(i)
}
}
此时弹出:
name,age
第二,当循环对象是数组时候 array = [1,2,3];
for(i in array){
alert( i )
}
i为 0 1 2 ,表示数组下标。
前端开发者需要的10个sublime插件|软件测试与前端开发|前端实时可视化开发工具
» 本文来自:前端开发者 » 《前端开发js知识及一些常见易混淆的知识点》
» 本文链接地址:https://www.rokub.com/5073.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!