学习了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. flume-ng script should first try finding java from PATH and then try using bigtop, instead of vice-versa

    [FLUME-1154] flume-ng script should first try finding java from PATH and then try using bigtop, inst ...

  2. 【智能无线小车系列九】在树莓派上使用USB摄像头

    材料准备: 1.树莓派 2.AS 4WD小车 3.WebCam 4.小米移动电源 5.TP—LINK 高增益150MUSB无线网卡 操作流程: 1.将WebCam插上树莓派后,首先要确认树莓派是否支持 ...

  3. Android Weekly Notes Issue #242

    Android Weekly Issue #242 January 29th, 2017 Android Weekly Issue #242 本期内容包括: Android中常用的设计模式; 基于No ...

  4. hdu 1004 Let the Balloon Rise 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1004 用STL 中的 Map 写的 #include <iostream> #includ ...

  5. hdu-5776 sum(同余)

    题目链接: sum Time Limit: 2000/1000 MS (Java/Others)     Memory Limit: 131072/131072 K (Java/Others) Pro ...

  6. C语言教学杂记——字母排序

    一个人在被告诉一个问题应该怎么被解决后,而且亲身试验效果OK后,一旦遇到类似的问题,就会条件反射般直接拿这个方法来用了.很少会去想为什么要用这个方法,会不会有什么隐患,还有没有别的方法呢,等等这些问题 ...

  7. Keras 可视化 model

    参考:https://keras.io/visualization/ error解决参考:http://blog.csdn.net/wangjian1204/article/details/50346 ...

  8. Linux-Nginx和NFS

    1 虚拟化 查看系统信息 cat /proc/meninfo cat /proc/cpuinfo 其中 flags里面的信息可以查看该cpu是否支持虚拟化 flags上有vmx svm等表示可以虚拟化 ...

  9. BZOJ_1941_[Sdoi2010]Hide and Seek_KDtree

    BZOJ_1941_[Sdoi2010]Hide and Seek_KDtree Description 小猪iPig在PKU刚上完了无聊的猪性代数课,天资聪慧的iPig被这门对他来说无比简单的课弄得 ...

  10. 如何使用Psyco为你的Python程序提速

    psyco加速Python执行速度的方法:要求: 版本对照:File name      Python versions      Well-tested withpsyco-x.y-win32-py ...