最近在看各种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>
分享到:
相关推荐
今天我们将深入探讨一个名为"Time-Selector-master"的日期选择控件,它为开发者提供了方便快捷的方式来集成日期选择功能,且具有高度的可扩展性。 "Time-Selector-master"是一个专为项目移植设计的日期选择组件,其...
标题中的“GA_feature_selector.zip_GLCM_MATLAB GLCM _feature”表明这是一个关于使用MATLAB进行GLCM(灰度共生矩阵)特征提取的压缩包。GLCM是图像处理中的一个关键概念,全称为Gray Level Co-occurrence Matrix,...
Vanilla JS中非常轻便,简单明了的SlideShow Background开发人员。 该脚本可以用作数字广告位(图像按定义的时间间隔在屏幕上通过)。 指导: 只需插入: [removed][removed] 并调用easy_background: // ...
在这个例子中,我们首先导入了必要的模块,然后创建了一个`ElementSelector`对象,指定CSS选择器为`#content p`,这会选取id为`content`的`div`元素内的所有`p`元素。接着,我们调用`select()`方法获取匹配的元素...
举一个实际应用时候的例子,在 Selector 一节中,我们提到了在 Swift 中 Selector 只能使用字符串在生成。这面临一个很严重的问题,就是难以重构,并且无法在编译期间进行检查,其实这是十分危险的行为。但是 target...
7. **用户界面(UI)集成**:一个简单的计时器应用通常会有一个显示时间的界面。SwiftUI或UIKit可以用来创建和更新用户界面。计时器的值会实时更新在界面上,展示给用户。 8. **线程安全**:在多线程环境中,确保...
1. **易用性**:它的API设计简洁明了,使得编写自动化脚本变得简单,例如,`nightmare.goto(url)`用于导航到指定的URL,`nightmare.click(selector)`用于点击匹配选择器的元素。 2. **同步接口**:与许多异步的Node...
jQuery的核心理念是提供一个简单易用的接口,让开发者可以跨浏览器地进行高效的JavaScript编程,避免了不同浏览器之间的兼容性问题。 二、jQuery 1.10.2.min.js的特性 1. **选择器**:jQuery 1.10.2提供了强大的...
本篇文章将深入探讨jQuery的一些经典用法,帮助开发者更好地理解和运用这个强大的工具。 一、选择器(Selectors) jQuery的核心在于其强大的选择器功能,它允许开发者以CSS样式的方式来选取DOM元素。例如: 1. `$(...
这个描述简单明了,暗示了压缩包内的内容是一个使用jQuery编写的代码示例,它能创建一个图片上的提示框(也称为气泡提示或tooltip)效果,当用户将鼠标光标悬停在图片上时,提示框会像气泡一样从图片下方或旁边弹出...
jQuery提供了一个`$.noConflict()`方法,允许在同一个页面上安全地使用其他JavaScript库,解决了命名空间冲突的问题。 ### 10. 学习资源 jQuery社区活跃,有许多在线资源供学习者参考,如官方文档、教程、示例代码...
Struts2是一个强大的MVC(Model-View-Controller)框架,而jQuery则是一个流行的JavaScript库,主要用于简化JavaScript的DOM操作、事件处理以及AJAX交互。 首先,让我们深入了解一下Struts2框架。Struts2是由Apache...
在Swift中,我们可以通过以下方式创建一个自定义按钮: ```swift class JPMenuButton: UIButton { var isSelected = false var selectedIconDirection: UIImage? var normalIconDirection: UIImage? // 初始化...
jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了 JavaScript 的 DOM 操作、事件处理、动画制作和 AJAX 交互。这个库由 John Resig 创建于2006年,旨在提高开发者的生产力,使得编写复杂的 JavaScript 代码变...
Netty 是一个高性能、异步事件驱动的网络应用程序框架,用于快速开发可维护的高性能协议服务器和客户端。这个框架广泛应用于各种领域,包括分布式系统、云计算、游戏服务器、物联网(IoT)等。Netty 以其高效、稳定和...
综上所述,"qq右侧悬浮代码"是一个结合了jQuery和CSS技术的网页组件,它通过简单的API实现了动态效果和多种样式的悬浮元素,为用户提供了一种便捷的交互方式。在使用这个代码时,开发者可以根据项目需求进行定制,...
jQuery 是一个基于JavaScript的库,它的目标是简化JavaScript的使用,尤其是处理DOM操作、事件处理和动画效果。jQuery 的语法简洁明了,使得开发者能够快速实现复杂的网页效果。例如,通过一行简单的代码,jQuery 就...
下面是一个简单的示例,演示如何使用JQuery验证框架来验证一个包含姓名和邮箱的表单: ```html <!DOCTYPE html> <title>JQuery验证框架示例 <script src="js/jquery.min.js"></script> ...
- `.on(event, function)`:当被选元素接收到指定的事件时,执行一个函数。 - `.on("mouseover mouseout", function)`:为多个事件绑定相同的处理函数。 2. **解除绑定事件**: - `.off(event)`:从被选元素移除...
:warning_selector: 注意-不是最新版本这是Bolt 3的存储库。请注意螺栓4已发布。 如果您要开始新项目,请使用以下内容:螺栓在开源下发布...支持有一个问题? 想聊天? 遇到问题了吗? 请参阅我们的页面。发展历程正在