2017-3-18 JS学习笔记

三大家族属性

• client/scroll/offset
• clientLeft 表示当前标签距离左侧的 border 值
  clientTop 表示当前标签距离顶部的 border 值
  clientW = width + padding
• offsetWidth = width + padding + border
  offsetHeight = height + padding + border
• scrollWidth 表示滚动内容的宽度
  scrollHeight 表示滚动内容的高度
  scrollTop 表示垂直滚动的距离
  scrollLeft 表示水平滚动的距离
• offsetLeft 表示距离它的 offsetParent 左侧的距离

获取浏览器窗口的宽度

• ie9 及以上

window.innerHeight;
window.innerWidth;

• 一般浏览器符合 w3c

document.documentElement.clientWidth;
document.documentElement.clientHeight;

• 其他浏览器

document.body.clientWidth;
document.body.clientHeight;

//兼容写法
var screenW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

封装

function client(){
        if(window.innerWidth){
                  return {
                            width:window.innerWidth,
                            height:window.innerHeight
                  }
        }
       else if(document.compatMode ='CSS1Compat'){
                return {
                          width:document.documentElement.clientWidth,
                          height:document.documentElement.clientHeight
                }
        }
        else{
                return {
                          width:document.body.clientWidth,
                          height:document.body.clientHeight
                }
        }
}
//调用函数
var screenW = client().width;

窗口改变事件

window.onresize = function(){
        alert(0);
}

窗口改变事件应用

//程序运行时就触发颜色改变
changeBg();
//对于事件源触发事件后面的事情指令如果封装成方法不加括号
var bgColor = '';
window.onresize = changeBg;
//封装一个函数用来改变颜色
function changeBg(){
        var screenW = client().width;
        if(screenW > 900){
                  bgColor = 'red';
        }else if(screenW > 600){
                  bgColor = 'green';
        }else if(screenW > 300){
                  bgColor = 'blue';
        }        document.body.style.background:bgColor;
}

事件冒泡

• 如果一个控件实现了某个功能，那么这个事件会依次把这个事件向上传递给他的父对象，如果父对象也实现对应的事件那么，父对象会自动触发对应的事件

   btn.onclick = function(){
            alert('我是按钮');
        }
        father.onclick = function(){
            alert('我是父亲');
        }
        document.onclick = function(){
            alert('我是最大事件源');
        }
//alert 会弹出来三次

阻止事件冒泡

• 应该子标签中阻止冒泡

//普通浏览器阻止冒泡方法
event.stopPropagation();
//ie 
event.cancelBubble = true;

冒泡事件的应用

• 获取点击区域的事件源的 id 的方法
  普通浏览器event.target
  ie 浏览器event.srcElement

    
    
    


登录

获取选中内容

• 获取选中内容的事件对象
  一般浏览器window.getSelection()
  ie 浏览器document.selection.createRange().text

匀速动画改造注意点

• 用 offsetLeft 来代替 begin

box.style.left = box.offsetLeft + speed +'px';

• 判断结束条件的补全

if(target - box.offsetLeft < speed){
        clearInterval(timer);
        box.style.left = target + 'px';
}
//当 target 小于 boxoffsetLeft 时
if(Math.abs(target2 - box.offsetLeft) < Math.abs(speed2){
        clearInterval(timer2);
        box.style.left = target2 + 'px';
}

• 其中数学公式Math.abs()是取绝对值

抽取匀速动画函数

function constant(obj,target,speed){
        clearInterval(timer);
        obj.timer = setInterval(function(){
                var mySpeed = target > obj.offsetLeft ? speed:-speed;
                obj.style.left = obj.offsetLeft + mySpeed +'px';
                if(Math.abs(target - obj.offsetLeft) < Math.abs(mySpeed)){
                clearInterval(timer);
                obj.style.left = target + 'px';
                }
        },20)
}

无限轮播图

克隆节点

• cloneNode():如果不传入参数，默认 false,那么只克隆节点本身，不会克隆子节点
  如果传入 true 那么子节点也会被克隆

var cloneBox = box.cloneNode(true);
//添加克隆节点
document.body.appendChild(cloneBox);