原生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 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
Aug 28 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
JavaScript.Encode手动解码技巧
Jul 14 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
微信小程序之数据双向绑定与数据操作
May 12 Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
Aug 20 Javascript
vue实现tab栏点击高亮效果
Aug 19 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笔记之:数据类型与常量的使用分析
2013/05/14 PHP
php 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
PHP数组去重比较快的实现方式
2016/01/19 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
javascript使用activex控件的代码
2011/01/27 Javascript
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
Python CSV模块使用实例
2015/04/09 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
Tensorflow 多线程设置方式
2020/02/06 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
Python里面如何实现tuple和list的转换
2012/06/13 面试题
法律进社区实施方案
2014/03/21 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
物业保安辞职信
2015/05/12 职场文书
观后感开头
2015/06/19 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python
Go 语言结构实例分析
2021/07/04 Golang
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL