美文网首页
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

    时间在流逝,从不停歇;万物在更新,而我们在成长。岁月是那么的公平,从不多给人一秒,相反也不会少给任何人一秒,每个人...

  • js小知识4

    一、BOM 二、获取元素的各种信息 三、瀑布流 四、事件、事件对象 五、拖拽

  • js小知识点

    js小知识点 整理 js小知识点 (一):获取元素 1:document.getElementById('id名'...

  • 小知识点集汇一

    小知识点集汇一 小知识点 node接口模拟返回 js接口模拟数据 mockjs mocha js 测试框架--教程...

  • 'js'小知识

    朋友们好久不见,俗话说:“一日不见如隔三秋”,咱们已经有好几个秋天没有相见,今天给大家带来一些js小知识点,尽请采...

  • js小知识

    一、循环 循环也叫迭代;有四个部分组成:1:初始化;2:条件;3:语句;4:自增(改变条件); 二、操作属性 . ...

  • JS小知识

    输出语句####

  • js小知识

    1. call、apply和bind的区别 call、apply和bind方法都是函数对象中的方法,用来动态地改变...

  • Js 小知识

    从今天起我将通读Javascripts高级程序设计,并及时记录一些知识点与大家共享

  • 微信小程序(七)小程序内嵌和require和拿到app全局变量

    (一) 本节知识点 小程序内嵌JS 代码 小程序require (二) 小程序内嵌JS代码 必须用wxs标签和 m...

网友评论

      本文标题:js小知识4

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