JS自制SEO框架（js案例）
2024-08-23 10:00:09
学习了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}
}
};
最新文章
- Unity 性能
- 开关WIFI脚本
- Java Synchronized的用法
- 线程池的应用及Callable接口的使用
- java批量插入或更新的问题
- poj 2533 Longest Ordered Subsequence(dp)
- IIS 7.0, ASP.NET, pipelines, modules, handlers, and preconditions
- JSON和XML：不可同日而语
- Json字符串与字典互转
- solr group分组查询
- web前端学习之路
- 在Magento产品页面的使用jqZoom
- uoj#38. 【清华集训2014】奇数国【欧拉函数】
- sizeof和strlen的区别和联系总结
- Unity 游戏框架搭建 (二) 单例的模板
- 浅析Java 8新特性Method Reference
- GitHub for Windows客户端使用操作流程
- 剑指Offer-从上往下打印二叉树
- cordova获取app版本信息插件的使用：cordova-plugin-app-version
- Digits of Factorial LightOJ - 1045