怎么用原生的js实现jquery的一个特定方法

1.显示/隐藏

1 2 3 4 5 6 7 8 9 10

//hide() Object.prototype.hide =function(){  this.style.display="none";  returnthis; } //show() Object.prototype.show =function(){  this.style.display="block";  returnthis; }

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

//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.捕获/设置

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

//attr() Object.prototype.attr =function(){  if(arguments.length==1){   returneval("this."+arguments[0]);  }elseif(arguments.length==2){   eval("this."+arguments[0]+"="+arguments[1]);   returnthis;  } } //val() Object.prototype.val =function(){  if(arguments.length==0){   returnthis.value;  }elseif(arguments.length==1){   this.value = arguments[0];   returnthis;  } } //html() Object.prototype.html =function(){  if(arguments.length==0){   returnthis.innerHTML;  }elseif(arguments.length==1){   this.innerHTML = arguments[0];   returnthis;  } } //text()需要在html()结果基础上排除标签，会很长，省略

4.CSS方法

 

1 2 3 4 5 6 7 8 9

//css() Object.prototype.css =function(){  if(arguments.length==1){   returneval("this.style."+arguments[0]);  }elseif(arguments.length==2){   eval("this.style."+arguments[0]+"='"+arguments[1]+"'");   returnthis;  } }

 5.添加元素

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

//append() Object.prototype.append =function(newElem){  this.innerHTML += newElem;  returnthis; } //prepend() Object.prototype.prepend =function(newElem){  this.innerHTML = arguments[0] +this.innerHTML;  returnthis; } //after() Object.prototype.after =function(newElem){  this.outerHTML += arguments[0];  returnthis; } //before() Object.prototype.before =function(newElem){  this.outerHTML = arguments[0] +this.outerHTML;  returnthis; }

6.删除/替换元素

1 2 3 4 5 6 7 8 9 10 11

//empty() Object.prototype.empty =function(){  this.innerHTML ="";  returnthis; } //replaceWith() Object.prototype.replaceWith =function(newElem){  this.outerHTML = arguments[0];  returnthis; } //remove() js自带，省略。

7.设置css类

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

//hasClass() Object.prototype.hasClass =function(cName){  return!!this.className.match(newRegExp("(\\s|^)"+ cName +"(\\s|$)") ); } //addClass() Object.prototype.addClass =function(cName){  if( !this.hasClass( cName ) ){   this.className +=" "+ cName;  }  returnthis; } //removeClass() Object.prototype.removeClass =function(cName){  if(this.hasClass( cName ) ){   this.className =this.className.replace(newRegExp("(\\s|^)"+ cName +"(\\s|$)")," ");  }  returnthis; }

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Object.prototype.hasClass =function(cName){  returnthis.classList.contains(cName) } Object.prototype.addClass =function(cName){  if( !this.hasClass( cName ) ){   this.classList.add(cName);  }  returnthis; } Object.prototype.removeClass =function(cName){  if(this.hasClass( cName ) ){   this.classList.remove(cName);  }  returnthis; }

9.选择器

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

//id或class选择器$("elem") function$(strExpr){  varidExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/;  varclassExpr = /^(?:\s*(<[\w\W]+>)[^>]*|.([\w-]*))$/;  if(idExpr.test(strExpr)){   varidMatch = idExpr.exec(strExpr);   returndocument.getElementById(idMatch[2]);  }elseif(classExpr.test(strExpr)){   varclassMatch = classExpr.exec(strExpr);   varallElement = document.getElementsByTagName("*");   varClassMatch = [];   for(vari=0,l=allElement.length; i<l; i++){    if(allElement[i].className.match(newRegExp("(\\s|^)"+ classMatch[2] +"(\\s|$)") )){     ClassMatch.push(allElement[i]);    }   }   returnClassMatch;  } }

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

1 2 3

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

//siblings() Object.prototype.siblings =function(){  varchid=this.parentNode.children;  vareleMatch = [];  for(vari=0,l=chid.length;i<l;i++){   if(chid[i]!=this){    eleMatch.push(chid[i]);   }  }  returneleMatch; } //children() 原生js已含有该方法，故命名为userChildren。 Object.prototype.userChildren =function(){  varchid=this.childNodes;  vareleMatch = [];  for(vari=0,l=chid.length;i<l;i++){   eleMatch.push(chid[i]);  }  returneleMatch; } //parent() Object.prototype.parent =function(){  returnthis.parentNode; } //next() Object.prototype.next =function(){  returnthis.nextElementSibling; } //prev() Object.prototype.prev =function(){  returnthis.previousElementSibling; }