2017-3-18 JS学习笔记

作者: GodlinE | 来源:发表于2017-03-20 10:06 被阅读0次

三大家族属性

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>冒泡事件的应用</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            border:none;
        }
        html,body{
            width:100%;
            height: 3000px;
        }
        #panel{
            width:100%;
            height:100%;
            position: absolute;
            left:0;
            top:0;
            background: #000;
            opacity: 0.4;
            /*用来兼容ie浏览器*/
            filter: alpha(opacity:40);
            display: none;
        }
        
        #login{
            width:200px;
            height: 200px;
            position: absolute;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
            background: skyblue;
            display: none;
        }
    </style>
</head>
<body>
<button id="btn">登录</button>
<div id="panel"></div>
<div id="login"></div>
<script>
    window.onload = function(){
        /*0.抽取获取标签的函数*/
        function $(tagId){
            return typeof tagId ==='string'?document.getElementById(tagId):tagId;

        }
        /*1.获取标签*/
        var btn = $('btn');
        var panel = $('panel');
        var login  = $('login');
        /*2.点击按钮让对应的div显示*/
        btn.onclick = function(event){

            /*2.0为了达到我们想要的效果，我们需要阻止事件冒泡*/
            var event = event ||window.event;
            if(event &&event.stopPropagation){

                event.stopPropagation();
            }else {
                event.cancelBubble = true;
            }
            panel.style.display = 'block';
            login.style.display = 'block';

            /*2.1让对应的滚动条隐藏*/
            document.body.style.overflow = 'hidden';

        }
        /*3.点击最大事件源让对应的div隐藏*/
        document.onclick = function(event){

            /*当点击最大事件源的时候，让出来登录div其余的区域才会隐藏，我们需要判断点击的区域
            * 通过拿到事件的事件源的id来判断*/

            /*3.1获取事件对象*/
            var event = event ||window.event;
            /*3.2获取点击区域的事件源的id*/
            /*普通浏览器*/
//            event.target
//            ie
//            event.srcElement
            var targetId = event.target?event.target.id:event.srcElement.id;

            /*3.3判断对应的id*/
            if(targetId !='login'){
                panel.style.display = 'none';
                login.style.display = 'none';

                /*3.4让滚动条出现*/
                document.body.style.overflow  ='auto';
            }
        }
    }
</script>
</body>
</html>

获取选中内容

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

<script>
    window.onload = function(){
        /*1.获取标签*/
        var word1 = document.getElementById('word1');
        var word2 = document.getElementById('word2');
        var share_text = document.getElementById('share_text');
        var share_weibo = document.getElementById('share_weibo');
        /*2.当选中内容后，在鼠标抬起后出发对应的事件*/
        word1.onmouseup= function(event){
            /*2.0获取事件对象*/
            var event = event||window.event;
            /*2.1获取选中内容*/
            /*一般*/
//            window.getSelection()
            /*ie*/
//            document.selection.createRange().text;

            /*2.11设置变量用来记录选中的内容*/
            var content_text = '';
            if(window.getSelection){
              content_text = window.getSelection();
            }else {
               content_text = document.selection.createRange().text;
            }

            /*2.12设置div显示以及设置他的位置和文字*/
            share_text.innerHTML = content_text;
            share_text.style.left = event.clientX +'px';
            share_text.style.top = event.clientY +'px';
            share_text.style.display = 'block';
        }
        var content_weibo = '';

        /*2.2当在word2中抬起的时候出发对应的事件*/
        word2.onmouseup = function(event){

            /*2.21获取事件对象*/
            var event = event||window.event;
            if(window.getSelection){
                content_weibo = window.getSelection();
            }else {
                content_weibo = document.selection.createRange().text;
            }
         /*2.22让对应的微博图片显示*/
            share_weibo.style.display = 'block';
            share_weibo.style.left = event.clientX +'px';
            share_weibo.style.top = event.clientY +'px';
        }

        /*3.当点击document的时候，让对应的盒子隐藏而且让选中的内容不选中*/
        document.onmousedown = function(event){
            /*3.1让对应的盒子隐藏*/

            /*3.11让除了显示内容的区域点下去的时候隐藏，所以位哦们获取点击的区域的id*/
            var event = event ||window.event;
            var targetId = event.target?event.target.id:event.srcElement.id;
            if(targetId !='word1'){

                share_text.style.display = 'none';
            }
            if(targetId!='share_weibo'){
                share_weibo.style.display = 'none';

            }else {
                /*表示点击了微博，跳转分享界面*/
                window.location.href = 'http://v.t.sina.com.cn/share/share.php?searchPic=false&title=' + content_weibo + '&url=https://www.baidu.com'

            }
            /*3.2让选中的内容不选中*/
            window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
        }
    }
</script>

匀速动画改造注意点

用 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)
}

无限轮播图

<script>
    window.onload = function(){

        /*0.设置一个值用来记录将要显示的图片*/
        var currentIndex = 0;
        /*0.1设置一个值用来表示小圆点显示第几个*/
        var indicateIndex = 0;
        /*1.获取标签*/
        var oul = document.getElementById('oul');
        var ol = document.getElementById('ol');
        /*1.0获取oul中原来的个数*/
        var lis = oul.children;
        /*1.1添加最后的图片*/
        oul.appendChild(oul.children[0].cloneNode(true));



        /*2.添加小的圆点*/
        for(var i = 0;i < lis.length -1;i++){

            var oli = document.createElement('li');
            ol.appendChild(oli);
        }

        /*2.1s设置第一个为红色*/
        ol.children[0].className = 'curr';

        /*2.2当移动到小圆点上的时候，让对应的小圆点的颜色发生变化，就是一拍他思想*/


        for(var i = 0;i < ol.children.length;i++){
            /*2.2扩展属性用来记录i*/
            ol.children[i].index = i;
           ol.children[i].onmouseover = function(){
               for(var j =0;j < ol.children.length;j++){
                   ol.children[j].className = '';
               }

              ol.children[this.index].className = 'curr';

               /*2.3让对应的图片动起来*/
               constant(oul,-this.index *750,20);

               /*2.4当移动到小圆点的时候，应该切换对应的currIndex以及indicateIndex*/
               currentIndex = this.index;
               indicateIndex = this.index;
           }
        }

        /*3.让自动动起来*/
        var timer = setInterval(auto_play,1000);
        function  auto_play(){
            currentIndex ++;
            if (currentIndex > lis.length -1)
            {
                currentIndex = 1;
                oul.style.left = 0;
            }

            /*动起来*/
            constant(oul,-currentIndex*750,20);

            /*设置小圆点的颜色*/
            indicateIndex ++;
            if (indicateIndex > ol.children.length  -1){
                indicateIndex  = 0;
            }
            for(var i = 0;i < ol.children.length;i++){

                ol.children[i].className = '';
            }
           ol.children[indicateIndex].className = 'curr';
        }
    }
</script>

克隆节点

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

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

2017-3-18 JS学习笔记

三大家族属性

获取浏览器窗口的宽度

窗口改变事件

事件冒泡

阻止事件冒泡

冒泡事件的应用

获取选中内容

匀速动画改造注意点

抽取匀速动画函数

无限轮播图

克隆节点

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读