之前刚好想要简单的模仿jQuery的选择器,今天就刚好学到了,简单点,功能也没有jQuery的完美,实用方便,但是勉强还可以用。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ width: 100px; height: 100px; background-color: pink; margin: 10px; } </style> </head> <body> <div class="dome"></div> <div></div> <div class="test"></div> <div></div> <div class="dome test"></div> <div></div> <div></div> <div></div> <div class="dome"></div> <div></div> <script> $(".dome")[0].style.backgroundColor = "blue"; function $(str){ var s = str.charAt(0); var ss = str.substr(1); switch(s){ case "#": return document.getElementById(ss); break; case ".": return getClass(ss); break; default : return document.getElementsByTagName(ss); } } function getClass(className){ //如果浏览器支持着,则直接返回 if(document.getElementsByClassName){ return document.getElementsByClassName(className); } //不支持的浏览器 var arr = []; var dom = document.getElementsByTagName("*"); for(var i=0; i < dom.length; i++){ // if(dom[i].className == className){ // arr.push(dom[i]); // }i //改进后的class var txt = dom[i].split(" ");//["dome","test"] for(var j=0; j < txt.length; j++){ if(txt[j] == className){ arr.push(dom[i]); } } } return arr; } </script> </body> </html>
原文:http://www.cnblogs.com/jiang-z/p/7482681.html