学习Javascript总结--易混淆的概念

1、jQ中的offset()和position()
offset() 方法返回或设置匹配元素相对于文档（document）的偏移（位置）。该方法返回的对象包含两个整型属性：top 和 left，以像素计。得到的数值与自身的定位方式无关，与父元素的定位方式也无关。

position() 方法返回匹配元素相对于父元素的位置（偏移）。该方法返回的对象包含两个整型属性：top 和 left，以像素计。用于返回当前匹配元素相对于最近一个被定位的祖辈元素的偏移，
——使用position()方法时如果其所有的父元素都为默认定位（static）方式，则其处理方式和offset()一样，是当前窗口的相对偏移。
——一般情况下，如果要显示的元素B存放在元素A的同一父元素下（即B为A的兄弟节点），这个时候使用position() 是最合适的；如果显示的元素B存放在DOM的最顶端或者最底端（即其父元素就是body）。这个时候用offset()是最好的。

2、pageX、clientX、offsetX、layerX和screenX
clientX：鼠标在页面显示区域的坐标。
pageX：FF特有，是鼠标指针的位置，相对于文档的左边缘，不随滑动条移动而变化。在ie中必须使用clientX+scrollLeft=pageX；
offsetX:IE特有，鼠标相对于事件源元素（srcElement）（即当前坐标系）的X,Y坐标，不包含border的值；
layerX：FF特有，鼠标相对于事件源元素（srcElement）（即当前坐标系）的X,Y坐标，包含border的值；
【**补充说明：**offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值
layerX:FF特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点
也就是当触发元素设置了相对或者绝对定位后,layerX和offsetX就幸福地生活在一起^-^,几乎相等,唯一不同就是一个从border为参考点,一个以内容为参考点】
screenX：鼠标相对于用户显示器屏幕左上角的X,Y坐标

附上超详细的说明，自己动手试一下什么都懂了：http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html

3、 offsetWidth和style.width
·offsetWidth可以获取写在样式文件中的宽，而style.width只能获取行间样式；
·offsetWidth得到的都是数值，style.width得到的是字符串，单位是‘px’；
·offsetWidth只读，style.width可读可写。
·如果没有设置样式，offsetWidth会根据元素的实际情况得到答案，而style.width得到undefined
·jQ中，$(obj).width()得到的是数值，$(obj).css(‘width’)得到的是字符串。
·并且并且，offsetWidth的值包含了border和padding的值，这是它的bug，如果要准确的获取元素的属性值，请使用window.getComputedStyle(obj, null).width; 或者obj.currentStyle.width

4、mouseenter()和mouseover()
mouseenter():只有在鼠标指针穿过被选元素时才会触发；
mouseover()：如果鼠标指针穿过任何子元素都会触发；
可以理解为不冒泡和冒泡的关系；
同理可证：mouseleave()和mouseout()
具体例子可以查看w3c的例子：
http://www.w3school.com.cn/jquery/event_mouseenter.asp