一、在学习JS的时候,很多人搞不清楚JSON和JS对象的关系,甚至连谁是谁都不清楚。其实,可以这么理解:
JSON是JS对象的字符串表示法,它使用文本表示一个JS对象的信息,本质是一个字符串。
var obj = {a: 'Hello', b: "World'}; //这是一个对象,注意键名也是可以使用引号 包裏的
var json= '{"a": "Hello", "b": "World"}'; //这是一个JSON 字符串,本质是一个字符串
JSON和JS对象的相互转换:
1.要实现从JSON字符串转换为JS对象,使用JSON.parse方法:
var obj = JSON.parse('{"a": "Hell0", "b": "World"}'); //结果是{a: 'He1lo', b: 'World'}
2.要实现从JS对象转换为JSON字符串,使用JSON.stringify()方法:
var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是'{"a": "Hello", "b": "World"}'
二、JS中的各种尺寸计算问题
clientWidth/clientHeight——视口大小:可见区域的宽度或高度,不包括border、水平滚动条、margin的元素的宽度或高度,只包括元素的内容区域和padding值。(如下图:)
offsetWidth/offsetHeight——视觉大小:看得见的大小,不包括margin的元素的宽度或高度,只包括padding、border、水平滚动条的宽度或高度。(如下图:)
offsetTop/offsetLeft——当前元素的偏移量:当父级有定位,根据父级的偏移量,父级没有定位则是根据页面的偏移量。表示相对父级顶部或者左边的距离。(如下图:)
scrollWidth/scrollHeight——当产生滚动条时,元素里边全文内容的宽度或高度,包含溢出的文本的尺寸,也就是包含可滚动的距离(scrollTop/scrollLeft)。 scrollTop/scrollLeft——滚动的距离到顶部或左边的位置。
当本元素的子元素比本元素高且overflow=scroll时,本元素会scroll,这时: scrollHeight: 因为子元素比父元素高,父元素不想被子元素撑的一样高就显示出了滚动条,在滚动的过程中本元素有部分被隐藏了,scrollHeight代表包括当前不可见部分的元素的高度。而可见部分的高度其实就是clientHeight,也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论scrollHeight才有意义,在没有滚动条时scrollHeight==clientHeight恒成立。
screenX/screenY——表示事件发生时,鼠标相对于当前显示器的X/Y坐标
clientX/clientY——表示事件发生时,鼠标相对于页面可视区域的X/Y坐标。
pageX/pageY——表示事件发生时,鼠标相对于页面的X/Y坐标,其中已经把滚动条滚过的高或宽计算在内。
offsetX/offsetY——表示事件发生时,鼠标相对于当前点击元素的X/Y坐标。有兼容,谷歌有,火狐没有。
pageX >= clientX, pageY >= clientY
pageX = clientX + ScrollLeft(滚动条滚过的水平距离)
pageY = clientY + ScrollTop(滚动条滚过的垂直距离)
当没有产生滚动条时, pageX = clientX。