`
kimmking
  • 浏览: 547851 次
  • 性别: 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手网站有感
评论
发表评论

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

相关推荐

    Time-Selector-master.zip

    今天我们将深入探讨一个名为"Time-Selector-master"的日期选择控件，它为开发者提供了方便快捷的方式来集成日期选择功能，且具有高度的可扩展性。 "Time-Selector-master"是一个专为项目移植设计的日期选择组件，其...

    GA_feature_selector.zip_GLCM_MATLAB GLCM _feature

    标题中的“GA_feature_selector.zip_GLCM_MATLAB GLCM _feature”表明这是一个关于使用MATLAB进行GLCM（灰度共生矩阵）特征提取的压缩包。GLCM是图像处理中的一个关键概念，全称为Gray Level Co-occurrence Matrix，...

    easy_background:Vanilla JS中极其简单明了的SlideShow Background开发人员

    Vanilla JS中非常轻便，简单明了的SlideShow Background开发人员。 该脚本可以用作数字广告位（图像按定义的时间间隔在屏幕上通过）。 指导： 只需插入： [removed][removed] 并调用easy_background： // ...

    Python库 | cnx-cssselect2-0.2.1.tar.gz

    在这个例子中，我们首先导入了必要的模块，然后创建了一个`ElementSelector`对象，指定CSS选择器为`#content p`，这会选取id为`content`的`div`元素内的所有`p`元素。接着，我们调用`select()`方法获取匹配的元素...

    Swifter-Swift 开发者必备 Tips (第四版).zip

    举一个实际应用时候的例子，在 Selector 一节中，我们提到了在 Swift 中 Selector 只能使用字符串在生成。这面临一个很严重的问题，就是难以重构，并且无法在编译期间进行检查，其实这是十分危险的行为。但是 target...

    swift写的计时器

    7. **用户界面（UI）集成**：一个简单的计时器应用通常会有一个显示时间的界面。SwiftUI或UIKit可以用来创建和更新用户界面。计时器的值会实时更新在界面上，展示给用户。 8. **线程安全**：在多线程环境中，确保...

    JavaScript_一个高级浏览器自动化库.zip

    1. **易用性**：它的API设计简洁明了，使得编写自动化脚本变得简单，例如，`nightmare.goto(url)`用于导航到指定的URL，`nightmare.click(selector)`用于点击匹配选择器的元素。 2. **同步接口**：与许多异步的Node...

    jquery-1.10.2.min.js

    jQuery的核心理念是提供一个简单易用的接口，让开发者可以跨浏览器地进行高效的JavaScript编程，避免了不同浏览器之间的兼容性问题。 二、jQuery 1.10.2.min.js的特性 1. **选择器**：jQuery 1.10.2提供了强大的...

    jquery的经典用法

    本篇文章将深入探讨jQuery的一些经典用法，帮助开发者更好地理解和运用这个强大的工具。 一、选择器（Selectors） jQuery的核心在于其强大的选择器功能，它允许开发者以CSS样式的方式来选取DOM元素。例如： 1. `$(...

    jquery图片冒泡提示效果.rar

    这个描述简单明了，暗示了压缩包内的内容是一个使用jQuery编写的代码示例，它能创建一个图片上的提示框（也称为气泡提示或tooltip）效果，当用户将鼠标光标悬停在图片上时，提示框会像气泡一样从图片下方或旁边弹出...

    Jquery中文版.pdf

    jQuery提供了一个`$.noConflict()`方法，允许在同一个页面上安全地使用其他JavaScript库，解决了命名空间冲突的问题。 ### 10. 学习资源 jQuery社区活跃，有许多在线资源供学习者参考，如官方文档、教程、示例代码...

    struts2和JQuery

    Struts2是一个强大的MVC（Model-View-Controller）框架，而jQuery则是一个流行的JavaScript库，主要用于简化JavaScript的DOM操作、事件处理以及AJAX交互。 首先，让我们深入了解一下Struts2框架。Struts2是由Apache...

    swift-一款简单的菜单按钮可以设置选中状态对应的会改变按钮的图标朝向属于辅助型按钮

    在Swift中，我们可以通过以下方式创建一个自定义按钮： ```swift class JPMenuButton: UIButton { var isSelected = false var selectedIconDirection: UIImage? var normalIconDirection: UIImage? // 初始化...

    Jquery 快速学习

    jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了 JavaScript 的 DOM 操作、事件处理、动画制作和 AJAX 交互。这个库由 John Resig 创建于2006年，旨在提高开发者的生产力，使得编写复杂的 JavaScript 代码变...

    网络应用框架 Netty

    Netty 是一个高性能、异步事件驱动的网络应用程序框架，用于快速开发可维护的高性能协议服务器和客户端。这个框架广泛应用于各种领域，包括分布式系统、云计算、游戏服务器、物联网(IoT)等。Netty 以其高效、稳定和...

    qq右侧悬浮代码

    综上所述，"qq右侧悬浮代码"是一个结合了jQuery和CSS技术的网页组件，它通过简单的API实现了动态效果和多种样式的悬浮元素，为用户提供了一种便捷的交互方式。在使用这个代码时，开发者可以根据项目需求进行定制，...

    javascript与jQuery13章实例.zip

    jQuery 是一个基于JavaScript的库，它的目标是简化JavaScript的使用，尤其是处理DOM操作、事件处理和动画效果。jQuery 的语法简洁明了，使得开发者能够快速实现复杂的网页效果。例如，通过一行简单的代码，jQuery 就...

    JQuery验证框架

    下面是一个简单的示例，演示如何使用JQuery验证框架来验证一个包含姓名和邮箱的表单： ```html &lt;!DOCTYPE html&gt; &lt;title&gt;JQuery验证框架示例 &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt; ...

    jquery学习笔记

    - `.on(event, function)`：当被选元素接收到指定的事件时，执行一个函数。 - `.on("mouseover mouseout", function)`：为多个事件绑定相同的处理函数。 2. **解除绑定事件**： - `.off(event)`：从被选元素移除...

    螺栓：螺栓是一个用PHP编写的简单CMS。 它基于Silex和Symfony组件，使用Twig和SQLite，MySQL或PostgreSQL

    :warning_selector: 注意-不是最新版本这是Bolt 3的存储库。请注意螺栓4已发布。 如果您要开始新项目，请使用以下内容：螺栓在开源下发布...支持有一个问题？ 想聊天？ 遇到问题了吗？ 请参阅我们的页面。发展历程正在

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