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}
}
};
JS自制SEO框架(js案例)的更多相关文章
- node.js Web应用框架Express入门指南
node.js Web应用框架Express入门指南 作者: 字体:[增加 减小] 类型:转载 时间:2014-05-28 我要评论 这篇文章主要介绍了node.js Web应用框架Express入门 ...
- 转 10 个最佳的 Node.js 的 MVC 框架
10 个最佳的 Node.js 的 MVC 框架 oschina 发布于: 2014年02月24日 (33评) 分享到: 收藏 +322 Node.js 是一个基于Chrome JavaScri ...
- Hexo - 快速,轻量,强大的 Node.js 博客框架
Hexo 是一个快速,轻量,强大的 Node.js 博客框架.带给你难以置信的编译速度,瞬间生成静态文件:支持 Markdown,甚至可以在 Hexo 中集合 Octopress 插件:只需要一个命令 ...
- js引出函数概念的案例
js引出函数概念的案例 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8&q ...
- node.js入门及express.js框架
node.js介绍 javascript原本只是用来处理前端,Node使得javascript编写服务端程序成为可能.于是前端开发者也可以借此轻松进入后端开发领域.Node是基于Google的V8引擎 ...
- Node.js基于Express框架搭建一个简单的注册登录Web功能
这个小应用使用到了node.js bootstrap express 以及数据库的操作 :使用mongoose对象模型来操作 mongodb 如果没了解过的可以先去基本了解一下相关概念~ 首先注 ...
- node.js Web应用框架Express.js(一)
什么是Express.js Express 是一个简洁而灵活的 node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用,提供丰富的HTTP工具以及来自Connect框架的中间件随 ...
- 使用 Require.js 引用第三方框架时遇到的一些情况
使用 Require.js 引用第三方框架时遇到的一些情况 在使用Require.js解析依赖的时候,会出现以下几种情况: 程序中的依赖关系 当前程序 依赖于 B包, B包 依赖于 A包 A包与B包两 ...
- js调用父框架函数
if (window.parent && window.parent.frames["frame_main"]) { alert(window.parent.fra ...
随机推荐
- EasyRTMP视频直播推送H264 sps解析错误导致播放画面拉伸问题解决
EasyRTMP是将H264流以及AAC流以RTMP协议推送到RTMP服务器上进行直播.EasyRTMP推送库中会从H264流中提取中SPS.PPS进行解析,开发的时候遇到过有些SPS解析有误,获取到 ...
- Thread join方法的用途
主线程中会创建多个子线程做一些事情,主线程要用到这些子线程处理的数据,因此它需要等待所有的子线程处理完之后才继续运行.这就要用到join方法了.
- C++笔记之外部类访问内部类的私有成员
如下图所示 内部类可以访问外部类的私有成员 而外部类无法访问内部类的私有成员 为了能让外部类访问内部类的私有成员,将外部类声明为内部类的友元类即可 #include <iostream> ...
- linux杂谈(十三):代理server
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/linux_player_c/article/details/24707457 1.代理server的 ...
- cookie VS sessionstorge VS localstorge
虽然cookie , localstorge , sessionstorge三者都有存储的功能,但是还是有区别, git上地址:https://github.com/lily1010/cookie-s ...
- Codeforces Round #295 (Div. 2)---B. Two Buttons( bfs步数搜索记忆 )
B. Two Buttons time limit per test : 2 seconds memory limit per test :256 megabytes input :standard ...
- awk实现求和、平均、最大值和最小值的计算操作
0.准备和数据文件 比如有一个数据文件,只有一列(在之前可以通过各种手段过滤出只有数字这一列),比如操作的响应时间 Txt代码 490898 1189235 20212 1494270 14 ...
- 多线程之:synchonized锁实现的原理<一>
一:java同步的锁类型? --->目前在Java中存在两种锁机制:synchonized和Lock--->Lock接口及其实现类是JDK5增加的内容,其作者是大名鼎鼎的并发专家Doug ...
- HDU3157 Crazy Circuits
传送门 有源汇的上下界网络流求最小流. 这个其实和上道题差不多--题目描述我没怎么看明白--好像就是让你按照他说的把图建出来就行了,注意这个题的字符处理,可能有长度大于1的字符串,要注意一下.求最小流 ...
- AtCoder Grand Contest 006 C:Rabbit Exercise
题目传送门:https://agc006.contest.atcoder.jp/tasks/agc006_c 题目翻译 数轴上有\(N\)只兔子,从\(1\)到\(N\)编号,每只兔子初始位置是\(x ...