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 ...
随机推荐
- 九度OJ 1087:约数的个数 (数字特性)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:7349 解决:2306 题目描述: 输入n个整数,依次输出每个数的约数的个数 输入: 输入的第一行为N,即数组的个数(N<=1000) ...
- go签名算法设计
Go by Example 中文:Base64编码 https://books.studygolang.com/gobyexample/base64-encoding/
- (转)SDP协议概述
1 简介 SDP 完全是一种会话描述格式, 它不属于传输协议. 它使用不同的适当的传输协议,包括会话通知协议(SAP).会话初始协议(SIP). 实时流协议(RTSP).MIME 扩展协议的电子邮件以 ...
- 剑指Offer:重建二叉树【7】
剑指Offer:重建二叉树[7] 题目描述 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5 ...
- React Native 隐藏组件思路
In your render function:{ this.state.showTheThing && <TextInput/>} Then just do: this. ...
- flex平分测试
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 英语发音规则---gh
英语发音规则---gh 一.总结 一句话总结:gh字母组合的读音在中学英语课本中归纳起来主要有"发音"和"不发音"两种情况. gh字词首是发/g/,因为需要开头 ...
- Win8风格的WPF按钮
Win8将Windows的风格又进行了一次变革,我还挺喜欢的,有简洁大气的感觉,华丽绚丽的东西看多了之后总会返璞归真寻找简洁大气的感觉才能心情舒畅. 下面就给个WPF下Button的自定义写法. ...
- Linux删除乱码非空目录
# ls -li 总用量 drwxr-xr-x root root 2月 : 2.1 -rw-rw-r-- binwen binwen 2月 : Htc_常用软件.zip drwxr-xr-x roo ...
- QQ通信原理
转载自http://blog.csdn.net/li_xiao_ming/article/details/8106857 下面有4个基本的问答: 问题一:为什么只要可以连上互联网的计算机都可以用QQ相 ...