Ext.dom.Query

Alternate names

Ext.DomQuery
Ext.core.DomQuery

Files

本类提供了高性能的selector/ XPath的处理,通过查询编译成可重用的功能. 新的伪类和匹配器可以使用插入. 它适用于HTML和XML文档(若传入一个内容节点).

DomQuery支持大部分的CSS3选择器规格 ,以及一些自定义的selectors和基本的XPath.

所有选择,属性过滤器,以及以下的假点可以以任何顺序无限结合. 例如 div.foo:nth-child(odd)[@foo=bar].bar:first 就是个完全有效的选择. 节点过滤器会处理它们出现的任意顺序,所以您可以根据您的文档结构优化您的查询.

元素选择:

  • * 任意元素
  • E 带一个E标签的元素
  • E F E派生的元素中所有带F标签的
  • E > F or E/F E直接子元素中所有带F标签的
  • E + F 带有E标签的元素后跟着的带F标签的所有元素
  • E ~ F 带有E标签的兄弟元素后跟着的带F标签的所有元素

属性选择:

'@'和引用都是可选的. 例如, div[@foo='bar'] 就是个有效的属性选择.

  • E[foo] 拥有一个属性"foo"
  • E[foo=bar] 有一个属性"foo"等价于"bar"
  • E[foo^=bar] 有一个属性"foo"是由"bar"开头的
  • E[foo$=bar] 有一个属性"foo"是以"bar"结尾的
  • E[foo*=bar] 有一个属性"foo"包含子字符串"bar"
  • E[foo%=2] 有一个属性"foo"能被2整除
  • E[foo!=bar] 有一个属性"foo"不等价于"bar"

伪类:

  • E:first-child E是父类的第一个孩子
  • E:last-child E是父类的最后一个孩子
  • E:nth-child(_n_) E是父类的第n个孩子(以1为单位规格)
  • E:nth-child(odd) E是父类的一个奇数孩子
  • E:nth-child(even) E是父类的一个偶数孩子
  • E:only-child E是其父类的唯一孩子
  • E:checked E是一个带有检查真属性的元素(例如:一个radio或checkbox)
  • E:first 结果集中的第一个E
  • E:last 结果集中的最后一个E
  • E:nth(_n_) 结果集中的第n个E(1为基准)
  • E:odd 快捷方式:第n个孩子(奇数位)
  • E:even 快捷方式:第n个孩子(偶数位)
  • E:contains(foo) E的innerHTML中包含子字符串"foo"
  • E:nodeValue(foo) E中包含一个文本节点,且节点值等于“foo”
  • E:not(S) 一个与简单选择符S不匹配的E元素
  • E:has(S) 一个拥有可以与简单选择符S匹配的子集的E元素
  • E:next(S) 下一个兄弟元素是与简单选择符S匹配的E元素
  • E:prev(S) 前一个兄弟元素是与简单选择符S匹配的E元素
  • E:any(S1|S2|S2) 和任意的简单选择符S1, S2 或 S3匹配的E元素

CSS 值选择:

  • E{display=none} css的值"display"等价于"none"
  • E{display^=none} css的值"display" 是以"none"开头的
  • E{display$=none} css的值"display" 是以"none"结尾的
  • E{display*=none} css的值"display" 包含子字符串"none"
  • E{display%=2} css的值"display"是可以被2整除的
  • E{display!=none} css的值"display"不等价于"none"
Defined By

Properties

Ext.dom.Query
: Array

匹配正则表达式和代码片段的集合. 在选择的语句中的每个捕获组中带()将会被指定索引的{}替代.

