最近在看各种selector，~~
跟一个朋友【酸辣土豆丝】交流了几次，他总结了下思路，实现了一个简单清楚的selector~~
?
-----------
/**
author: tudou ~
**/
?
?
Selector.js
?
Array.prototype.each = function(f) {
if (f)
for (var i = 0; i < this.length; i++)
if (f(this[i]))
return;
};
Array.prototype.all = function(f) {
if (f)
for (var i = 0; i < this.length; i++)
if (!f(this[i]))
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[i].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[i]);
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[i]);
SF.getAllNodes(nodes[i], 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[i].className))
outArray.push(classNodes[i]);
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]+/)[0]);
if (!rNode)
throw { message: "未找到指定节点!" };
if (rNode.length) {
if (rNode.length > 1)
throw { message: "前一项,应该为唯一节点!" };
else
currentNode = rNode[0];
}
else
currentNode = rNode;
var childName = element.match(/[^\s]+$/)[0];
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" onclick="Test();" value="Test"/>
<div id="pan"></div>
</body>
</html>
?