下面为大家带来一篇原生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<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;
}
以上就是使用原生js仿jquery中的一些基本功能实例详解的详细内容。