javascript学习笔记-1

学习javascript其实有段时间了，不过一些常用的js方法总是容易混淆，现在开始尝试写在博客上，希望能够强化自己对javascript的认知和记忆。

---

1.获取浏览器可视区域的宽高

宽：document.documentElement.clientWidth;

高：document.documentElement.clientHeight;

注意点：documentElement并不是什么新鲜事物，它就是一份html文档中的html标签；clientWidth是指定对象的可视宽度；有些旧浏览器可能不支持documentElement对象，经过对象检测后，这时把documentElement改为body对象即可。

记忆方法：window对象指的是整个浏览器，window对象下面有很多对象，其中包括document对象，而document对象的代表区域是我们常看到的网页显示窗口，也就是html标签所管辖的区域（个人见解，如错误望指正，谢谢！），那么使用clientWidth就可以获取网页显示窗口的大小了。

2.获取横向/纵向滚动条的滚动距离

横向：document.documentElement.scrollLeft;

纵向：document.documentElement.scrollTop;

注意点：滚动距离指的是因为拖动滚动条而被卷去的部分

3.获取指定元素的相对文档的偏移距离（jquery）

顶部偏移量：$('nav').offset().top;

左侧偏移量：$('nav').offset().left;

4.获取指定元素的宽高（不含border，padding之类）

宽：$('nav').width();

高：$('nav').height();

5.获取指定元素的宽高（含border，padding之类）

宽：$('nav').outerWidth();

高：$('nav').outerHeight();

6.获取鼠标指针在页面上的位置（根据需要自行修改）

//获取鼠标相对页面位置
	function mousePosi(event){
		var x,y;
		if(event.pageX||event.pageY){
			x=pageX;
			y=pageY;
		}else{
			x=event.clientX+document.documentElement.scrollLeft+document.body.scrollLeft;
			y=event.clientY+document.documentElement.scrollTop+document.body.scrollTop
		}
		alert(x+"-"+y);
	}
	//进行事件绑定
	$(function(){
		window.addEventListener('click',mousePosi);
	})