js学习笔记----进阶Day03三大家族和内容分享

三大家族对比 易混淆

1. offset

• offsetLeft = 最近的有定位的祖先元素的左边距离 如果祖先元素都没有定位就以body为参考点
• offsetTop = 最近的有定位的祖先元素的上边距离 如果祖先元素都没有定位就以body为参考点

2. client

• clientLeft = 获取盒子的左边框的宽度
• clientTop = 获取盒子的上边框的宽度

3. scroll

• scrollLeft = 内容被卷去的左边距离
• scrollTop = 内容被卷去的上边距离

三大家族属性及用途一览表.png

• clientHeight offsetHeight ScrollHeight对比

  
  clientHeight offsetHeight ScrollHeight对比.png

• 综合比较. 较为复杂(假设祖先定位元素为body)

  
  三大家族综合比较.jpg

onresize

• 当屏幕尺寸发生变化时调用

• 用于做自适应

 var obody = document.body;

    // 只要窗口尺寸发生改变就会调用
    window.onresize = fn;

    fn();

    function fn() {
        // 应用：当屏幕的宽度>=960时，页面的背景颜色为红色；当屏幕的宽度小于960  >=640时，页面的背景颜色为蓝色；当屏幕的宽度<640时，页面的背景颜色为绿色
        if (client().width >= 960) {
            obody.style.backgroundColor = 'red';
        } else if (client().width >= 640) {
            obody.style.backgroundColor = 'blue';
        } else {
            obody.style.backgroundColor = 'green';
        }
    }

    /**
     * 获取浏览器可视区域的高度/宽度
     *
     * @returns {*}
     */
    function client() {
        if(window.innerWidth || window.innerHeight){
            return{
                width:window.innerWidth,
                height:window.innerHeight
            }
        }else if(document.compatMode == 'CSS1Compat'){
            // 是w3c标准
            return{
                width:document.documentElement.clientWidth,
                height:document.documentElement.clientHeight
            }
        }else {
            return{
                width:document.body.clientWidth,
                height:document.body.clientHeight
            }
        }
    }

函数节流

• 作用 : 提升性能.

• 用于频繁调用的函数, 降低其执行的频率

• eg. 低级函数节流 : 用一次定时器

var timer = null;
window.onresize = function () {
    clearTimeout(timer);
    timer = setTimeout(function () {
        waterFull();
        console.log(2);
    },200);
    console.log(1);
}

微博分享

• 获取选中文字

var selectedText;
if(window.getSelection){
    // 标准模式 获取选中的文字
    selectedText = window.getSelection().toString();
}else{
    // IE 系列
    selectedText = document.selection.createRange().text;

• 微博分享的链接

http://v.t.sina.com.cn/share/share.php?searchPic=false&title=' + selectedText + '&url=[http://www.jianshu.com/u/ce8eba0dbfb6'](http://www.jianshu.com/u/ce8eba0dbfb6') 

• 打开新窗口- 动态跳转

//window.location.href = url;
/*
  * 第一个参数是url
  * 第二个参数是窗口的名称 要不要打开新的窗口
  * 第三个参数是窗口的描述 窗口的位置,尺寸等
  * */
  window.open('http://www.jianshu.com/u/ce8eba0dbfb6','newWindow','left=500,top=200,width=800,height=500');

• 一定要清除上次选中

// 清空上一次选中
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
selectedText = '';

webstorm活动模板

webstorm活动模板设置方法截图.png