`
kimmking
  • 浏览: 538873 次
  • 性别: Icon_minigender_1
  • 来自: 中华大丈夫学院
社区版块
存档分类
最新评论

发一个简单明了的selector~~

JavaScriptprototypeF#HTML 
阅读更多

最近在看各种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>

 

分享到：
| 帮人维护2手网站有感
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics