• 周末学习记录(摘抄为主)


    美美的周末,在办公室自由自在的翻看博客,真是一种享受。看博客的时候别忘了做一点摘记,哪怕是直接转过来,也是好的。我就边看边摘点有用的东西过来,也注明了出处,感谢提供这些分享的博主们,祝你们周末愉快!

    文字超出隐藏并添加省略号效果

    <style>
            .css {
                overflow: hidden; /*自动隐藏文字*/
                text-overflow: ellipsis;/*文字隐藏后添加省略号*/
                white-space: nowrap;/*强制不换行*/
                width: 20em;/*不允许出现半汉字截断*/
                color:#6699ff;
                border:1px #ff8000 dashed;
            }
        </style>
    </head>
    <body>
    <div class="css">Web前端开发 - 专注于网站前端设计与Web用户体验</div>
    </body>

    jquery 取消绑定的hover事件

    $("a").unbind("hover");//这样不能解绑
    $("a").unbind('mouseenter mouseleave');//这样才行

    关于document以及元素的一些基础DOM知识:

    (1)element.clientHeight/element.clientWidth:内容+内边距

    (2)element.offsetHeight/element.offsetWidth:内容+内边距+边框

    (3)element.clientTop/element.clientLeft:左、上边框的宽度

    (4)element.offsetTop/element.offsetLeft:表示该元素的左上角(边框外边缘)与已定位的父容器(offsetParent对象)左上角的距离

    (5)element.offsetParent对象是指元素最近的定位(relative,absolute)祖先元素,递归上溯,如果没有祖先元素是定位的话,会返回null

    (6)document.body.clientHeight:body的内容加内边距。也就是在body内部的所有元素的高度,外加body自己本身的padding。不随浏览器窗口的大小调整而调整

    (7)document.body.clientWidth:浏览器窗口的宽度,随着浏览器窗口的大小调整而调整。也就是说,你在页面上随便放一个span,或者因为元素太宽导致产生一个左右滚动条,它的值都不变。这一点和clientHeight不一样。

    (8)document.body.scrollHeight:包括滚动条在内的页面高度,不随浏览器窗口的大小调整而调整。

    (9)document.body.scrollWidth:包括滚动条在内的宽度,和clientWidth不一样,如果有一个很宽的元素导致产生左右进度条的话,左右滚动条的宽度也包括在内。不随浏览器窗口的大小调整而调整。

    所以总结起来,如果你为网页添加一个遮罩层的话,scrollHeight和scrollWidth才是正确的选择。如果希望得到浏览器一个屏幕的宽度的话,clientWidth因为不计算左右滚动条可能比scrollHeight要好,但是也有缺陷,因为它是随着浏览器窗口的调整而调整的。

    监听键盘点击事件并读出所按下的字符:

    function keyDown(e){   
            e = e || window.event;
            var keycode = e.which || e.keyCode || e.charCode;
            var realkey = String.fromCharCode(e.which);
            alert("code: " + keycode + " char: " + realkey);
         }
         document.onkeydown = keyDown;
  • 相关阅读:
    博客园装修 js动态背景效果 一个随鼠标变换的动态线条
    转载:jQuery在线引用地址
    记录下es6的基础笔记
    js、css 、html平时的一些小笔记
    【机器学*】k*邻算法-01
    【Leetcode】718. 最长重复子数组
    【嵌入式】嵌入式系统开发与应用第二版课后答案第三章(田泽)
    【嵌入式】嵌入式系统开发与应用第二版课后答案第二章(田泽)
    【嵌入式】嵌入式系统开发与应用第二版课后答案第一章(田泽)
    【C++】关键字回忆leetcode题解
  • 原文地址:https://www.cnblogs.com/xuchaosheng/p/3019341.html
Copyright © 2020-2023  润新知