原生javascript模擬實現jQuery的id選擇器

antzone發表於2017-03-26
JavaScriptjQuery

本章節介紹一下如何利用原生的javascript程式碼模擬實現jQuery的id選擇器的效果，這個功能在很多龐大的程式碼中還是經常看到的，通過封裝，可以使獲取具有指定id屬性值的元素物件更為輕鬆。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript">  
function $(id){  
  return "string"==typeof id?document.getElementById(id):id;  
}  
window.onload=function(){
  var odiv=$("thediv");
  odiv.style.color="blue";
}
</script>  
</head>  
<body>  
<div id="thediv">螞蟻部落</div>
</body>  
</html>

上面的程式碼實現了封裝效果，當然如果僅僅是一次使用看不出它的方便所在，如果是頻繁的需要獲取具有指定id屬性值的元素物件，那麼這個封裝的便利性就會得到體現。

相關文章