extJS的DomQuery基础

77 阅读 0 评论 51 点赞

我是靠谱客的博主秀丽萝莉，这篇文章主要介绍extJS的DomQuery基础，现在分享给大家，希望可以做个参考。

复制代码

<html>
 <head>
  <script type="text/javascript" src="../js/firebug/firebug.js"></script>
 </head>
 <body>
  <script type="text/javascript" src="../ext/ext-base.js"></script>
  <script type="text/javascript" src="../ext/ext-core.js"></script>
  <script type="text/javascript">
  // 这个查询会返回有两个元素的数组因为查询选中对整个文档的所有span标签。
Ext.query("span"); 
// 这个查询会返回有一个元素的数组因为查询顾及到了foo这个id。
Ext.query("span", "foo");
// 这个查询会返回包含我们foo div一个元素的数组！
Ext.query("#foo");
/*这个查询会返回有一个元素的数组，
包含与之前例子一样的div但是我们使用了class name来获取*/
Ext.query(".foo");
// 这会返回一个数组，包含文档的所有元素。
Ext.query("*");
// 这会返回有一个元素的数组，内容为div标签下的p标签 
Ext.query("div p");
// 这会返回有两个元素的数组，内容为div标签下的span标签 
Ext.query("div span");
// 我们检查出任何存在有class属性的元素。
// 这个查询会返回5个元素的数组。
Ext.query("*[class]"); // 结果： [body#ext-gen2.ext-gecko, div#bar.foo, span.bar, div#foo.bar, span.bar]
// 这会得到class等于“bar”的所有元素
Ext.query("*[class=bar]");
 
// 这会得到class不等于“bar”的所有元素
Ext.query("*[class!=bar]");
 
// 这会得到class从“b”字头开始的所有元素
Ext.query("*[class^=b]");
 
//这会得到class由“r”结尾的所有元素
Ext.query("*[class$=r]");
 
//这会得到在class中抽出“a”字符的所有元素
Ext.query("*[class*=a]");

// 获取所以红色的元素
Ext.query("*{color=red}"); // [div#bar.foo]
 
// 获取所有粉红颜色的并且是有红色子元素的元素
Ext.query("*{color=red} *{color=pink}"); // [span.bar]
 
// 获取所有不是红色文字的元素
Ext.query("*{color!=red}"); // [html, head, script firebug.js, link, body#ext-gen2.ext-gecko, script ext-base.js, script ext-core.js, span.bar, a www.extjs.com, div#foo.bar, p, span.bar, a test.html#]
 
// 获取所有颜色属性是从“yel”开始的元素
Ext.query("*{color^=yel}"); // [a www.extjs.com]
 
// 获取所有颜色属性是以“ow”结束的元素
Ext.query("*{color$=ow}"); // [a www.extjs.com]
 
// 获取所有颜色属性包含“ow”字符的元素
Ext.query("*{color*=ow}"); // [a www.extjs.com, span.bar]
/*
 SPAN元素为其父元素的第一个子元素
*/
Ext.query("span:first-child"); // [span.bar]
 
/*
 A元素为其父元素的最后一个子元素
*/
Ext.query("a:last-child") // [a www.extjs.com, a test.html#]
 
/*
 SPAN元素为其父元素的第2个子元素（由1开始的个数）
*/
Ext.query("span:nth-child(2)") // [span.bar]
 
/*
 TR元素为其父元素的奇数个数的子元素
*/
Ext.query("tr:nth-child(odd)") // [tr, tr]
 
/*
 LI元素为其父元素的奇数个数的子元素
*/
Ext.query("li:nth-child(even)") // [li, li]
 
/*
 返回A元素，A元素为其父元素的唯一子元素
*/
 
Ext.query("a:only-child") // [a test.html#]
 
/*
 返回所有选中的（checked）的INPUT元素
*/
Ext.query("input:checked") // [input#chked on]
 
/*
 返回第一个的TR元素
*/
Ext.query("tr:first") // [tr]
 
/*
 返回最后一个的INPUT元素
*/
Ext.query("input:last") // [input#notChked on]
 
/*
 返回第二个的TD元素
*/
Ext.query("td:nth(2)") // [td]
 
/*
 返回每一个包含“within”字符串的DIV
*/
Ext.query("div:contains(within)") // [div#bar.foo, div#foo.bar]
 
