原生js仿jquery一些常用方法(必看篇)


Posted in Javascript onSeptember 20, 2016

最近迷上了原生js,能不用jquery等框架的情况都会手写一些js方法,记得刚接触前端的时候为了选择器而使用jquery。。。现在利用扩展原型的方法实现一些jquery函数:

1.显示/隐藏

//hide() 
Object.prototype.hide = function(){ 
 this.style.display="none"; 
 return this; 
} 
//show() 
Object.prototype.show = function(){ 
 this.style.display="block"; 
 return this; 
}

return this的好处在于链式调用。

2.滑动 省略speed和callback的传入,因为要加一串判断和处理回调,代码量大

//slideDown() 
Object.prototype.slideDown = function(){ 
 this.style.display = 'block'; 
 if(this.clientHeight<this.scrollHeight){ 
  this.style.height=10+this.clientHeight+"px"; 
  var _this = this; 
  setTimeout(function(){_this.slideDown()},10) 
 }else{ 
  this.style.height=this.scrollHeight+"px"; 
 } 
} 
//slideUp() 
Object.prototype.slideUp = function(){ 
 if(this.clientHeight>0){ 
  this.style.height=this.clientHeight-10+"px"; 
  var _this = this; 
  setTimeout(function(){_this.slideUp()},10) 
 }else{ 
  this.style.height=0; 
  this.style.display = 'none'; 
 } 
}

3.捕获/设置

//attr() 
Object.prototype.attr = function(){ 
 if(arguments.length==1){ 
  return eval("this."+arguments[0]); 
 }else if(arguments.length==2){ 
  eval("this."+arguments[0]+"="+arguments[1]); 
  return this; 
 } 
} 
//val() 
Object.prototype.val = function(){ 
 if(arguments.length==0){ 
  return this.value; 
 }else if(arguments.length==1){ 
  this.value = arguments[0]; 
  return this; 
 } 
} 
//html() 
Object.prototype.html = function(){ 
 if(arguments.length==0){ 
  return this.innerHTML; 
 }else if(arguments.length==1){ 
  this.innerHTML = arguments[0]; 
  return this; 
 } 
} 
//text()需要在html()结果基础上排除标签,会很长,省略

4.CSS方法

 

//css() 
Object.prototype.css = function(){ 
 if(arguments.length==1){ 
  return eval("this.style."+arguments[0]); 
 }else if(arguments.length==2){ 
  eval("this.style."+arguments[0]+"='"+arguments[1]+"'"); 
  return this; 
 } 
}

 5.添加元素

//append() 
Object.prototype.append = function(newElem){ 
 this.innerHTML += newElem; 
 return this; 
} 
//prepend() 
Object.prototype.prepend = function(newElem){ 
 this.innerHTML = arguments[0] + this.innerHTML; 
 return this; 
} 
//after() 
Object.prototype.after = function(newElem){ 
 this.outerHTML += arguments[0]; 
 return this; 
} 
//before() 
Object.prototype.before = function(newElem){ 
 this.outerHTML = arguments[0] + this.outerHTML; 
 return this; 
}

6.删除/替换元素

//empty() 
Object.prototype.empty = function(){ 
 this.innerHTML = ""; 
 return this; 
} 
//replaceWith() 
Object.prototype.replaceWith = function(newElem){ 
 this.outerHTML = arguments[0]; 
 return this; 
} 
//remove() js自带,省略。

7.设置css类

//hasClass() 
Object.prototype.hasClass = function(cName){ 
 return !!this.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); 
} 
//addClass() 
Object.prototype.addClass = function(cName){ 
 if( !this.hasClass( cName ) ){ 
  this.className += " " + cName; 
 } 
 return this; 
} 
//removeClass() 
Object.prototype.removeClass = function(cName){ 
 if( this.hasClass( cName ) ){ 
  this.className = this.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" )," " ); 
 } 
 return this; 
}

上面的设置CSS类也可以利用html5新API classList及contains实现 但不兼容IE8以下及部分火狐浏览器

