作为一名前端，一直想说，一入前端深似海啊。也许在很多人眼中，前端就是简简单单的写页面的，但实际上前端的水还都是很深的，具体就不做叙述了。
今天来的主要目的是分享平时积累的一些前端小知识
一：js，jq获取各种高度
Javascript:
alert(window.screenTop); //浏览器距离Top
alert(window.screenLeft); //浏览器距离Left
alert(window.screen.height); //屏幕分辨率的高
alert(window.screen.width); //屏幕分辨率的宽
alert(window.screen.availHeight); //屏幕可用工作区的高
alert(window.screen.availWidth); //屏幕可用工作区的宽
alert(document.body.scrollTop); //网页被卷去的Top(滚动条)
alert(document.body.scrollLeft); //网页被卷去的Left(滚动条)
alert(document.body.scrollWidth); //网页正文全文宽，包括有滚动条时的未见区域
alert(document.body.scrollHeight); //网页正文全文高，包括有滚动条时的未见区域
alert(document.body.clientWidth); //网页可见区域宽(body)
alert(document.body.clientHeight); //网页可见区域高(body)
alert(document.body.offsetWidth); //网页可见区域宽(body)，包括border、margin等
alert(document.body.offsetHeight); //网页可见区域宽(body)，包括border、margin等
Jquery
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height()); //浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true)); //浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width()); //浏览器当前窗口文档对象宽度
alert($(document.body).width()); //浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true)); //浏览器当前窗口文档body的总宽度 包括border padding margin
二：js事件
1 获取鼠标当前位置clientX\clientY
event.clientX 在可视区中,鼠标点击的x坐标
event.clientY 在可视区中,鼠标点击的y坐标
2 鼠标按下(onmousedown)和抬起(onmouseup)事件
例子:使用鼠标拖拽一个div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标拖拽</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script type="text/javascript">
var box=document.getElementById('box');
document.onmousedown=function(e){
// 解决火狐兼容性问题
var evs=e||window.event;
var divx=evs.clientX-box.offsetLeft;
var divy=evs.clientY-box.offsetTop;
document.onmousemove=function(b){
// var evs=b||window.event; // 解决火狐兼容性问题
var evb=b||window.event;
var divxb=evb.clientX-divx;
var divyb=evb.clientY-divy;
box.style.left=divxb+"px";
box.style.top=divyb+"px";
console.log(divxb)
}
document.onmouseup=function(a){
var eva=a||window.event; // 解决火狐兼容性问题
document.onmousemove="null";
}
}
</script>
</html>
3 鼠标双击事件:ondblclick
4 右击事件： oncontextmenu/ oncontextmenu
组织默认事件的2中方法：
1 return false 由于会阻止其他，所以一般放在最后执行
2 preventDefault 对IE6-IE8不兼容
六 键盘事件 keydown keyup
keydown携带的一个参数是:keyCode,这个参数里的是每个按键的编码,我们可以通 过编码来判断用户按的是哪个按键
例子:使用键盘的上下左右键控制div移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script type="text/javascript">
var box=document.getElementById('box');
var l=0;
var t=0;
var s=0;
document.onkeydown=function(a){
var ev=a||window.event;
if (ev.keyCode==37){
l-=10;
box.style.left=l+"px";
}
else if(ev.keyCode==39){
l+=10;
box.style.left=l+"px";
}
else if(ev.keyCode==38){
t-=10;
box.style.top=t+"px"; }
else if(ev.keyCode==40){
t+=10;
box.style.top=t+"px";
}
else if(ev.keyCode==13){
s+=10;
box.style.top=s+"px";
box.style.left=s+"px"; }
}
</script>
</html>
好了，鉴于时间问题，今天的分享暂时到这了，后续还会继续...，若有错误或者模糊不清的地方，敬请指出！
