• 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 : 左边框的宽度
  • 相关阅读:
    微信小程序音频播放
    jsonp跨域请求-最简单的方法
    mysql explain 正常,但是实际上是全盘扫描
    lnmp运行过程中出现502处理方法
    [Python]利用type()动态创建类
    Django-form表单
    Django-认证系统
    Django-model基础
    Django-MTV
    前端基础之:JQuery(可编辑版)
  • 原文地址:https://www.cnblogs.com/cqdd/p/10225206.html
Copyright © 2020-2023  润新知