XPath对象选择器
3.16.1 XPath对象选择器架构说明
XPath、CSS选择器的设计比较复杂，因此笔者这里先给出它的架构说明，如图3-31所示。
1．所有对象获取模式：*!！[全角]
如图3-32所示，本模式相当于是将document. getElementsByTagName(“*”)的结果作为当前的选择器结果。
2．根节点的匹配
正则表达式一：匹配开始的“//”两个字符，字符的前后和中间允许有任意个不可见字符，如图3-33所示。
正则表达式二：匹配开始的“/descendent-or-self::node()/”字符串，其中“/”、“：”、“-”前后允许有任意个不可见字符，如图3-34所示。
3．谓词、伪模式的匹配
带参数模式匹配，匹配not(“[!type!=’text’]”)这样的字符串形式，其中非字母符号之间或前后允许有任意个不可见字符，如图3-35所示。
不带参数模式匹配，匹配“:input”、”:button”这样的字符串形式，其中冒号前后允许有任意个不可见字符，如图3-36所示。
4．一次筛选多个结果并合并在一起
这个模式将匹配“input,select,button”、“#myDivId,button”、“<div><span>”这样的字符串形式，同样，非字母字符之间、前后允许有任意个不可见字符。如图3-37所示。
5．对象和class的缩写形式匹配模式
本模式匹配“div.myClassName/”这样的字符串形式，同样，非字母字符之间、前后允许有任意个不可见字符。如图3-38所示。
6．匹配属性的“有””、“没有”关系
这里匹配“[@class]”或者“[myvalue]”、“[!class]”的字符串形式，同样，非字母字符之间、前后允许有任意个不可见字符。如图3-39所示。
7．匹配属性的关系运算符号
这里匹配属性的比较关系，包括：等于［＝］、不等于［!=或< >］、大于［>］、小于［<］、~=、^=、$=、*=、|=等。关于包含等关系，我们在伪模式里也实现了他们。
匹配的形式如：“[div @styleFloat='left']”或者“[@styleFloat!='left']”，其中“@”和引号可有可无，而非字母字符和值之外的符号之间可以有任意的不可见字符，并且关键字不区分大小写。如图3-40所示。
请参考http://www.w3.org/TR/css3-selectors/#selectors
本节属性选择运算符号的定义，请见表3-3。
表3-3 属性运算符号的定义
做成数组形式的好处是，使用的人员就可以更好的给它扩展、增添更多的基本模式单元。其中，这里的谓词、伪模式匹配单元的函数里使用了下面小节中的定义描述。本书所讲的模式单元定义了如表3-5所示的几种模式。
表3-5 匹配模式说明
如果这里的模式是第一个模式，则默认从当前页面中所有对象【包括文本和注释对象】里进行选择和迭代。
表3-6 谓词、伪模式说明
这里，我们从MSDN中抽取了一些事件的名称，采用一种简便的方式给Object原型增加绑定事件功能的支持，读者请注意，动态绑定事件本身是很耗时间的，那么笔者这里设计的XPath选择器为什么能更快地完成这个动作呢？请看下面的代码：
2．测试用例
XPath、CSS选择器的设计比较复杂，因此笔者这里先给出它的架构说明，如图3-31所示。
 |
| 图3-31 XPath对象选择器架构说明 |
3.16.2 模式匹配函数定义说明
由于我们将处理和正则表达式模式定义在Array里，所以我们使用的都是匿名函数。
// a是初始化的document.all或者上一个模式筛选后的HTML DOM对象Array集合 |
3.16.3 基本正则表达式模式详解
这里，我们的每个模式都不区分大小写，都松散的允许在非关键字之间加任意的空格，这使得我们的匹配筛选更加灵活。另外，我们规定每个模式必须从XPath字符串的开头匹配，不允许有全局的匹配。因此，模式的框架是：
/^\s*(这里是你写的模式)\s*/i |
如图3-32所示，本模式相当于是将document. getElementsByTagName(“*”)的结果作为当前的选择器结果。
2．根节点的匹配
正则表达式一：匹配开始的“//”两个字符，字符的前后和中间允许有任意个不可见字符，如图3-33所示。
 |
| 图3-32 所有对象获取模式：*!！[全角] |
 |
| 图3-33 匹配开头的“//” |
 |
| 图3-34 匹配开头的“/descendent-or-self::node()/” |
带参数模式匹配，匹配not(“[!type!=’text’]”)这样的字符串形式，其中非字母符号之间或前后允许有任意个不可见字符，如图3-35所示。
不带参数模式匹配，匹配“:input”、”:button”这样的字符串形式，其中冒号前后允许有任意个不可见字符，如图3-36所示。
 |
| 图3-35 带参数的谓词、伪模式的匹配模式说明 |
 |
| 图3-36 不带参数的谓词、伪模式的匹配 |
这个模式将匹配“input,select,button”、“#myDivId,button”、“<div><span>”这样的字符串形式，同样，非字母字符之间、前后允许有任意个不可见字符。如图3-37所示。
 |
| 图3-37 一次筛选多个结果并合并在一起 |
本模式匹配“div.myClassName/”这样的字符串形式，同样，非字母字符之间、前后允许有任意个不可见字符。如图3-38所示。
 |
| 图3-38 对象和class的缩写形式匹配模式 |
这里匹配“[@class]”或者“[myvalue]”、“[!class]”的字符串形式，同样，非字母字符之间、前后允许有任意个不可见字符。如图3-39所示。
 |
| 图3-39 匹配属性的“有”、“没有”关系 |
这里匹配属性的比较关系，包括：等于［＝］、不等于［!=或< >］、大于［>］、小于［<］、~=、^=、$=、*=、|=等。关于包含等关系，我们在伪模式里也实现了他们。
匹配的形式如：“[div @styleFloat='left']”或者“[@styleFloat!='left']”，其中“@”和引号可有可无，而非字母字符和值之外的符号之间可以有任意的不可见字符，并且关键字不区分大小写。如图3-40所示。
 |
| 图3-40 匹配属性的关系运算符号 |
3.16.4 可扩展的转义及可扩展模块说明
本节中描述的定义和转义，多是支持可扩展的方式而设计的，这给使用的人员提供了更大的发展、创造的空间。
1．Object.opts操作符号的转义
是的，笔者也打算支持CSS3的相关属性选择器的功能，请看来自W3C的图片，如图3-41所示。
 |
