原生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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐share.js
Dec 23 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
解析使用JS 清空File控件的路径值
Jul 08 Javascript
js监听键盘事件示例代码
Jul 26 Javascript
window.onload和$(function(){})的区别介绍
Oct 30 Javascript
jQuery中:first-child选择器用法实例
Dec 31 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
Javascript中replace()小结
Sep 30 Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 Javascript
js的OOP继承实现(必看篇)
Feb 18 Javascript
使用zrender.js绘制体温单效果
Oct 31 Javascript
浅析TypeScript 命名空间
Mar 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 echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
php blowfish加密解密算法
2016/07/02 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
浅谈webpack-dev-server的配置和使用
2018/05/17 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
详解Vue.js3.0 组件是如何渲染为DOM的
2020/11/10 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
详解Python中dict与set的使用
2015/08/10 Python
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
用python实现k近邻算法的示例代码
2018/09/06 Python
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
写出一个方法实现冒泡排序
2016/07/08 面试题
评析教师个人的自我评价
2014/02/19 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
2015年路政工作总结
2015/05/22 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书