欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生js仿jquery一些常用方法(必看篇)

 更新時間：2016年09月20日 13:04:20   投稿：jingxian  
下面小編就為大家?guī)硪黄鷍s仿jquery一些常用方法(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

最近迷上了原生js，能不用jquery等框架的情況都會手寫一些js方法，記得剛接觸前端的時候為了選擇器而使用jquery。?！，F(xiàn)在利用擴展原型的方法實現(xiàn)一些jquery函數(shù)：

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的好處在于鏈式調(diào)用。

2.滑動 省略speed和callback的傳入，因為要加一串判斷和處理回調(diào)，代碼量大

//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實現(xiàn) 但不兼容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; 
 } 
}

需要強調(diào)的是，選擇器返回的結果或結果集包含的是htmlDOM，并非jquery的對象。大多數(shù)人都知道，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; 
}

jquery事件函數(shù)原生js已有，另外，原生js實現(xiàn)jquery的一個常用函數(shù) ajax 將會在下一篇寫道。

原生js實現(xiàn)ajax方法

以上就是小編為大家?guī)淼脑鷍s仿jquery一些常用方法(必看篇)的全部內(nèi)容了，希望對大家有所幫助，多多支持腳本之家~

相關文章

  • 使用javascript實現(xiàn)ListBox左右全選,單選,多選,全請

    使用javascript實現(xiàn)ListBox左右全選,單選,多選,全請

    使用javascript實現(xiàn)ListBox左右全選,單選,多選,全請。需要的朋友可以過來參考下，希望對大家有所幫助
    2013-11-11
  • js中創(chuàng)建對象的幾種方式示例介紹

    js中創(chuàng)建對象的幾種方式示例介紹

    JavaScript中的所有事物都是對象，本文為大家介紹下JS中創(chuàng)建對象的幾種方式，如原始方法、工廠方法等等
    2014-01-01
  • Javascript函數(shù)式編程簡單介紹

    Javascript函數(shù)式編程簡單介紹

    什么是函數(shù)式編程？根據(jù)百度百科的描述，“函數(shù)式編程是種編程典范，它將電腦運算視為函數(shù)的計算。函數(shù)編程語言最重要的基礎是 λ 演算（lambda calculus）。而且λ演算的函數(shù)可以接受函數(shù)當作輸入（參數(shù)）和輸出（返回值）?！?/div> 2015-10-10
  • 關于js遍歷表格的實例

    關于js遍歷表格的實例

    js可以利用dom非常輕松的就可以遍歷一個表格。當然只要是dom中有的所有對象都可以通過js來訪問和處理
    2013-07-07
  • js中function()使用方法

    js中function()使用方法

    通過函數(shù)對象的性質(zhì)，可以很方便的將一個函數(shù)賦值給一個變量或者將函數(shù)作為參數(shù)傳遞，下面為大家介紹下函數(shù)的使用語法
    2013-12-12
  • 基于Javascript實現(xiàn)的不重復ID的生成器

    基于Javascript實現(xiàn)的不重復ID的生成器

    本文介紹了js生成一個不重復的ID的函數(shù)的進化之路，具有一定的參考價值，需要的朋友一起來看下吧
    2016-12-12
  • JavaScript forEach中return失效問題解決方案

    JavaScript forEach中return失效問題解決方案

    這篇文章主要介紹了JavaScript forEach中return失效問題解決方案,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-06-06
  • JavaScript隨機數(shù)的組合問題案例分析

    JavaScript隨機數(shù)的組合問題案例分析

    這篇文章主要介紹了JavaScript隨機數(shù)的組合問題,結合具體案例形式分析了JavaScript隨機數(shù)的組合問題相關算法原理、實現(xiàn)技巧與注意事項,需要的朋友可以參考下
    2020-05-05
  • js日歷相關函數(shù)使用詳解

    js日歷相關函數(shù)使用詳解

    這篇文章主要為大家詳細介紹了js日歷相關函數(shù)的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-04-04
  • js計算文本框輸入的字符數(shù)

    js計算文本框輸入的字符數(shù)

    這篇文章主要介紹了js計算文本框輸入的字符數(shù)，具有一定的參考價值，感興趣的朋友可以參考一下
    2015-10-10

最新評論