| 图3-41 W3C的CSS3 selectors |
本节属性选择运算符号的定义，请见表3-3。
表3-3 属性运算符号的定义
|
// 操作符号转换 Object.opts = { "=" : "==" // 是否相等的逻辑符号 , "<>" : "!=" // 不等号的转义 , "gt" : ">" // 大于的转义 , "lt" : "<" // 小于的转义 , "eq" : "==" // 等于的转义 , "~=" : function(szParm, szAtt) {// 匹配属性szAtt，以空格分隔的其中一个等于，或者全等于szParm szParm = szParm.toLowerCase(), szAtt = szAtt.toLowerCase(); return szParm == szAtt || -1 < szAtt.split (/\s+/).indexOf(szParm); } , "^=" : function(szParm, szAtt) {// 匹配属性szAtt，以szParm开头的节点 return 0 == szAtt.toLowerCase().indexOf(szParm.toLowerCase()); } , "$=" : function(szParm, szAtt) {// 匹配属性szAtt，以szParm结尾的节点 szParm = szParm.toLowerCase(), szAtt = szAtt.toLowerCase(); return (szAtt.length - szParm.length) == szAtt.lastIndexOf(szParm); } , "*=" : function(szParm, szAtt) {// 匹配属性szAtt，包含szParm的节点 return -1 < szAtt.toLowerCase(). indexOf(szParm.toLowerCase()); } , "|=" : function(szParm, szAtt) {// 匹配属性szAtt以szParm + 【_-】连接符号开始的节点 szParm = szParm.toLowerCase(), szAtt = szAtt.toLowerCase(); return 0 == szAtt.indexOf(szParm + "-") || 0 == szAtt.indexOf(szParm + "_"); } }; |
这里主要定义几个一般人理解的操作符号到程序设计中的代码运算符号的转换，没有定义的，就沿用使用者传递进来的运算符号
|
2．Object.props属性名称的转义
表3-4 属性转义表
|
Object.props = { "for": "htmlFor", "class": "className", "float": Object.styleFloat, cssFloat: Object.styleFloat, styleFloat: Object.styleFloat, Float: Object.styleFloat, innerHTML: "innerHTML", value: "value", readonly: "readOnly", maxlength: "maxLength", tagname:"tagName" }; |
这里我们只定义几个常见的html代码的属性名和javascript中操作HTML DOM时的名字不一致的转义。也就是说，左边代码里冒号前的是html代码中的描述属性，冒号右边是JavaScript操作这个属性时的对应属性名。关于大小写的转换，我们再使用代码来完成。后面的代码解释中有描述。这里就不做更多的讲解了
|
3．Object.RegExps定义基本的模式单元
Object.RegExps = 数组[
数组的每一个单元又是一个数组[ 第一个元素是函数function(当前待过滤的对象数组，本模式匹配的结果)
{ |
表3-5 匹配模式说明
|
匹配的模式举例 |
说 明 | ||||||||||||||
|
/*/ /!/ /！［全角］/ |
匹配当前节点【第一次使用时默认是document.all】下所有对象，包括注释、文本对象，代码中虽然没有支持深度迭代，但是支持了这个模式，其实已经等同于深度迭代了，比如：//div:input，则匹配所有div下的所有输入对象。 后面两个主要匹配当前节点下的注释对象 | ||||||||||||||
|
// /descendent-or-self::node()/ |
这两个模式用在XPath选择字符串的开始位置，用来选择当前页面中的所有对象，包括文本和注释对象，以便进入后面的模式匹配 | ||||||||||||||
|
select,button #myDivId,button <div><span> |
匹配的多个结果合并为一个结果，以便进入下一个筛选。这里的每一个单词可以是TagName或者是id的名称 | ||||||||||||||
|
div.myClassName/ |
匹配当前结果集中的tagName是给定的TagName，有className为给定名称的所有对象。左边的形式是：tagName.className | ||||||||||||||
|
[@class] [myvalue] [4] |
匹配包含了给定属性的所有对象； 或id名称为给定值的对象； 返回结果中的第5个对象，下标是从0开始的，所以4就是第5的意思 | ||||||||||||||
|
[div @styleFloat='left'] [@styleFloat!='left']
|
在当前结果集中匹配指定TagName对象的属性满足表达式情况的所有对象； 或在当前结果集中匹配属性满足表达式情况的所有对象。另外，属性的选择支持CSS3中这样运算符号：
续表
| ||||||||||||||
|
:input :not('[tagName!=button]') :not(:contains('事件')) :get(' > 0 , < 100 ') |
匹配上一个模式结果集中TagName为input、select、textarea、button的所有对象；关于这样的伪模式后面还有详细介绍 | ||||||||||||||
|
/../p |
匹配当前结果集中父对象是指定的TagName的所有对象，左边表示匹配TagName为p的所有对象 | ||||||||||||||
|
|
|
4．Object.mtps谓词、伪模式定义单元
Object.mtps = Object对象{ |
表3-6 谓词、伪模式说明
|
谓词、伪模式名称 |
说 明 |
|
:input |
等于你写这样的模式"input,select,textarea,button"。 匹配当前集合中的所有input、select、textarea、button对象 |
|
:text |
相当于当前集合中的"[@type=text]"模式的选择处理 |
|
: password |
相当于当前集合中的"[@type= password]"模式的选择处理 |
|
: radio |
相当于当前集合中的"[@type= radio]"模式的选择处理 |
|
:checkbox |
相当于当前集合中的"[@type= checkbox]"模式的选择处理 |
|
: submit |
相当于当前集合中的"[@type= submit]"模式的选择处理 |
|
: image |
相当于当前集合中的"[@type= image]"模式的选择处理 |
|
: reset |
相当于当前集合中的"[@type= reset]"模式的选择处理 |
|
: button |
相当于当前集合中的"[@type= button]"模式的选择处理 |
|
: hidden |
相当于当前集合中的"[@type= hidden]"模式的选择处理 |
|
: last |
获取当前集合中的最后一个元素 |
|
:first |
获取当前集合中的第一个元素 |
|
: even |
从匹配的元素集中取序数为偶数的元素，包含第一个元素 |
|
: odd |
从匹配的元素集中取序数为奇数的元素 |
|
:parent : parent(n) |
选择包含有子元素的元素，或者，如果指定为parent(3)则表示选择元素父节点的父节点的父节点，也就是往上３级的节点 |
|
:checked |
选择checked属性为真的元素 |
|
: enabled |
选择enabled属性为真的元素 |
|
:disabled |
选择disabled属性为真的元素 |
|
:empty |
选择没有子元素（包括text节点）的元素 |
|
: not(s) |
将当前集合里符合not模式的元素排除掉，并返回新的集合。这个功能是相当强大的。例如： "#myTestDiv/:input:not( '[tagName!=button]' )" "#myTestDiv/:input:not(:contains('事件'))" |
|
:get(s) :get(n) |
功能更强大的获取方式，s可以是下面形式中的一种，注意，下面说的位置都是从零开始。匹配的形式： 1．3-7或4~8，表示获取第三个到第七个，第四个到第八个，它们都包含三和七，四和八这个位置的对象，这样形式的也可以多对组合； 2．3,6,8或者[3,6,8]，表示你要获取下标为３、６、８的对象。 3．>6&<3，表示，获取下标大于６和小于３的对象,中间可以用"&,;|"来分隔。
使用举例： "#myTestDiv/:input:get(' 2 - 3 ')" "#myTestDiv/:input:get('1, 7,8;9')" "#myTestDiv/:input:get(' > 0 , < 100 '):attct(['value','测试'])" "#myTestDiv/:input:get(' > 7 , < 1 ')" |
续表
|
谓词、伪模式名称 |
说 明 |
|
: gt(n) |
返回序号大于n的对象的集合 |
|
:lt(n) |
返回序号小于n的对象的集合 |
|
: attct(['属性名', '要包含的值']) |
选择所有指定属性含有指定文本的元素 |
|
: contains(s) |
选择所有含有指定文本的元素，主要指text、value、textContent和innerText的内容 |
|
:hide |
返回隐藏的对象，主要指style或者currentStyle里的display或visibility属性的判断是否隐藏 |
|
: visible |
返回style或者currentStyle里的display或visibility属性设置为非“隐藏”的对象集合，当然包括未设置的对象 |
|
:frame |
查找frame和iframe对象，例如： var a = J("//:frame"); // 设置不再对frame和iframe对象进行深度迭代 a.bNs = true; a.each(function() { // 对当前已经打开的页面进行绑定鼠标事件和键盘事件 this.g_bKM = true; }).load(function() { // 在这里绑定鼠标事件 alert(this.g_bKM || 'good') }); |
|
: ecnd(s) |
用参数s中的XPath在当前集合中的每个元素里执行，然后再返回最后的结果集合。例如代码： J("table[class=ecnds] :ecnd('tr:gt(1):even')").each(function() { this.bgColor = 'red'; }); 求当前页面中class等于ecnds的每个table里，从第2行【注意，行下标也是从0开始的】开始，也就是从除开标题行的奇数行TR对象进行迭代，并设置其背景颜色，也就是给当前页面的一些table设置隔行换色的功能 |
3.16.5 选择后的对象集合如何支持HTML事件的动态绑定
这里，我们从MSDN中抽取了一些事件的名称，采用一种简便的方式给Object原型增加绑定事件功能的支持，读者请注意，动态绑定事件本身是很耗时间的，那么笔者这里设计的XPath选择器为什么能更快地完成这个动作呢？请看下面的代码：
new function(){}; |
3.16.6 实现代码及使用举例
1．代码
JavaScript部分代码，请读者多看看其中的注释，这部分的代码将全部移到Jcore.js里，以便后面章节直接使用，请见下面的代码：
// 我们为了让正则表达式工作得更快，因此笔者实现一个方便的 // 正则表达式集中管理和维护， // 这段代码只在这里出现一次，然后就移进Jcore.js里 // 谓词、伪模式定义 // 特别需要注意的是，下面的if判断的模式是要注意顺序的， return aRst; return aRst; // 正则表达式集合,集中写在这里便于扩展 // 匹配: // , /descendent-or-self::node()/，等于document.documentElement,包含html在内的节点 // 匹配: ":input"这种形式的谓词 // 匹配select,button或#myDivId,button或<div><span> // 匹配：../，当前集合的父节点对象的集合 // 匹配：[@class]或者[myvalue]，匹配有指定属性但是却没有指定值对象或nodeName,或ID if(rg.exec(m[1])) // 匹配：[div @styleFloat='left']或者[@styleFloat!='left'] ]; // 功能描述：将当前对象toString或者传入的第一个参数toString或转换为 // 功能描述：将当前对象传递到callback回调函数里执行 // Xpath选择器的设计 |
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><html> function fnTestOnmouseover() "//textarea".XPath()[0].value = "我的测sdf试"; // .each(function(){this.value = "我的测试"});// 统一给筛选出来的对象加事件响应 // 测试函数 --> |
