发一个简单明了的selector~~
最近在看各种selector，~~跟一个朋友【酸辣土豆丝】交流了几次，他总结了下思路，实现了一个简单清楚的selector~~
-----------
/**
author: tudou ~
**/
Selector.js
Array.prototype.each = function(f) { if (f) for (var i = 0; i < this.length; i++) if (f(this)) return;};Array.prototype.all = function(f) { if (f) for (var i = 0; i < this.length; i++) if (!f(this)) return false; return true;};Array.prototype.contains = function(o) { if (this.length <= 0) return false; for (var i = 0; i < this.length; i++) if (this.toString() == o.toString()) return true; return false;}var SF = { nodeOptions: { All: 0, Id: 1, Name: 2, Class: 3, TagName: 4, Mul: 5 }, toArray: function(nodes) { var array = new Array(); for (var i = 0; i < nodes.length; i++) array.push(nodes); return array; }, getOption: function(nodeName) { if (nodeName == "*") return SF.nodeOptions.All; if (/^#[^\s]+$/.test(nodeName)) return SF.nodeOptions.Id; if (/^@[^\s]+$/.test(nodeName)) return SF.nodeOptions.Name; if (/^\.[^\s]+$/.test(nodeName)) return SF.nodeOptions.Class; if (/^[^\s]+\s+[^\s]+$/.test(nodeName)) return SF.nodeOptions.Mul; return SF.nodeOptions.TagName; }, getAllNodes: function(node, outArray) { var nodes = node.childNodes; for (var i = 0; i < nodes.length; i++) { outArray.push(nodes); SF.getAllNodes(nodes, outArray); } }, getNodes: function(rootNode, nodeName) { var outArray = new Array(); var option = SF.getOption(nodeName); if (rootNode == null) rootNode = document.documentElement; if (option == SF.nodeOptions.Name || option == SF.nodeOptions.Class) nodeName = nodeName.substr(1, nodeName.length - 1); switch (option) { case SF.nodeOptions.All: SF.getAllNodes(rootNode, outArray); break; case SF.nodeOptions.Name: if(document.documentElement==rootNode) outArray=SF.toArray(document.getElementsByName(nodeName)); else SF.toArray(document.getElementsByName(nodeName)).each(function(n){ while(n.parentNode) if(n.parentNode==rootNode){outArray.push(n); break;} else n=n.parentNode; }); break; case SF.nodeOptions.Class: var classNodes = new Array(); SF.getAllNodes(rootNode, classNodes); for (var i = 0; i < classNodes.length; i++) if (new RegExp("\\b" + nodeName + "\\b").test(classNodes.className)) outArray.push(classNodes); break; case SF.nodeOptions.TagName: outArray = SF.toArray(rootNode.getElementsByTagName(nodeName)); break; default: throw { message: "第二项应该为多节点!" }; } return outArray; }}function $(element) { if (typeof (element).toLowerCase() != "string") return element; var option = SF.getOption(element); if (option == SF.nodeOptions.Id) return document.getElementById(element.substr(1, element.length - 1)); if (option == SF.nodeOptions.Mul) { var currentNode; var rNode = $(element.match(/^[^\s]+/)); if (!rNode) throw { message: "未找到指定节点!" }; if (rNode.length) { if (rNode.length > 1) throw { message: "前一项,应该为唯一节点!" }; else currentNode = rNode; } else currentNode = rNode; var childName = element.match(/[^\s]+$/); return SF.getNodes(currentNode, childName); } return SF.getNodes(null, element);}
test.html
<html><head><style>input {width:40px;}#container{background:red}</style><script language ="javascript" type="text/javascript"src="Selector.js"></script><script language ="javascript" type="text/javascript" >function Test(){ var r=new Array(); r.push("#A innerHTML:\"" + $("#A").innerHTML+"\"");r.push(".c1 count: \"" + $(".c1").length+"\"");r.push(".c2 count: \"" + $(".c2").length+"\"");r.push("@txt count: \"" + $("@txt").length+"\"");r.push("A count: \"" + $("A").length+"\"");r.push("#container中的 .c2 count: \"" + $("#container .c2").length+"\"");r.push("#container中的 input count: \"" + $("#container input").length+"\"");r.push("#container中的 @txt count: \"" + $("#container @txt").length+"\"");var str="";r.each(function(txt){str+=txt+"<br/>";});$("#pan").innerHTML=str+"<br/><br/><br/>";}</script></head><body><a id="A" class="c1 c2" href="#">A #A .c1 .c2</a><div id="container">#container<br /><a id="A1" class="c2" href="#">A #A1 .c2</a><input name="txt" value="@txt" /><input name="txt" value="@txt" /></div><a id="A2"href="#">A #A2</a><a id="A3" href="#">A #A3</a><input name="txt" value="@txt" /><input name="txt" value="@txt" /><input name="txt" value="@txt" /><br /><input type="button"value="Test"/><div id="pan"></div></body></html>
页:
[1]