zoukankan      html  css  js  c++  java
  • JS自制SEO框架(js案例)

    学习了JS一段时间,自己封装了一些日常码代码需要用到的框架,需要的小伙伴可以参考一下
    该框架主要功能有:
    阻止事件冒泡、阻止默认事件、获取元素、添加事件、删除事件、单个事件代理,多个事件代理、清除class、获取滚动距离等
    框架代码如下:

    var sEO={
        $:function(exp){//获取对象(1个、多个)
            var el;
            if (/^#w+$/.test(exp)){
                el=document.querySelector(exp);
            } else {
                el=document.querySelectorAll(exp);
            }
            return el;
        },
        e:function (ev) {
            return ev||event;
        },
        getType:function () {
            return this.e().type()
        },
        getTarget:function () {
            return this.e().target||this.e().srcElement;
        },
        stopBubble:function () {//阻止时间冒泡
            if (this.e().stopPropagation)
                this.e().stopPropagation();
            else
                this.e().cancelBubble=true;
        },
        stopDefault:function () {//阻止默认事件
            if (this.e().preventDefault)
                this.e().preventDefault();
            else
                this.e().returnValue=false;
        },
        addEvent:function (el,type,fn) {//添加事件
            /*el:对象,type:事件名称,fn:回调函数*/
            if (el.addEventListener)
                el.addEventListener(type,fn,false);
            else if (el.attachEvent)
                el.attachEvent(type,fn);
            else
                el['on'+type]=fn;
        },
        delEvent:function (el,type,fn) {//删除事件
            /*el:对象,type:事件名称,fn:回调函数*/
            if (el.addEventListener)
                el.removeEventListener(type,fn,false);
            else if (el.attachEvent)
                el.detachEvent(type,fn);
            else
                el['on'+type]=null;
        },
        agent:function (parent,targetName,type,fun) {//单个事件代理
            //代理对象(1个),被代理的对象,事件名,回调函数
            this.addEvent(parent,type,function (ev) {
                var e=ev||event;
                var target=e.target||e.srcElement;
                while (target.nodeName!==targetName.toUpperCase() && target!==parent){
                    target=target.parentNode;
                }
                if (target.nodeName===targetName.toUpperCase())
                    fun.call(target);//将回调函数作用给target对象
            })
        },
        agents:function (parent,targetArr,type,fun) {//多个事件代理
            //代理对象(多个),被代理的对象,事件名,回调函数
            var _this=this;
            targetArr.forEach(function (el) {
                _this.addEvent(parent,type,function (ev) {
                    var e=ev||event;
                    var target=e.target||e.srcElement;
                    while (target.nodeName!==el.toUpperCase() && target!==parent){
                        target=target.parentNode;
                    }
                    if (target.nodeName===el.toUpperCase())
                        fun.call(target);
                })
            })
        },
        getScroll:function (el) {//滚动条滚动
            var top=0,left=0;
            if (el===document){
                left=el.body.scrollLeft||el.documentElement.scrollLeft;
                top=el.body.scrollTop||el.documentElement.scrollTop;
            }else{
                left=el.scrollLeft;
                top=el.screenTop;
            }
            return {left:left,top:top}
        },
        getCookie:function (key) {
            var ck=document.cookie;
            var arr=ck.split('; ');
            for (var i in arr){
                var temp=arr[i].split('=');
                if (temp[0]===key)
                    return temp[1];
            }
            return '';
        },
        setCookie:function (key,value,iDate) {
            var d=new Date();
            d.setDate(d.getDate()+iDate);
            document.cookie =`${key}=${value};expires=${d}`
        },
        removeCookie:function (key) {
            this.setCookie(key,0,-1);
        },
        clearClass:function (cArr,cls) {//清除class
            //对象数组,class名字
            // for (var i=0;i<cArr.length;i++){
            //     if (cArr[i].classList.contains(cls)){
            //         cArr[i].classList.remove(cls);
            //         break;
            //     }
            // }
           [].forEach.call(cArr,function (el) {
               if (el.classList.contains(cls)){
                   el.classList.remove(cls);
                   return false;
               }
           });
        },
        getPos:function (el){
            var left=el.offsetLeft;
            var top=el.offsetTop;
            while(el===el.offsetParent){
                left+=el.offsetLeft;
                top+=el.offsetTop;
            }
            return {left:left,top:top}
        }
    };
    

      

  • 相关阅读:
    VTK初学一,动画加AVI录制终于做出来了
    QCamera获取摄像头图像(转载)
    VTK初学一,比较常见的错误2
    myeclipse2014鼠标单击后光标位置背景底色为白色太难看,行号显示
    记一次跟二房东公司(非中介个人房源无中介费)租房的经历
    求16进制数据或运算后的值(即多个16进制相加的和)
    error LNK2001: 无法解析的外部符号 "public: char * __thiscall
    如何利用指向数组的指针得到数组元素个数?
    C++判断字符串是否为空的一个小问题
    C++开发中BYTE类型数组转为对应的字符串
  • 原文地址:https://www.cnblogs.com/xyyl/p/10912037.html
Copyright © 2011-2022 走看看