首页 > 代码库 > 前端小知识点积累

前端小知识点积累

作为一名前端,一直想说,一入前端深似海啊。也许在很多人眼中,前端就是简简单单的写页面的,但实际上前端的水还都是很深的,具体就不做叙述了。

今天来的主要目的是分享平时积累的一些前端小知识

一: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>

 

 

好了,鉴于时间问题,今天的分享暂时到这了,后续还会继续...,若有错误或者模糊不清的地方,敬请指出!

 

前端小知识点积累