这次给大家带来js仿jquery步骤详解，js仿jquery的注意事项有哪些，下面就是实战案例，一起来看一下。
最近迷上了原生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 需要强调的是，选择器返回的结果或结果集包含的是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 jquery事件函数原生js已有，另外，原生js实现jquery的一个常用函数 ajax 将会在下一篇写道。
原生js实现ajax方法
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
js中时间单位比较的方法
js操作json详细介绍
以上就是js仿jquery步骤详解的详细内容。