/*
 返回没有包含FORM子元素以外的那些DIV
*/
Ext.query("div:not(form)") [div#bar.foo, div#foo.bar, div]
 
/*
 返回包含有A元素的那些DIV集合
*/
Ext.query("div:has(a)") // [div#bar.foo, div#foo.bar, div]
 
/* 
返回接着会继续有TD的那些TD集合。
尤其一个地方是，如果使用了colspan属性的TD便会忽略
*/
Ext.query("td:next(td)") // [td, td]
 
/*
 返回居前于INPUT元素的那些LABEL元素集合
*/
Ext.query("label:prev(input)") //[label, label]
  
  </script>
  <div id="bar" class="foo" style="color:red; border: 2px dotted red; margin:5px; padding:5px;">
   我是一个div ==> 我的id是bar，我的class是foo
   <span class="bar" style="color:pink;">这里是span元素，外层的div元素有foo的class属性</span>
   <a href="http://www.extjs.com" target="_blank" style="color:yellow;">设置blank＝target的ExtJS链接</a>
  </div>
  <div id="foo" class="bar" style="color:fushia; border: 2px dotted black; margin:5px; padding:5px;">
   这里的id是：foo，这里的class是bar
   <p>“foo” div包围下的p元素。</p>
   <span class="bar" style="color:brown;">这里是一个span元素，外层是div包围着，span还有一个bar的class属性。</span>
   <a href="#" style="color:green;">内置链接</a>
  </div>
  <div style="border:2px dotted pink; margin:5px; padding:5px;">
   <ul>
    <li>条目 #1</li>
    <li>条目 #2</li>
    <li>条目 #3</li>
    <li>条目 #4 带有<a href="#">链接</a></li>
   </ul>
   <table style="border:1px dotted black;">
    <tr style="color:pink">
     <td>第一行，第一列</td>
     <td>第一行，第二列</td>
    </tr>
    <tr style="color:brown">
        <td colspan="2">第二行，已合并单元格！</td>
    </tr>
    <tr>
     <td>第三行，第一列</td>
     <td>第三行，第二列</td>
    </tr> 
   </table>
  </div>
  <div style="border:2px dotted red; margin:5px; padding:5px;">
   <form>
    <input id="chked" type="checkbox" checked/><label for="chked">已点击</label>
    <br /><br />
    <input id="notChked" type="checkbox" /><label for="notChked">not me brotha!</label>
   </form>
  </div>
 </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<html>
 <head>
  <script type="text/javascript" src="../js/firebug/firebug.js"></script>
 </head>
 <body>
  <script type="text/javascript" src="../ext/ext-base.js"></script>
  <script type="text/javascript" src="../ext/ext-core.js"></script>
  <script type="text/javascript">
  // 这个查询会返回有两个元素的数组因为查询选中对整个文档的所有span标签。
Ext.query("span"); 
// 这个查询会返回有一个元素的数组因为查询顾及到了foo这个id。
Ext.query("span", "foo");
// 这个查询会返回包含我们foo div一个元素的数组！
Ext.query("#foo");
/*这个查询会返回有一个元素的数组，
包含与之前例子一样的div但是我们使用了class name来获取*/
Ext.query(".foo");
// 这会返回一个数组，包含文档的所有元素。
Ext.query("*");
// 这会返回有一个元素的数组，内容为div标签下的p标签 
Ext.query("div p");
// 这会返回有两个元素的数组，内容为div标签下的span标签 
Ext.query("div span");
// 我们检查出任何存在有class属性的元素。
// 这个查询会返回5个元素的数组。
Ext.query("*[class]"); // 结果： [body#ext-gen2.ext-gecko, div#bar.foo, span.bar, div#foo.bar, span.bar]
// 这会得到class等于“bar”的所有元素
Ext.query("*[class=bar]");
 
// 这会得到class不等于“bar”的所有元素
Ext.query("*[class!=bar]");
 
// 这会得到class从“b”字头开始的所有元素
Ext.query("*[class^=b]");
 
//这会得到class由“r”结尾的所有元素
Ext.query("*[class$=r]");
 
//这会得到在class中抽出“a”字符的所有元素
Ext.query("*[class*=a]");

// 获取所以红色的元素
Ext.query("*{color=red}"); // [div#bar.foo]
 
// 获取所有粉红颜色的并且是有红色子元素的元素
Ext.query("*{color=red} *{color=pink}"); // [span.bar]
 
// 获取所有不是红色文字的元素
Ext.query("*{color!=red}"); // [html, head, script firebug.js, link, body#ext-gen2.ext-gecko, script ext-base.js, script ext-core.js, span.bar, a www.extjs.com, div#foo.bar, p, span.bar, a test.html#]
 
// 获取所有颜色属性是从“yel”开始的元素
Ext.query("*{color^=yel}"); // [a www.extjs.com]
 
// 获取所有颜色属性是以“ow”结束的元素
Ext.query("*{color$=ow}"); // [a www.extjs.com]
 
// 获取所有颜色属性包含“ow”字符的元素
Ext.query("*{color*=ow}"); // [a www.extjs.com, span.bar]
/*
 SPAN元素为其父元素的第一个子元素
*/
Ext.query("span:first-child"); // [span.bar]
 
/*
 A元素为其父元素的最后一个子元素
*/
Ext.query("a:last-child") // [a www.extjs.com, a test.html#]
 
/*
 SPAN元素为其父元素的第2个子元素（由1开始的个数）
*/
Ext.query("span:nth-child(2)") // [span.bar]
 
/*
 TR元素为其父元素的奇数个数的子元素
*/
Ext.query("tr:nth-child(odd)") // [tr, tr]
 
/*
 LI元素为其父元素的奇数个数的子元素
*/
Ext.query("li:nth-child(even)") // [li, li]
 
/*
 返回A元素，A元素为其父元素的唯一子元素
*/
 
Ext.query("a:only-child") // [a test.html#]
 
/*
 返回所有选中的（checked）的INPUT元素
*/
Ext.query("input:checked") // [input#chked on]
 
/*
 返回第一个的TR元素
*/
Ext.query("tr:first") // [tr]
 
/*
 返回最后一个的INPUT元素
*/
Ext.query("input:last") // [input#notChked on]
 
/*
 返回第二个的TD元素
*/
Ext.query("td:nth(2)") // [td]
 
/*
 返回每一个包含“within”字符串的DIV
*/
Ext.query("div:contains(within)") // [div#bar.foo, div#foo.bar]
 
/*
 返回没有包含FORM子元素以外的那些DIV
*/
Ext.query("div:not(form)") [div#bar.foo, div#foo.bar, div]
 
/*
 返回包含有A元素的那些DIV集合
*/
Ext.query("div:has(a)") // [div#bar.foo, div#foo.bar, div]
 
/* 
返回接着会继续有TD的那些TD集合。
尤其一个地方是，如果使用了colspan属性的TD便会忽略
*/
Ext.query("td:next(td)") // [td, td]
 
/*
 返回居前于INPUT元素的那些LABEL元素集合
*/
Ext.query("label:prev(input)") //[label, label]
  
  </script>
  <div id="bar" class="foo" style="color:red; border: 2px dotted red; margin:5px; padding:5px;">
   我是一个div ==> 我的id是bar，我的class是foo
   <span class="bar" style="color:pink;">这里是span元素，外层的div元素有foo的class属性</span>
   <a href="http://www.extjs.com" target="_blank" style="color:yellow;">设置blank＝target的ExtJS链接</a>
  </div>
  <div id="foo" class="bar" style="color:fushia; border: 2px dotted black; margin:5px; padding:5px;">
   这里的id是：foo，这里的class是bar
   <p>“foo” div包围下的p元素。</p>
   <span class="bar" style="color:brown;">这里是一个span元素，外层是div包围着，span还有一个bar的class属性。</span>
   <a href="#" style="color:green;">内置链接</a>
  </div>
  <div style="border:2px dotted pink; margin:5px; padding:5px;">
   <ul>
    <li>条目 #1</li>
    <li>条目 #2</li>
    <li>条目 #3</li>
    <li>条目 #4 带有<a href="#">链接</a></li>
   </ul>
   <table style="border:1px dotted black;">
    <tr style="color:pink">
     <td>第一行，第一列</td>
     <td>第一行，第二列</td>
    </tr>
    <tr style="color:brown">
        <td colspan="2">第二行，已合并单元格！</td>
    </tr>
    <tr>
     <td>第三行，第一列</td>
     <td>第三行，第二列</td>
    </tr> 
   </table>
  </div>
  <div style="border:2px dotted red; margin:5px; padding:5px;">
   <form>
    <input id="chked" type="checkbox" checked/><label for="chked">已点击</label>
    <br /><br />
    <input id="notChked" type="checkbox" /><label for="notChked">not me brotha!</label>
   </form>
  </div>
 </body>
</html>