美文网首页
js小知识4

js小知识4

作者: 晓箬 | 来源:发表于2017-10-22 14:28 被阅读0次

    一、BOM

    浏览器对象模型
    window.location     包含地址信息
            .pathname
            .host
            .port
    
        window.open();      打开新窗口
        window.close();     关闭窗口
    

    二、获取元素的各种信息

    获取元素盒子模型
        oEle.offsetWidth
        oEle.offsetHeight
    
    获取元素相对位置
        oEle.offsetLeft
        oEle.offsetTop
    
    获取元素绝对位置
        function getPos(obj){
            var l = 0,
                t = 0;
            while(obj){
                l+=obj.offsetLeft;
                t+=obj.offsetTop;
                obj = obj.offsetParent;
            }
            return {left: l, top: t};
        }
    
    获取可视区宽高
        document.documentElement.clientWidth
        document.documentElement.clientHeight
    
    获取滚动距离
        document.documentElement.scrollTop||document.body.scrollTop
        document.documentElement.scrollLeft||document.body.scrollLeft
    
    新事件
        window.onresize         可视区大小改变触发
        window.onscroll         滚动距离改变触发
    
    可视区宽高
        document.documentElement.clientWidth    可视区宽
        document.documentElement.clientHeight   可视区高
    
    滚动距离
        scrollTop   垂直方向
            document.documentElement.scrollTop||document.body.scrollTop
        scrollLeft  水平方向
            document.documentElement.scrollLeft||document.body.scrollLeft
    

    三、瀑布流

    oEle.getElementsByTagName
    oEle.getElementsByClassName
    oEle.children;
        注意:获取出来的都是伪数组,不能使用数组的方法
    
    获取高度
        获取盒子模型高度
        oEle.offsetHeight
        获取内容高度
        oEle.scrollHeight
            当内容小于高度,获取的是height+padding,如果内容超过高度,获取的是内容高度
    

    四、事件、事件对象

    事件
        onclick         点击事件
        onmouseover     鼠标移入
        onmouseout      鼠标移出
        onscroll        滚动距离改变
        onresize        改变可视区大小
        onload          加载完执行
        onmousemove     鼠标移动触发
        oncontextmenu   上下文菜单
    ---------------------------------------------------
        事件对象    包含了事件的详细信息
    
        ev(参数)      不兼容IE6、7、8
        event           不兼容Firefox
        var oEvent = ev||event;
    
        获取鼠标在可视区中的坐标
            oEvent.clientX
            oEvent.clientY
    ----------------------------------------------------
        键盘事件    
            onkeydown       键盘按下
            onkeyup         键盘抬起
    
        获取键码
            oEvent.keyCode
    
            a   65
            0   48
            1   49
            ←   37
            ↑   38
            →   39
            ↓   40
    
        浏览器默认行为
        需求:
            阻止浏览器默认行为
            事件中:
                return false;
    事件冒泡
            子级的事件,会触发父级相同的事件
        取消冒泡
            oEvent.cancelBubble = true;
    

    五、拖拽

    鼠标按下
        onmousedown
                        获取鼠标在元素中的位置
                        disX = clientX-offsetLeft
                        disY = clientY-offsetTop
        鼠标移动
        onmousemove
                        clientX-disX
                        clientY-disY
        鼠标抬起
        onmouseup
                        onmousemove = null;
                        onmouseup = null;
    
        会选中文字
            return false阻止默认行为
            ie低版本失效
            解决:
                设置捕获
                oEle.setCapture&&oEle.setCapture();
                释放捕获
                oEle.releaseCapture&&releaseCapture();
    

    相关文章

      网友评论

          本文标题:js小知识4

          本文链接:https://www.haomeiwen.com/subject/adiguxtx.html