json对象和拖拽思路以及一些相关属性

1.json对象 
json作用 : 存储数据    跨平台的数据存储格式   轻量级存储数据 --- 存储数据量小
 
相对于普通的js对象来说,
区别1:属性名字需要用双引号包含,
区别2: 属性值如果是字符串那么也使用双引号。
 
json数据的存和取  
定义json : 
var json = { "键":"值","键":"值",.... } 
 
json值的获取 : 
    json对象.键 
    json对象["键"]
 
json的遍历 : json没有length属性,不能用for循环遍历   只能用for...in  遍历
 
json中的值可以是数组
    var json = {
       "url" : ["1.jpg","2.jpg"],
        "con" : ["图片一","图片二"]
    }
   用方法: for..in 中嵌套for
 
数组中存放json : 
   [{"uname":"uname","pwd":111},{"uname":22,"pwd":22},{"uname":33,"pwd":999}]
用方法:   for 循环中嵌套for .. in
 
 
2.拖拽
拖拽思路 : 
    涉及的事件 --- onmousedown   onmousemove   onmouseup
①要想实现拖拽效果,首先要有鼠标按下事件  
记录鼠标按下时的内部偏移量
var disx = e.offsetX  ||  e.layerX
var disy = e.offsetY  ||  e.layerY
②鼠标移动  
设置被拖拽物体的left和top值
left = e.pageX - disx
top = e.pageY - disy
③鼠标抬起 
取消鼠标移动事件
document.onmousemove = null  /  ""
 
 
获取窗口的宽度和高度:  window.innerWidth / window.innerHeight  
 
 
3.scorll   属性
scrollTop : 获取页面垂直方向滚走的距离
scrollLeft :  获取页面水平方向滚走的距离
一般scrollTop 与 滚动条事件连用
window.onscroll = function(){
    获取页面滚走的距离:
    document.body.scrollTop || document.documentElement.scrollTop
}
 
 
4.盒子模型            
  offsetWidth : clientWidth + 左右border
  offsetHeight : clientHeight + 上下border
  offsetTop : 元素的外边框距离offsetParent的内边框的垂直偏移量
  offsetLeft : 元素的外边框距离offsetParent的内边框的水平偏移量
  offsetParent : dom元素的offsetParent的值是谁,取决于它的祖先元素是否有定位属性(absolute,relative,fixed)。
        如果有这个定位属性那么直接offsetParent就获取这个。否则没有定位属性,那么继续上上一级祖先元素去查找。
   如果查找到body的所有祖先元素都没有定位属性。直接把body获取到。
 
 
扩展 
clientWidth : 内容+左右padding
clientHeight : 内容+上下padding
 clientTop : 上边框的宽度
 clientLeft : 左边框的宽度
原文地址:https://www.cnblogs.com/cqdd/p/10225206.html