Ext.dom.Query
Element Selectors:(元素选择器)
Ext.core.DomQuery.select('表达式') 返回HTMLElement[]
* any element
Ext.core.DomQuery.select('*') //返回所有dom元素
E an element with the tag E
Ext.core.DomQuery.select('div') //返回所有div元素
E F All descendent elements of E that have the tag F
Ext.core.DomQuery.select('div span') //返回所有div下的span元素 (无限层级 1,2都会匹配)
<div>
<span>1</span>
<p>
<span>2</span>
</p>
</div>
E > F or E/F all direct children elements of E that have the tag F1
Ext.DomQuery.select("div > span") //匹配直接子元素 只向下查询一级(返回1)
<div>
<span>1</span>
<p>
<span>2</span>
</p>
</div>
E + F all elements with the tag F that are immediately preceded by an element with the tag E
Ext.DomQuery.select("div + span") //返回平级的 下面第一个匹配的元素 (444)
E ~ F all elements with the tag F that are preceded by a sibling element with the tag E
Ext.DomQuery.select("div ~ span") //返回平级的 下面所有匹配的元素 (444,666,777,888) 注意不匹配555,只返回平级的
<span id="111"></span>
<div>
<span id="222"></span>
<h1></h1>
<span id="333"></span>
</div>
<span id="444"><span id="555"></span></span>
<span id="666"></span>
<span id="777"></span>
<span id="888"></span>
Attribute Selectors:(属性选择器)
E[foo] has an attribute "foo"
Ext.DomQuery.select('*[foo]') //返回包含foo属性的所有元素(*代表所有DOM元素)
Ext.DomQuery.select('div[foo]') //返回包含foo属性的所有DIV元素
E[foo=bar] has an attribute "foo" that equals "bar"
Ext.DomQuery.select('div[foo=bar]') //返回所有属性foo等于bar的DIV元素
E[foo^=bar] has an attribute "foo" that starts with "bar"
Ext.DomQuery.select('div[foo^=bar]') //返回所有属性foo已bar开头的DIV元素
E[foo$=bar] has an attribute "foo" that ends with "bar"
Ext.DomQuery.select('div[foo$=bar]') //返回所有属性foo已bar结尾的DIV元素
E[foo*=bar] has an attribute "foo" that contains the substring "bar"
Ext.DomQuery.select('div[foo*=bar]') //返回所有属性foo包含bar的DIV元素
E[foo%=2] has an attribute "foo" that is evenly divisible by 2
Ext.DomQuery.select('div[foo%=bar]') //返回所有属性foo能被2整除的DIV元素
E[foo!=bar] attribute "foo" does not equal "bar"
Ext.DomQuery.select('div[foo%=bar]') //返回所有属性foo不等于bar的DIV元素
CSS Value Selectors:(Css选择器)
与属性上面的属性选择器用法一样,只不过这里匹配的是CSS,STYLE
.mydiv {
display: none;
}
<div style="width: 300; display: none;" >22</div>
<div class="myidv"></div>
E{display=none} css value "display" that equals "none"
E{display^=none} css value "display" that starts with "none"
E{display$=none} css value "display" that ends with "none"
E{display*=none} css value "display" that contains the substring "none"
E{display%=2} css value "display" that is evenly divisible by 2
E{display!=none} css value "display" that does not equal "none"
Pseudo Classes:(伪类选择器)
E:first-child E is the first child of its parent
Ext.DomQuery.select('div:first-child') //返回元素E ,并且E是它父元素的下面的第一个子元素
//返回div0 , div1 因为div0的父元素是body 并且它是body在面的第一个元素 ，div1的父元素是div0. 并且他是div0下面的第一个元素
<body>
<div id="0">
<div id="1">
<span id="s1"></span>
<div id="2"></div>
</div>
<span>33</span>
</div>
<div id="3"></div>
</body>
E:last-child E is the last child of its parent
Ext.DomQuery.select('div:last-child') //跟上面的正好相反.是父元素中的最后一个元素
//返回div2,div3
<body>
<div id="0">
<div id="1">
<span id="s1"></span>
<div id="2"></div>
</div>
<span>33</span>
</div>
<div id="3"></div>
</body>
E:nth-child(_n_) E is the _n_th child of its parent (1 based as per the spec)
//Ext.DomQuery.select('div:nth-child(1)') 返回在其父元素中 第N个的E元素 返回 div0,div1,div4
//Ext.DomQuery.select('div:nth-child(2)') 返回div2,div3
<body>
<div id="0">
<div id="1">
<span id="s1"></span>
<div id="2"></div>
</div>
<span>33</span>
</div>
<div id="3">
<div id="4"></div>
</div>
</body>
E:nth-child(odd) E is an odd child of its parent
//与上面类似 返回奇数
E:nth-child(even) E is an even child of its parent
//与上面类似 返回偶数
E:only-child E is the only child of its parent
//Ext.DomQuery.select('div:only-child') 返回父元素当中只有一个元素的E元素,返回div4
<body>
<div id="0">
<div id="1">
<span id="s1"></span>
<div id="2"></div>
</div>
<span>33</span>
</div>
<div id="3">
<div id="4"></div>
</div>
</body>
E:checked E is an element that is has a checked attribute that is true (e.g. a radio or checkbox)
//Ext.DomQuery.select('input:checked') 返回选中的元素 1,2
<input id="1" name="hobby" checked="checked" type="checkbox">
<input id="2" name="hobby" checked="checked" type="checkbox">
<input id="3" name="hobby" type="checkbox">
E:first the first E in the resultset
//返回匹配元素结果集中的第一个元素
E:last the last E in the resultset
//返回匹配元素结果集中的最后一个元素
E:nth(_n_) the _n_th E in the resultset (1 based)
//返回匹配元素结果集中的第N个元素
E:odd shortcut for :nth-child(odd)
//与:nth-child(odd)相同
E:even shortcut for :nth-child(even)
//于:nth-child(even)相同
E:contains(foo) E's innerHTML contains the substring "foo"
//Ext.DomQuery.select('div:contains(foo)') innerHTML 属性中包含foo的E元素, [div#0, div#1, div#2]
<body>
<div id="0">
<div id="1">
<span id="s1"></span>
<div id="2">foo</div>
</div>
<span>33</span>
</div>
<div id="3">
<div id="4"></div>
</div>
<div id="5"></div>
</body>
E:nodeValue(foo) E contains a textNode with a nodeValue that equals "foo"
//Ext.DomQuery.select('div:nodeValue(foo)')//返回值包含一个文本元素,并且值为foo的 div元素 [div#2]
<div id="0">
<div id="1">
foo
<span id="s1"></span>
<div id="2">foo</div>
</div>
<span>33</span>
</div>
<div id="3">
<div id="4"></div>
</div>
<div id="5"></div>
E:not(S) an E element that does not match simple selector S
//Ext.DomQuery.select('div:not([id=3])') (注意红色地方放选择器表达式) 返回id 不等于3的div 返回 [div#0, div#1, div#2, div#4, div#5]
<div id="0">
<div id="1">
<span id="s1"></span>
<div id="2">foo</div>
</div>
<span>33</span>
</div>
<div id="3">
<div id="4"></div>
</div>
<div id="5"></div>
E:has(S) an E element that has a descendent that matches simple selector S
//Ext.DomQuery.select('div:has(span[id=s1])') 返回包含span[id=s1]表达式所匹配元素的 div元素
//返回[div#0, div#1]
<div id="0">
<div id="1">
<span id="s1"></span>
<div id="2">foo</div>
</div>
<span>33</span>
</div>
<div id="3">
<div id="4"></div>
</div>
<div id="5"></div>
E:next(S) an E element whose next sibling matches simple selector S
//Ext.DomQuery.select('div:next(div[id=3])') 返回div元素,并且其平级元素的下一个是div[id=3]所匹配的元素
//匹配 div#1
<body>
<div id="0">
<div id="1">
<span id="s1"></span>
<div id="2">foo</div>
</div>
<span>33</span>
</div>
<div id="3">
<div id="4"></div>
</div>
<div id="5"></div>
</body>
E:prev(S) an E element whose previous sibling matches simple selector S
//Ext.DomQuery.select('div:next(div[id=3])') 返回div元素,并且其平级元素的上一个是div[id=3]所匹配的元素
//匹配div#5
<body>
<div id="0">
<div id="1">
<span id="s1"></span>
<div id="2">foo</div>
</div>
<span>33</span>
</div>
<div id="3">
<div id="4"></div>
</div>
<div id="5"></div>
</body>
E:any(S1|S2|S2) an E element which matches any of the simple selectors S1, S2 or S3
//Ext.DomQuery.select('div:any([id=2]|[id=3]|[id=4])') 或者的关系
E:visible(true) an E element which is deeply visible according to Ext.dom.Element.isVisible
//Ext.DomQuery.select('div:visible(true)') 匹配所有可见的div 返回 [div#0, div#3, div#4, div#5]
<body>
<div id="0">
<div id="1" style="display: none;">
<span id="s1"></span>
<div id="2">foo</div>
</div>
<span>33</span>
</div>
<div id="3">
<div id="4"></div>
</div>
<div id="5"></div>
</body>