Defaults to: [{re: /^\.([\w\-\\]+)/, select: "n = byClassName(n, " {1} ");"}, {re: /^\:([\w\-]+)(?:\(((?:[^\s>\/]*|.*?))\))?/, select: "n = byPseudo(n, "{1}", "{2}");"}, {re: /^(?:([\[\{])(?:@)?([\w\-]+)\s?(?:(=|.=)\s?['"]?(.*?)["']?)?[\]\}])/, select: "n = byAttribute(n, "{2}", "{4}", "{3}", "{1}");"}, {re: /^#([\w\-\\]+)/, select: "n = byId(n, "{1}");"}, {re: /^@([\w\-]+)/, select: "return {firstChild:{nodeValue:attrValue(n, "{1}")}};"}]

Ext.dom.Query
: Object
运算符比较的函数集合 默认的运算符有=, !=, ^=, $=, *=, %=, |= and ~=. ...

运算符比较的函数集合 默认的运算符有=, !=, ^=, $=, *=, %=, |= and ~=. 只要匹配格式c=,其中c可以是任何的非空格、>, 或 <等字符, 就可以作为新增的运算符

Ext.dom.Query
: Object

被用于需要过滤选择器的"pseudo class" 过滤函数的对象hash. 每个函数都需要传递两个参数:

  • c : 数组 要过滤的DOM元素数组.

  • v : 字符串 在选择中供应的参数(如果有的话).

一个返回DOM元素数组的符合伪类的过滤器函数. 除了上面列出所提供的伪类,如first-child and nth-child, 开发者可以添加额外的,自定义的伪类过滤器,用于根据应用的特定要求来选择元素.

例如, 为过滤a元素,只要返回链接external resources:

Ext.DomQuery.pseudos.external = function(c, v){
    var r = [], ri = -1;
    for(var i = 0, ci; ci = c[i]; i++){
        // 只有它是链接到外部资源时,才包含在结果集中
        if(ci.hostname != location.hostname){
            r[++ri] = ci;
        }
    }
    return r;
};

那么外部链接可以用下面的语句来收集:

var externalLinks = Ext.select("a:external");
Defined By

Methods

Ext.dom.Query
( String path, [String type] ) : Function

编译一个selector/xpath查询为可重用的函数. 返回的函数带有一个参数“root”(可选),是查询应该开始的上下文节点.

Parameters

  • path : String

    查询的路径

  • type : String (optional)

    一个简单的选择匹配,可以是"select"或"simple"

    Defaults to: "select"

Returns

Ext.dom.Query
( HTMLElement[] el, String selector, Boolean nonMatches ) : HTMLElement[]
过滤一元素数组,使得只包含匹配一个简单选择器的元素 (例如: div.some-class or span:first-child) ...

过滤一元素数组,使得只包含匹配一个简单选择器的元素 (例如: div.some-class or span:first-child)

Parameters

  • el : HTMLElement[]

    一个需要过滤的元素数组

  • selector : String

    需要测试的简单选择器

  • nonMatches : Boolean

    设为真, 则返回没有匹配的元素代替匹配的元素

Returns

  • HTMLElement[]

    匹配选择器的一个DOM元素数组. 若没有匹配的,则返回一个空数组.

Ext.dom.Query
( String/HTMLElement/HTMLElement[] el, String selector ) : Boolean
传递的元素和传递的简单选择器匹配时,返回true (例如: div.some-class or span:first-child) ...

传递的元素和传递的简单选择器匹配时,返回true (例如: div.some-class or span:first-child)

Parameters

  • el : String/HTMLElement/HTMLElement[]

    一个元素的id, 元素或元素数组

  • selector : String

    需要测试的简单选择器

Returns

Ext.dom.Query
( String selector, [HTMLElement/String root] ) : HTMLElement[]

选择只使用JavaScript实现的DOM节点的数组.

使用 select 充分利用支持内置的CSS选择器浏览器的优势.

Parameters

  • selector : String

    查询的选择/路径(可以是逗号分隔的选择列表)

  • root : HTMLElement/String (optional)

    查询的起始点.

    Defaults to: document

Returns

  • HTMLElement[]

    匹配选择的DOM元素数组. 若没有匹配的,则返回一个空数组.

Ext.dom.Query
( String path, [HTMLElement root], [String type] ) : HTMLElement[]
用CSS/XPath选择器选择选择一个DOM节点数组 若浏览器支持,则使用 document.querySelectorAll, 否则回复使用 jsSelect 来工作. ...

用CSS/XPath选择器选择选择一个DOM节点数组

若浏览器支持,则使用 document.querySelectorAll, 否则回复使用 jsSelect 来工作.

别名为 Ext.query.

Parameters

  • path : String

    查询的选择/路径

  • root : HTMLElement (optional)

    查询的起始点

    Defaults to: document

  • type : String (optional)

    一个简单选择器匹配的,可以是"select"或"simple" (只有当jsSelect方法调用时才有效)

    Defaults to: "select"

Returns

  • HTMLElement[]

    一个DOM元素数组(querySelectorAll的返回值,不只是一个NodeList).

Ext.dom.Query
( String selector, [HTMLElement root] ) : HTMLElement

选择一个单一元素.

Parameters

  • selector : String

    查询的选择/路径

  • root : HTMLElement (optional)

    查询的起始点

    Defaults to: document

Returns

  • HTMLElement

    匹配选择的DOM元素

Ext.dom.Query
( String selector, [HTMLElement root], Number defaultValue ) : Number

选择节点的值,并且解析为整型、字符型. 没有特别指定,则返回默认值或0.

Parameters

  • selector : String

    查询的选择/路径

  • root : HTMLElement (optional)

    查询的起始点.

    Defaults to: document

  • defaultValue : Number

    若有指定[defaultValue],当返回值为空时,则返回[defaultValue].

Returns

Ext.dom.Query
( String selector, [HTMLElement root], String defaultValue ) : String

选择一个节点的值,可选的设置为null默认值.

Parameters

  • selector : String

    查询的选择/路径

  • root : HTMLElement (optional)

    查询的起始点.

    Defaults to: document

  • defaultValue : String

    若有指定[defaultValue],当返回值为空时,则返回[defaultValue].

Returns