Object.prototype.hasClass = function(cName){ 
 return this.classList.contains(cName) 
} 
Object.prototype.addClass = function(cName){ 
 if( !this.hasClass( cName ) ){ 
  this.classList.add(cName); 
 } 
 return this; 
} 
Object.prototype.removeClass = function(cName){ 
 if( this.hasClass( cName ) ){ 
  this.classList.remove(cName); 
 } 
 return this; 
}

9.选择器

//id或class选择器$("elem") 
function $(strExpr){ 
 var idExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/; 
 var classExpr = /^(?:\s*(<[\w\W]+>)[^>]*|.([\w-]*))$/; 
 if(idExpr.test(strExpr)){ 
  var idMatch = idExpr.exec(strExpr); 
  return document.getElementById(idMatch[2]); 
 }else if(classExpr.test(strExpr)){ 
  var classMatch = classExpr.exec(strExpr); 
  var allElement = document.getElementsByTagName("*"); 
  var ClassMatch = []; 
  for(var i=0,l=allElement.length; i<l; i++){ 
   if(allElement[i].className.match( new RegExp( "(\\s|^)" + classMatch[2] + "(\\s|$)") )){ 
    ClassMatch.push(allElement[i]); 
   } 
  } 
  return ClassMatch; 
 } 
}

需要强调的是,选择器返回的结果或结果集包含的是htmlDOM,并非jquery的对象。大多数人都知道,document.getElementById("id")等价于jquery$("#id")[0],另外上面class选择器选择的结果如需使用,需要利用forEach遍历:

$(".cls").forEach(function(e){ 
 e.css("background","#f6f6f6") 
})

10.遍历 siblings()和children()获取的结果也需要结合forEach使用

//siblings() 
Object.prototype.siblings = function(){ 
 var chid=this.parentNode.children; 
 var eleMatch = []; 
 for(var i=0,l=chid.length;i<l;i++){ 
  if(chid[i]!=this){ 
   eleMatch.push(chid[i]); 
  } 
 } 
 return eleMatch; 
} 
//children() 原生js已含有该方法,故命名为userChildren。 
Object.prototype.userChildren = function(){ 
 var chid=this.childNodes; 
 var eleMatch = []; 
 for(var i=0,l=chid.length;i<l;i++){ 
  eleMatch.push(chid[i]); 
 } 
 return eleMatch; 
} 
//parent() 
Object.prototype.parent = function(){ 
 return this.parentNode; 
} 
//next() 
Object.prototype.next = function(){ 
 return this.nextElementSibling; 
} 
//prev() 
Object.prototype.prev = function(){ 
 return this.previousElementSibling; 
}

jquery事件函数原生js已有,另外,原生js实现jquery的一个常用函数 ajax 将会在下一篇写道。

原生js实现ajax方法

以上就是小编为大家带来的原生js仿jquery一些常用方法(必看篇)的全部内容了,希望对大家有所帮助,多多支持三水点靠木~

Javascript 相关文章推荐
javascript getElementsByClassName实现代码
Oct 11 Javascript
javascript数组详解
Oct 22 Javascript
javascript实现回到顶部特效
May 06 Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
浅谈vue中.vue文件解析流程
Apr 24 Javascript
webpack分离css单独打包的方法
Jun 12 Javascript
微信小程序左滑删除功能开发案例详解
Nov 12 Javascript
jQuery实现聊天对话框
Feb 08 jQuery
JS常见内存泄漏及解决方案解析
May 30 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 #Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 #Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 #Javascript
jQuery简单倒计时效果完整示例
Sep 20 #Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 #Javascript
jQuery实现的网页换肤效果示例
Sep 20 #Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 #Javascript
You might like
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
php socket通信简单实现
2016/11/18 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
javascript中expression的用法整理
2014/05/13 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
python中类的属性和方法介绍
2018/11/27 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
办公室主任职责范文
2013/11/08 职场文书
学习十八届三中全会精神实施方案
2014/02/17 职场文书
会计岗位职责范本
2014/03/07 职场文书
《将心比心》教学反思
2014/04/08 职场文书
政治思想表现评语
2014/05/04 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
信仰纪录片观后感
2015/06/08 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书