常用js代码积累

 

 

1，js判断进入可视区，参考（亲测不行）：https://www.cnblogs.com/Marydon20170307/p/8830069.html

重点学习的话，可参考：

　　js计算元素距离顶部的高度及元素是否在可视区判断：https://www.cnblogs.com/damonFeng/archive/2018/01/30/8378123.html

                https://www.jb51.net/article/103459.htm

$(window).scroll(function() {
            // 获取的是浏览器可见区域高度（网页的可视区域的高度）（不滚动的情况下）
            var documentClientHeight = document.documentElement.clientHeight || window.innerHeight
            var e = document.getElementById('header-nav');
            // 元素顶端到可见区域（网页）顶端的距离
            var htmlElementClientTop = document.getElementById('header-nav').getBoundingClientRect().top;
            // 网页指定元素进入可视区域
            if (documentClientHeight >= htmlElementClientTop) {
                // TODO 执行你要做的操作
                $("#header-nav").addClass("navbar-fixed-top");
            }
        });

 

/**
         * 监听网页滚动事件
         */
        window.onscroll = function(){
            // 获取的是浏览器可见区域高度（网页的可视区域的高度）（不滚动的情况下）
            var documentClientHeight = document.documentElement.clientHeight || window.innerHeight
            var e = document.getElementById('header-nav');
            // 元素顶端到可见区域（网页）顶端的距离
            var htmlElementClientTop = document.getElementById('header-nav').getBoundingClientRect().top;
            // 网页指定元素进入可视区域
            if (documentClientHeight >= htmlElementClientTop) {
                // TODO 执行你要做的操作
                document.getElementById('header-nav').classList.add('navbar-fixed-top');
                console.log([document.getElementById('header-nav')]);
            }
        }

　　

getBoundingClientRect深度学习：

       https://www.softwhy.com/article-10033-1.html

　　https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect 

 2，监听页面滚动事件，参考：https://www.cnblogs.com/smalldy/p/10875654.html

3，getElementById与$()的区别，参考：https://blog.csdn.net/qq_36378302/article/details/81974246

getElememtById是获取当前对象，jquery()是获取一个jQuery的对象数组，给getElementById获取的对象加上数组后，这俩个还是不一样，一个是js的数组对象作为容器，也就是用数组做包装，
$()是封装了一个jQuery的对象数组作为容器，封装了很多方法,相当于与jQuery对象做包装，共同点是都是内部包装的内容都是一样的。

4，学习滚动插件iScroll

5，原生实现jquery的prepend，append，before，after

　　参考：https://www.mmxiaowu.com/article/58481d53d4352863efb55443

同时要掌握appendChild函数和createElement和createTextNode函数

6，fadeIn和fadeOut的使用

$(document).on("mouseenter","#list-container #list-according .panel", function(){
                // ohters panel-body fadeOut
                var panels = $("#list-container .panel");
                var panelSort = $(this).attr("sort");
                panels.each(function(i,ele){
                    if(panelSort && panelSort != i){
                        $(ele).find(".panel-body").fadeOut(2000);
                    }
                })
                // next panel-body fadeIn
                $(this).children().fadeIn(1000);
            });

 对比下面的注册两个事件mouseenter和mouseleave事件

$(document).on("mouseenter","#list-container #list-according .panel", function(){
                $(this).find(".panel-body").fadeIn(1000);
            });
            $(document).on("mouseleave","#list-container #list-according .panel", function(){
                $(this).find(".panel-body").fadeOut(2000);
            });

 7，递归遍历对象

function OS(obj){
            for(var i in obj){
                console.log("obj[i]", i);
                if(typeof obj[i] === "object"){
                    OS(obj[i]);
                }else{
                    if(typeof obj[i] === "function"){
                        console.log("function",obj[i]());
                    }else{
                        console.log(obj[i]);
                    }
                }
            }
        }

(function(document){
        var root = {
            id : "001",
            a : {
                id : "001-001",
                a1 : "bac",
                a2 : function(){
                    return "a2";
                }
            },
            b : {
                id : "002-001",
                b1 : "woer",
                b2 : function(){
                    return "b2";
                }
            }
        }
        
        function SSO (root,objName){
            var obj = root;
            //debugger;
            var re = null ;
            for(var i in obj){
                if(i == objName){
                    if(typeof obj[i] === "object"){
                        return re = obj[i];
                    }else if(typeof obj[i] === "function"){
                        return re = obj[i]();
                    }else{
                        return re = obj[i];
                    }
                }else{
                    if(typeof obj[i] === "object"){
                        re = SSO(obj[i],objName);
                        if(re){
                            return re;
                        }
                    }
                }
            }
            return re;
        }
        console.log(SSO(root,"b2"));
        
    })();

 8，最基础的页面js模板（单全局变量+对象搜索）

<script type="text/javascript">
    var TabUserManager = TUM = {
        namespace: function(ns){
            var parts = ns.split("."),
            object = this,
            i,len;
            for(i=0, len=parts.length; i<len; i++){
                if(!object[parts[i]]){
                    object[parts[i]] = {};
                }
                object = object[parts[i]]; 
            }
            return object;
        },
        
        SSO : function(root,objName){
            var obj = root;
            //debugger;
            var re = null ;
            for(var i in obj){
                if(i == objName){
                    if(typeof obj[i] === "object"){
                        return re = obj[i];
                    }else if(typeof obj[i] === "function"){
                        return re = obj[i]();
                    }else{
                        return re = obj[i];
                    }
                }else{
                    if(typeof obj[i] === "object"){
                        re = TUM.SSO(obj[i],objName);
                        if(re){
                            return re;
                        }
                    }
                }
            }
            return re;
        },
        
        uEditPanel : {
            I : function(){
                return $("#uEditPanel");
            },
        },
        
        uListPanel : { // TRM.uListPanel.
            I : function(){
                return $("#uListPanel");
            },
            uToolbar : {
                uCheckBtn : function(){
                    console.log("uCheckBtn");
                },
                uAddBtn : function(){
                    console.log("uAddBtn");
                },
                uEditBtn : function(){
                    console.log("uEditBtn");
                },
                uRemoveBtn : function(){
                    console.log("uRemoveBtn");
                },
                uSearchBtn : function(){
                    console.log("uSearchBtn");
                }
                
            }
        }
    };
</script>