之前刚好想要简单的模仿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>
js--模仿jQuery的选择器
原文地址:http://www.cnblogs.com/jiang-z/p/7482681.html