js小知识4

一、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();
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 时间在流逝,从不停歇;万物在更新,而我们在成长。岁月是那么的公平,从不多给人一秒,相反也不会少给任何人一秒,每个人...
    形象代言人阅读 1,346评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,704评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,772评论 25 709
  • 佛是什么? 请你拿出一张纸 一笔一笔的写出佛字, 你就会明白个中之意! 亻:代表人生、 弓:曲折的路、 丿:始于此...
    白语金言阅读 1,720评论 1 3
  • 最近,收到一位新朋友林瑶的投稿,她的文字,触动了我久远的记忆。 林瑶是一个爱生活,爱安静,爱文字,爱阅读的女孩,平...
    袁春楠阅读 2,875评论 0 1

友情链接更多精彩内容