学习了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}
}
};

  

JS自制SEO框架(js案例)的更多相关文章

  1. node.js Web应用框架Express入门指南

    node.js Web应用框架Express入门指南 作者: 字体:[增加 减小] 类型:转载 时间:2014-05-28 我要评论 这篇文章主要介绍了node.js Web应用框架Express入门 ...

  2. 转 10 个最佳的 Node.js 的 MVC 框架

    10 个最佳的 Node.js 的 MVC 框架 oschina 发布于: 2014年02月24日 (33评) 分享到:    收藏 +322 Node.js 是一个基于Chrome JavaScri ...

  3. Hexo - 快速,轻量,强大的 Node.js 博客框架

    Hexo 是一个快速,轻量,强大的 Node.js 博客框架.带给你难以置信的编译速度,瞬间生成静态文件:支持 Markdown,甚至可以在 Hexo 中集合 Octopress 插件:只需要一个命令 ...

  4. js引出函数概念的案例

    js引出函数概念的案例   1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8&q ...

  5. node.js入门及express.js框架

    node.js介绍 javascript原本只是用来处理前端,Node使得javascript编写服务端程序成为可能.于是前端开发者也可以借此轻松进入后端开发领域.Node是基于Google的V8引擎 ...

  6. Node.js基于Express框架搭建一个简单的注册登录Web功能

    这个小应用使用到了node.js  bootstrap  express  以及数据库的操作 :使用mongoose对象模型来操作 mongodb 如果没了解过的可以先去基本了解一下相关概念~ 首先注 ...

  7. node.js Web应用框架Express.js(一)

    什么是Express.js Express 是一个简洁而灵活的 node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用,提供丰富的HTTP工具以及来自Connect框架的中间件随 ...

  8. 使用 Require.js 引用第三方框架时遇到的一些情况

    使用 Require.js 引用第三方框架时遇到的一些情况 在使用Require.js解析依赖的时候,会出现以下几种情况: 程序中的依赖关系 当前程序 依赖于 B包, B包 依赖于 A包 A包与B包两 ...

  9. js调用父框架函数

    if (window.parent && window.parent.frames["frame_main"]) { alert(window.parent.fra ...

随机推荐

  1. EasyPusher手机直播推送是如何实现后台直播推送的

    本文由EasyDarwin开源团队成员John提供:http://blog.csdn.net/jyt0551/article/details/52276062 EasyPusher Android是使 ...

  2. 微信分享配置(js-sdk)

    现在的微信分享给朋友-分享到朋友圈 链接带有自定义的title.描述.图片,需要配置js-sdk(地址:mp.weixin.qq.com)微信文档 需要后台配置config的参数,返回给前台 1)de ...

  3. js复杂数据格式提交

    有的时候额后台需要一个对象Map值,如{name: '姓名',attributeMap:{skill: '名称;checkbox;true;&篮球:1,羽毛球:2',name:'lsg' }} ...

  4. querySelectorAll和getElementsBy 系列比较

    querySelectorAll 相比下面这些方法有什么区别? (1)getElementsByTagName (2)getElementsByClassName (3)getElementsByNa ...

  5. nginx ,node 配置项目

    nginx ,node 配置项目 1.安装好node,npm 2.安装cnpm,-g是全局的 sudo npm install -g cnpm --registry=https://registry. ...

  6. 通用方法解决UITextFiled输入的时候,键盘遮挡问题

    我们在用键盘录入的时候,有可能会遮挡录入框,所以我们应调整UIView的位置,使其不被遮挡.我写了一个通用的方法可以解决这个问题:​​1. [代码][C/C++]代码         - (void) ...

  7. iOS 使用.xcworkspace文件管理代码和工程依赖(实现项目模块化)

    一.创建xcworkspace文件. 在cocoapods安装后,项目文件里都会多一个后缀为.xcworkspace的文件.打开这个文件就相当打开最初创建的项目了.那么这个文件也就是用来管理项目的,它 ...

  8. tflearn数据预处理

    #I just added a function for custom data preprocessing, you can use it as: minmax_scaler = sklearn.p ...

  9. (QA-LSTM)自然语言处理:智能问答 IBM 保险QA QA-LSTM 实现笔记.md

    train集: 包含若干条与保险相关的问题,每一组问题对为一行,示意如下: 可分为四项,第三项为问题,第四项为答案: 1.build_vocab 统计训练集中出现的词,返回结果如下(一个包含3085个 ...

  10. apache web 服务器

    0. 特性与特点 性能方面,apache 在设计时采用了以"进程"为基础的结构,自然进程比线程消耗了更多的系统开销,导致了 apache 在多处理器环境中性能有所下降: 因此,在对 ...