karlew > js/jquery > 原生js仿jquery一些常用方法

原生js仿jquery一些常用方法

6-03 4,749 views

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

显示/隐藏

  1. //hide()  
  2. Object.prototype.hide = function(){  
  3.     this.style.display="none";  
  4.     return this;  
  5. }  
  6. //show()  
  7. Object.prototype.show = function(){  
  8.     this.style.display="block";  
  9.     return this;  
  10. }  

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

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

  1. //slideDown()   
  2. Object.prototype.slideDown = function(){  
  3.     this.style.display = 'block';  
  4.     if(this.clientHeight<this.scrollHeight){  
  5.         this.style.height=10+this.clientHeight+"px";  
  6.         var _this = this;  
  7.         setTimeout(function(){_this.slideDown()},10)  
  8.     }else{  
  9.         this.style.height=this.scrollHeight+"px";  
  10.     }  
  11. }  
  12. //slideUp()  
  13. Object.prototype.slideUp = function(){  
  14.     if(this.clientHeight>0){  
  15.         this.style.height=this.clientHeight-10+"px";  
  16.         var _this = this;  
  17.         setTimeout(function(){_this.slideUp()},10)  
  18.     }else{  
  19.         this.style.height=0;  
  20.         this.style.display = 'none';  
  21.     }  
  22. }  

 

捕获/设置

  1. //attr()  
  2. Object.prototype.attr = function(){  
  3.     if(arguments.length==1){  
  4.         return eval("this."+arguments[0]);  
  5.     }else if(arguments.length==2){  
  6.         eval("this."+arguments[0]+"="+arguments[1]);  
  7.         return this;  
  8.     }  
  9. }  
  10. //val()  
  11. Object.prototype.val = function(){  
  12.     if(arguments.length==0){  
  13.         return this.value;  
  14.     }else if(arguments.length==1){  
  15.         this.value = arguments[0];  
  16.         return this;  
  17.     }  
  18. }  
  19. //html()  
  20. Object.prototype.html = function(){  
  21.     if(arguments.length==0){  
  22.         return this.innerHTML;  
  23.     }else if(arguments.length==1){  
  24.         this.innerHTML = arguments[0];  
  25.         return this;  
  26.     }  
  27. }  
  28. //text()需要在html()结果基础上排除标签，会很长，省略  

 

CSS方法

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

 

添加元素

  1. //append()  
  2. Object.prototype.append = function(newElem){  
  3.     this.innerHTML += newElem;  
  4.     return this;  
  5. }  
  6. //prepend()  
  7. Object.prototype.prepend = function(newElem){  
  8.     this.innerHTML = arguments[0] + this.innerHTML;  
  9.     return this;  
  10. }  
  11. //after()  
  12. Object.prototype.after = function(newElem){  
  13.     this.outerHTML += arguments[0];  
  14.     return this;  
  15. }  
  16. //before()  
  17. Object.prototype.before = function(newElem){  
  18.     this.outerHTML = arguments[0] + this.outerHTML;  
  19.     return this;  
  20. }  

 

删除/替换元素

  1. //empty()  
  2. Object.prototype.empty = function(){  
  3.     this.innerHTML = "";  
  4.     return this;  
  5. }  
  6. //replaceWith()  
  7. Object.prototype.replaceWith = function(newElem){  
  8.     this.outerHTML = arguments[0];  
  9.     return this;  
  10. }  
  11. //remove() js自带，省略。  

 

设置css类

  1. //hasClass()  
  2. Object.prototype.hasClass = function(cName){  
  3.     return !!this.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") );  
  4. }  
  5. //addClass()  
  6. Object.prototype.addClass = function(cName){  
  7.     if( !this.hasClass( cName ) ){   
  8.         this.className += " " + cName;  
  9.     }  
  10.     return this;  
  11. }  
  12. //removeClass()  
  13. Object.prototype.removeClass = function(cName){  
  14.     if( this.hasClass( cName ) ){   
  15.         this.className = this.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" )," " );  
  16.     }  
  17.     return this;  
  18. }  

 

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

  1. Object.prototype.hasClass = function(cName){  
  2.     return this.classList.contains(cName)  
  3. }  
  4. Object.prototype.addClass = function(cName){  
  5.     if( !this.hasClass( cName ) ){   
  6.         this.classList.add(cName);  
  7.     }  
  8.     return this;  
  9. }  
  10. Object.prototype.removeClass = function(cName){  
  11.     if( this.hasClass( cName ) ){   
  12.         this.classList.remove(cName);  
  13.     }  
  14.     return this;  
  15. }  

 

选择器

  1. //id或class选择器$("elem")  
  2. function $(strExpr){  
  3.     var idExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/;  
  4.     var classExpr = /^(?:\s*(<[\w\W]+>)[^>]*|.([\w-]*))$/;  
  5.     if(idExpr.test(strExpr)){  
  6.         var idMatch = idExpr.exec(strExpr);  
  7.         return document.getElementById(idMatch[2]);  
  8.     }else if(classExpr.test(strExpr)){  
  9.         var classMatch = classExpr.exec(strExpr);  
  10.         var allElement = document.getElementsByTagName("*");  
  11.         var ClassMatch = [];  
  12.         for(var i=0,l=allElement.length; i<l; i++){  
  13.             if(allElement[i].className.match( new RegExp( "(\\s|^)" + classMatch[2] + "(\\s|$)") )){  
  14.                 ClassMatch.push(allElement[i]);  
  15.             }  
  16.         }  
  17.         return ClassMatch;  
  18.     }  
  19. }  

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

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

 

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

  1. //siblings()    
  2. Object.prototype.siblings = function(){    
  3.     var chid=this.parentNode.children;    
  4.     var eleMatch = [];    
  5.     for(var i=0,l=chid.length;i<l;i++){    
  6.         if(chid[i]!=this){    
  7.             eleMatch.push(chid[i]);    
  8.         }    
  9.     }    
  10.     return eleMatch;    
  11. }    
  12. //children() 原生js已含有该方法，故命名为userChildren。    
  13. Object.prototype.userChildren = function(){    
  14.     var chid=this.childNodes;    
  15.     var eleMatch = [];    
  16.     for(var i=0,l=chid.length;i<l;i++){    
  17.         eleMatch.push(chid[i]);    
  18.     }    
  19.     return eleMatch;    
  20. }    
  21. //parent()    
  22. Object.prototype.parent = function(){    
  23.     return this.parentNode;    
  24. }    
  25. //next()    
  26. Object.prototype.next = function(){    
  27.     return this.nextElementSibling;    
  28. }    
  29. //prev()    
  30. Object.prototype.prev = function(){    
  31.     return this.previousElementSibling;    
  32. }    

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

版权属于: karlew

原文地址: https://www.karlew.com/archives/507

转载时必须以链接形式注明原始出处及本声明。

欢迎留言