原生js仿jquery一些常用方法(必看篇)
最近迷上了原生js，能不用jquery等框架的情况都会手写一些js方法，记得刚接触前端的时候为了选择器而使用jquery。。。现在利用扩展原型的方法实现一些jquery函数：
1.显示/隐藏
//hide()
Object.prototype.hide=function(){
this.style.display="none";
returnthis;
}
//show()
Object.prototype.show=function(){
this.style.display="block";
returnthis;
}
returnthis的好处在于链式调用。
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){
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方法
//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.添加元素
//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.删除/替换元素
//empty()
Object.prototype.empty=function(){
this.innerHTML="";
returnthis;
}
//replaceWith()
Object.prototype.replaceWith=function(newElem){
this.outerHTML=arguments[0];
returnthis;
}
//remove()js自带，省略。
7.设置css类
//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新APIclassList及contains实现但不兼容IE8以下及部分火狐浏览器
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.选择器
//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遍历：
$(".cls").forEach(function(e){
e.css("background","#f6f6f6")
})
10.遍历siblings()和children()获取的结果也需要结合forEach使用
//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;
}
jquery事件函数原生js已有，另外，原生js实现jquery的一个常用函数ajax将会在下一篇写道。
原生js实现ajax方法
以上就是小编为大家带来的原生js仿jquery一些常用方法(必看篇)的全部内容了，希望对大家有所帮助，多多支持毛票票~