erichua
- 浏览: 510855 次
- 性别:
- 来自: 远方
-
文章分类
最新评论
-
futoviny：
挺有用的 javax.xml.ws.Holder
CXF学习笔记---让通过参数传递数据 -
zqb666kkk：
能提供下示例demo吗
CXF学习笔记---给CXF加一把锁WS_SECURITY应用 -
hello_world_wdq：
真是坑爹，这能用吗，害我半天时间浪费了
Extjs学习总结---RowExpander 的异步调用 -
ubuntu的疯狂：
第一段代码怎么用？？？？求解释！！弄了很久还是不得结果……
Extjs学习总结---RowExpander 的异步调用 -
107x：
不错，谢谢分享！
[log4j]Slf4j的包冲突
DomQuery基础
DomQuery的select函数有两个参数。第一个是选择符字符（selector string ）而第二个是欲生成查询的标签ID(TAG ID)。本文中我准备使用函数“Ext.query”但读者须谨记它是“Ext.DomQuery.select()”的简写方式。
这是要入手的html：
view plaincopy to clipboardprint?
1. <html>
2. <head>
3. <script type="text/javascript" src="../js/firebug/firebug.js"></script>
4. </head>
5. <body>
6. <script type="text/javascript" src="../ext/ext-base.js"></script>
7. <script type="text/javascript" src="../ext/ext-core.js"></script>
8. <div id="bar" class="foo">
9. I'm a div ==> my id: bar, my class: foo
10. <span class="bar">I'm a span within the div with a foo class</span>
11. <a href="http://www.extjs.com" target="_blank">An ExtJs link</a>
12. </div>
13. <div id="foo" class="bar">
14. my id: foo, my class: bar
15. <p>I'm a P tag within the foo div</p>
16. <span class="bar">I'm a span within the div with a bar class</span>
17. <a href="#">An internal link</a>
18. </div>
19. </body>
20. </hmlt>
<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>
<div id="bar" class="foo">
I'm a div ==> my id: bar, my class: foo
<span class="bar">I'm a span within the div with a foo class</span>
<a href="http://www.extjs.com" target="_blank">An ExtJs link</a>
</div>
<div id="foo" class="bar">
my id: foo, my class: bar
<p>I'm a P tag within the foo div</p>
<span class="bar">I'm a span within the div with a bar class</span>
<a href="#">An internal link</a>
</div>
</body>
</hmlt>
第一部分：元素选择符Selector
假设我想获取文档内所有的“span”标签：
view plaincopy to clipboardprint?
1. // 这个查询会返回有两个元素的数组因为查询选中对整个文档的所有span标签。
2. Ext.query("span");
3. // 这个查询会返回有一个元素的数组因为查询顾及到了foo这个id。
4. Ext.query("span", "foo");注意刚才怎么传入一个普通的字符串作为第一个参数。
5.
6. 按id获取标签，你需要加上“#”的前缀：
7.
8. // 这个查询会返回包含我们foo div一个元素的数组！
9. Ext.query("#foo");按class name获取标签，你需要加上“.”的前缀：
10.
11. /*这个查询会返回有一个元素的数组，
12. 包含与之前例子一样的div但是我们使用了class name来获取*/
13. Ext.query(".foo");你也可以使用关键字“*”来获取所有的元素：
14.
15. // 这会返回一个数组，包含文档的所有元素。
16. Ext.query("*");要获取子标签，我们只须在两个选择符之间插入一个空格：
17.
18. // 这会返回有一个元素的数组，包含p标签的div标签
19. Ext.query("div p");
20. // 这会返回有两个元素的数组，包含span标签的div标签
21. Ext.query("div span");
// 这个查询会返回有两个元素的数组因为查询选中对整个文档的所有span标签。
Ext.query("span");
// 这个查询会返回有一个元素的数组因为查询顾及到了foo这个id。
Ext.query("span", "foo");注意刚才怎么传入一个普通的字符串作为第一个参数。
按id获取标签，你需要加上“#”的前缀：
// 这个查询会返回包含我们foo div一个元素的数组！
Ext.query("#foo");按class name获取标签，你需要加上“.”的前缀：
/*这个查询会返回有一个元素的数组，
包含与之前例子一样的div但是我们使用了class name来获取*/
Ext.query(".foo");你也可以使用关键字“*”来获取所有的元素：
// 这会返回一个数组，包含文档的所有元素。
Ext.query("*");要获取子标签，我们只须在两个选择符之间插入一个空格：
// 这会返回有一个元素的数组，包含p标签的div标签
Ext.query("div p");
// 这会返回有两个元素的数组，包含span标签的div标签
Ext.query("div span");
还有三个的元素选择符，待后续的教程会叙述。 ""
如果朋友你觉得这里说得太简单的话，你可以选择到DomQuery 文档看看，可能会有不少收获:)
第二部分：属性选择符Attributes selectors
这些选择符可让你得到基于一些属性值的元素。属性指的是html元素中的href, id 或 class。
view plaincopy to clipboardprint?
1. // 我们检查出任何存在有class属性的元素。
2. // 这个查询会返回5个元素的数组。
3. Ext.query("*[class]");
4. // 结果： [body#ext-gen2.ext-gecko, div#bar.foo, span.bar, div#foo.bar, span.bar]
5. //现在我们针对特定的class属性进行搜索。
6.
7. // 这会得到class等于“bar”的所有元素
8. Ext.query("*[class=bar]");
9.
10. // 这会得到class不等于“bar”的所有元素
11. Ext.query("*[class!=bar]");
12.
13. // 这会得到class从“b”字头开始的所有元素
14. Ext.query("*[class^=b]");
15.
16. //这会得到class由“r”结尾的所有元素
17. Ext.query("*[class$=r]");
18.
19. //这会得到在class中抽出“a”字符的所有元素
20. Ext.query("*[class*=a]");
// 我们检查出任何存在有class属性的元素。
// 这个查询会返回5个元素的数组。
Ext.query("*[class]");
// 结果： [body#ext-gen2.ext-gecko, div#bar.foo, span.bar, div#foo.bar, span.bar]
//现在我们针对特定的class属性进行搜索。
// 这会得到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]");
第三部分： CSS值元素选择符
这些选择符会匹配DOM元素的style属性。尝试在那份html中加上一些颜色：
view plaincopy to clipboardprint?
1. <html>
2. <head>
3. <script type="text/javascript" src="../js/firebug/firebug.js"></script>
4. </head>
5. <body>
6. <script type="text/javascript" src="../ext/ext-base.js"></script>
7. <script type="text/javascript" src="../ext/ext-core.js"></script>
8. <div id="bar" class="foo" style="color:red;">
9. 我是一个div ==> 我的id是： bar, 我的class: foo
10. <span class="bar" style="color:pink;">
11. I'm a span within the div with a foo class</span>
12. <a href="http://www.extjs.com" target="_blank" style="color:yellow;">
13. An ExtJs link with a blank target!</a>
14. </div>
15. <div id="foo" class="bar" style="color:fushia;">
16. my id: foo, my class: bar
17. <p>I'm a P tag within the foo div</p>
18. <span class="bar" style="color:brown;">
19. I'm a span within the div with a bar class</span>
20. <a href="#" style="color:green;">An internal link</a>
21. </div>
22. </body>
23. </html>
<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>
<div id="bar" class="foo" style="color:red;">
我是一个div ==> 我的id是： bar, 我的class: foo
<span class="bar" style="color:pink;">
I'm a span within the div with a foo class</span>
<a href="http://www.extjs.com" target="_blank" style="color:yellow;">
An ExtJs link with a blank target!</a>
</div>
<div id="foo" class="bar" style="color:fushia;">
my id: foo, my class: bar
<p>I'm a P tag within the foo div</p>
<span class="bar" style="color:brown;">
I'm a span within the div with a bar class</span>
<a href="#" style="color:green;">An internal link</a>
</div>
</body>
</html>
基于这个CSS的颜色值我们不会作任何查询，但可以是其它的内容。它的格式规定是这样的：
元素{属性 操作符 值}
注意我在这里是怎么插入一个不同的括号。
所以，操作符（operators）和属性选择符（attribute selectors）是一样的。
view plaincopy to clipboardprint?
1. // 获取所以红色的元素
2. Ext.query("*{color=red}"); // [div#bar.foo]
3.
4. // 获取所有粉红颜色的并且是有红色子元素的元素
5. Ext.query("*{color=red} *{color=pink}"); // [span.bar]
6.
7. // 获取所有不是红色文字的元素
8. Ext.query("*{color!=red}");
9. // [html, head, script firebug.js, link, body#ext-gen2.ext-gecko,
10. //script ext-base.js, script ext-core.js, span.bar,
11. //div#foo.bar, p, span.bar, a test.html#]
12.
13. // 获取所有颜色属性是从“yel”开始的元素
14. Ext.query("*{color^=yel}");
15.
16. // 获取所有颜色属性是以“ow”结束的元素
17. Ext.query("*{color$=ow}");
18.
19. // 获取所有颜色属性包含“ow”字符的元素
20. Ext.query("*{color*=ow}");
// 获取所以红色的元素
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,
//div#foo.bar, p, span.bar, a test.html#]
// 获取所有颜色属性是从“yel”开始的元素
Ext.query("*{color^=yel}");
// 获取所有颜色属性是以“ow”结束的元素
Ext.query("*{color$=ow}");
// 获取所有颜色属性包含“ow”字符的元素
Ext.query("*{color*=ow}");
第四部分：伪类选择符Pseudo Classes selectors
仍然是刚才的网页，但是有所不同的只是新加上了一个UL元素、一个TABLE元素和一个FORM元素，以便我们可以使用不同的伪类选择符，来获取节点。
view plaincopy to clipboardprint?
1. <html>
2. <head>
3. <script type="text/javascript" src="../js/firebug/firebug.js"></script>
4. </head>
5. <body>
6. <script type="text/javascript" src="../ext/ext-base.js"></script>
7. <script type="text/javascript" src="../ext/ext-core.js"></script>
8. <div id="bar" class="foo" style="color:red;
9. border: 2px dotted red; margin:5px; padding:5px;">
10. I'm a div ==> my id: bar, my class: foo
11. <span class="bar" style="color:pink;">
12. I'm a span within the div with a foo class</span>
13. <a href="http://www.extjs.com" target="_blank" style="color:yellow;">
14. An ExtJs link with a blank target!</a>
15. </div>
16. <div id="foo" class="bar" style="color:fushia;
17. border: 2px dotted black; margin:5px; padding:5px;">
18. my id: foo, my class: bar
19. <p>I'm a P tag within the foo div</p>
20. <span class="bar" style="color:brown;">
21. I'm a span within the div with a bar class</span>
22. <a href="#" style="color:green;">An internal link</a>
23. </div>
24. <div style="border:2px dotted pink; margin:5px; padding:5px;">
25. <ul>
26. <li>Some choice #1</li>
27. <li>Some choice #2</li>
28. <li>Some choice #3</li>
29. <li>Some choice #4 with a <a href="#">link</a></li>
30. </ul>
31. <table style="border:1px dotted black;">
32. <tr style="color:pink">
33. <td>1st row, 1st column</td>
34. <td>1st row, 2nd column</td>
35. </tr>
36. <tr style="color:brown">
37. <td colspan="2">2nd row, colspanned! </td>
38. </tr>
39. <tr>
40. <td>3rd row, 1st column</td>
41. <td>3rd row, 2nd column</td>
42. </tr>
43. </table>
44. </div>
45. <div style="border:2px dotted red; margin:5px; padding:5px;">
46. <form>
47. <input id="chked" type="checkbox" checked/>
48. <label for="chked">I'm checked</label>
49. <br /><br />
50. <input id="notChked" type="checkbox" /><label for="notChked">
51. not me brotha!</label>
52. </form>
53. </div>
54. </body>
55. </html>
<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>
<div id="bar" class="foo" style="color:red;
border: 2px dotted red; margin:5px; padding:5px;">
I'm a div ==> my id: bar, my class: foo
<span class="bar" style="color:pink;">
I'm a span within the div with a foo class</span>
<a href="http://www.extjs.com" target="_blank" style="color:yellow;">
An ExtJs link with a blank target!</a>
</div>
<div id="foo" class="bar" style="color:fushia;
border: 2px dotted black; margin:5px; padding:5px;">
my id: foo, my class: bar
<p>I'm a P tag within the foo div</p>
<span class="bar" style="color:brown;">
I'm a span within the div with a bar class</span>
<a href="#" style="color:green;">An internal link</a>
</div>
<div style="border:2px dotted pink; margin:5px; padding:5px;">
<ul>
<li>Some choice #1</li>
<li>Some choice #2</li>
<li>Some choice #3</li>
<li>Some choice #4 with a <a href="#">link</a></li>
</ul>
<table style="border:1px dotted black;">
<tr style="color:pink">
<td>1st row, 1st column</td>
<td>1st row, 2nd column</td>
</tr>
<tr style="color:brown">
<td colspan="2">2nd row, colspanned! </td>
</tr>
<tr>
<td>3rd row, 1st column</td>
<td>3rd row, 2nd column</td>
</tr>
</table>
</div>
<div style="border:2px dotted red; margin:5px; padding:5px;">
<form>
<input id="chked" type="checkbox" checked/>
<label for="chked">I'm checked</label>
<br /><br />
<input id="notChked" type="checkbox" /><label for="notChked">
not me brotha!</label>
</form>
</div>
</body>
</html>
off we go:
view plaincopy to clipboardprint?
1. /*
2. this one gives us the first SPAN child of its parent
3. */
4. Ext.query("span:first-child"); // [span.bar]
5.
6. /*
7. this one gives us the last A child of its parent
8. */
9. Ext.query("a:last-child") // [a, a test.html#]
10.
11. /*
12. this one gives us the second SPAN child of its parent
13. */
14. Ext.query("span:nth-child(2)") // [span.bar]
15.
16. /*
17. this one gives us ODD TR of its parents
18. */
19. Ext.query("tr:nth-child(odd)") // [tr, tr]
20.
21. /*
22. this one gives us even LI of its parents
23. */
24. Ext.query("li:nth-child(even)") // [li, li]
25.
26. /*
27. this one gives us A that are the only child of its parents
28. */
29.
30. Ext.query("a:only-child") // [a test.html#]
31.
32. /*
33. this one gives us the checked INPUT
34. */
35. Ext.query("input:checked") // [input#chked on]
36.
37. /*
38. this one gives us the first TR
39. */
40. Ext.query("tr:first") // [tr]
41.
42. /*
43. this one gives us the last INPUT
44. */
45. Ext.query("input:last") // [input#notChked on]
46.
47. /*
48. this one gives us the 2nd TD
49. */
50. Ext.query("td:nth(2)") // [td]
51.
52. /*
53. this one gives us every DIV that has the "within" string
54. */
55. Ext.query("div:contains(within)") // [div#bar.foo, div#foo.bar]
56.
57. /*
58. this one gives us every DIV that doesn't have a FORM child
59. */
60. Ext.query("div:not(form)") [div#bar.foo, div#foo.bar, div]
61.
62. /*
63. This one gives use every DIV that has an A child
64. */
65. Ext.query("div:has(a)") // [div#bar.foo, div#foo.bar, div]
66.
67. /*
68. this one gives us every TD that is followed by another TD.
69. obviously, the one that has a colspan property is ignored.
70. */
71. Ext.query("td:next(td)") // [td, td]
72.
73. /*
74. this one gives us every LABEL that is preceded by an INPUT
75. */
76. Ext.query("label:prev(input)") //[label, label]
/*
this one gives us the first SPAN child of its parent
*/
Ext.query("span:first-child"); // [span.bar]
/*
this one gives us the last A child of its parent
*/
Ext.query("a:last-child") // [a, a test.html#]
/*
this one gives us the second SPAN child of its parent
*/
Ext.query("span:nth-child(2)") // [span.bar]
/*
this one gives us ODD TR of its parents
*/
Ext.query("tr:nth-child(odd)") // [tr, tr]
/*
this one gives us even LI of its parents
*/
Ext.query("li:nth-child(even)") // [li, li]
/*
this one gives us A that are the only child of its parents
*/
Ext.query("a:only-child") // [a test.html#]
/*
this one gives us the checked INPUT
*/
Ext.query("input:checked") // [input#chked on]
/*
this one gives us the first TR
*/
Ext.query("tr:first") // [tr]
/*
this one gives us the last INPUT
*/
Ext.query("input:last") // [input#notChked on]
/*
this one gives us the 2nd TD
*/
Ext.query("td:nth(2)") // [td]
/*
this one gives us every DIV that has the "within" string
*/
Ext.query("div:contains(within)") // [div#bar.foo, div#foo.bar]
/*
this one gives us every DIV that doesn't have a FORM child
*/
Ext.query("div:not(form)") [div#bar.foo, div#foo.bar, div]
/*
This one gives use every DIV that has an A child
*/
Ext.query("div:has(a)") // [div#bar.foo, div#foo.bar, div]
/*
this one gives us every TD that is followed by another TD.
obviously, the one that has a colspan property is ignored.
*/
Ext.query("td:next(td)") // [td, td]
/*
this one gives us every LABEL that is preceded by an INPUT
*/
Ext.query("label:prev(input)") //[label, label]
总结
API依然最重要的资讯来源。本篇教程做的仅仅是拿一张现实中的网页示范了一些结果。
如读者已了解过API的DomQuery内容,可跳过本文，直接阅读 DomQuery advanced tutorial!
译者姓名：Frank
译者博客：http://www.ajaxjs.com/blog/
DomQuery的select函数有两个参数。第一个是选择符字符（selector string ）而第二个是欲生成查询的标签ID(TAG ID)。本文中我准备使用函数“Ext.query”但读者须谨记它是“Ext.DomQuery.select()”的简写方式。
这是要入手的html：
view plaincopy to clipboardprint?
1. <html>
2. <head>
3. <script type="text/javascript" src="../js/firebug/firebug.js"></script>
4. </head>
5. <body>
6. <script type="text/javascript" src="../ext/ext-base.js"></script>
7. <script type="text/javascript" src="../ext/ext-core.js"></script>
8. <div id="bar" class="foo">
9. I'm a div ==> my id: bar, my class: foo
10. <span class="bar">I'm a span within the div with a foo class</span>
11. <a href="http://www.extjs.com" target="_blank">An ExtJs link</a>
12. </div>
13. <div id="foo" class="bar">
14. my id: foo, my class: bar
15. <p>I'm a P tag within the foo div</p>
16. <span class="bar">I'm a span within the div with a bar class</span>
17. <a href="#">An internal link</a>
18. </div>
19. </body>
20. </hmlt>
<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>
<div id="bar" class="foo">
I'm a div ==> my id: bar, my class: foo
<span class="bar">I'm a span within the div with a foo class</span>
<a href="http://www.extjs.com" target="_blank">An ExtJs link</a>
</div>
<div id="foo" class="bar">
my id: foo, my class: bar
<p>I'm a P tag within the foo div</p>
<span class="bar">I'm a span within the div with a bar class</span>
<a href="#">An internal link</a>
</div>
</body>
</hmlt>
第一部分：元素选择符Selector
假设我想获取文档内所有的“span”标签：
view plaincopy to clipboardprint?
1. // 这个查询会返回有两个元素的数组因为查询选中对整个文档的所有span标签。
2. Ext.query("span");
3. // 这个查询会返回有一个元素的数组因为查询顾及到了foo这个id。
4. Ext.query("span", "foo");注意刚才怎么传入一个普通的字符串作为第一个参数。
5.
6. 按id获取标签，你需要加上“#”的前缀：
7.
8. // 这个查询会返回包含我们foo div一个元素的数组！
9. Ext.query("#foo");按class name获取标签，你需要加上“.”的前缀：
10.
11. /*这个查询会返回有一个元素的数组，
12. 包含与之前例子一样的div但是我们使用了class name来获取*/
13. Ext.query(".foo");你也可以使用关键字“*”来获取所有的元素：
14.
15. // 这会返回一个数组，包含文档的所有元素。
16. Ext.query("*");要获取子标签，我们只须在两个选择符之间插入一个空格：
17.
18. // 这会返回有一个元素的数组，包含p标签的div标签
19. Ext.query("div p");
20. // 这会返回有两个元素的数组，包含span标签的div标签
21. Ext.query("div span");
// 这个查询会返回有两个元素的数组因为查询选中对整个文档的所有span标签。
Ext.query("span");
// 这个查询会返回有一个元素的数组因为查询顾及到了foo这个id。
Ext.query("span", "foo");注意刚才怎么传入一个普通的字符串作为第一个参数。
按id获取标签，你需要加上“#”的前缀：
// 这个查询会返回包含我们foo div一个元素的数组！
Ext.query("#foo");按class name获取标签，你需要加上“.”的前缀：
/*这个查询会返回有一个元素的数组，
包含与之前例子一样的div但是我们使用了class name来获取*/
Ext.query(".foo");你也可以使用关键字“*”来获取所有的元素：
// 这会返回一个数组，包含文档的所有元素。
Ext.query("*");要获取子标签，我们只须在两个选择符之间插入一个空格：
// 这会返回有一个元素的数组，包含p标签的div标签
Ext.query("div p");
// 这会返回有两个元素的数组，包含span标签的div标签
Ext.query("div span");
还有三个的元素选择符，待后续的教程会叙述。 ""
如果朋友你觉得这里说得太简单的话，你可以选择到DomQuery 文档看看，可能会有不少收获:)
第二部分：属性选择符Attributes selectors
这些选择符可让你得到基于一些属性值的元素。属性指的是html元素中的href, id 或 class。
view plaincopy to clipboardprint?
1. // 我们检查出任何存在有class属性的元素。
2. // 这个查询会返回5个元素的数组。
3. Ext.query("*[class]");
4. // 结果： [body#ext-gen2.ext-gecko, div#bar.foo, span.bar, div#foo.bar, span.bar]
5. //现在我们针对特定的class属性进行搜索。
6.
7. // 这会得到class等于“bar”的所有元素
8. Ext.query("*[class=bar]");
9.
10. // 这会得到class不等于“bar”的所有元素
11. Ext.query("*[class!=bar]");
12.
13. // 这会得到class从“b”字头开始的所有元素
14. Ext.query("*[class^=b]");
15.
16. //这会得到class由“r”结尾的所有元素
17. Ext.query("*[class$=r]");
18.
19. //这会得到在class中抽出“a”字符的所有元素
20. Ext.query("*[class*=a]");
// 我们检查出任何存在有class属性的元素。
// 这个查询会返回5个元素的数组。
Ext.query("*[class]");
// 结果： [body#ext-gen2.ext-gecko, div#bar.foo, span.bar, div#foo.bar, span.bar]
//现在我们针对特定的class属性进行搜索。
// 这会得到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]");
第三部分： CSS值元素选择符
这些选择符会匹配DOM元素的style属性。尝试在那份html中加上一些颜色：
view plaincopy to clipboardprint?
1. <html>
2. <head>
3. <script type="text/javascript" src="../js/firebug/firebug.js"></script>
4. </head>
5. <body>
6. <script type="text/javascript" src="../ext/ext-base.js"></script>
7. <script type="text/javascript" src="../ext/ext-core.js"></script>
8. <div id="bar" class="foo" style="color:red;">
9. 我是一个div ==> 我的id是： bar, 我的class: foo
10. <span class="bar" style="color:pink;">
11. I'm a span within the div with a foo class</span>
12. <a href="http://www.extjs.com" target="_blank" style="color:yellow;">
13. An ExtJs link with a blank target!</a>
14. </div>
15. <div id="foo" class="bar" style="color:fushia;">
16. my id: foo, my class: bar
17. <p>I'm a P tag within the foo div</p>
18. <span class="bar" style="color:brown;">
19. I'm a span within the div with a bar class</span>
20. <a href="#" style="color:green;">An internal link</a>
21. </div>
22. </body>
23. </html>
<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>
<div id="bar" class="foo" style="color:red;">
我是一个div ==> 我的id是： bar, 我的class: foo
<span class="bar" style="color:pink;">
I'm a span within the div with a foo class</span>
<a href="http://www.extjs.com" target="_blank" style="color:yellow;">
An ExtJs link with a blank target!</a>
</div>
<div id="foo" class="bar" style="color:fushia;">
my id: foo, my class: bar
<p>I'm a P tag within the foo div</p>
<span class="bar" style="color:brown;">
I'm a span within the div with a bar class</span>
<a href="#" style="color:green;">An internal link</a>
</div>
</body>
</html>
基于这个CSS的颜色值我们不会作任何查询，但可以是其它的内容。它的格式规定是这样的：
元素{属性 操作符 值}
注意我在这里是怎么插入一个不同的括号。
所以，操作符（operators）和属性选择符（attribute selectors）是一样的。
view plaincopy to clipboardprint?
1. // 获取所以红色的元素
2. Ext.query("*{color=red}"); // [div#bar.foo]
3.
4. // 获取所有粉红颜色的并且是有红色子元素的元素
5. Ext.query("*{color=red} *{color=pink}"); // [span.bar]
6.
7. // 获取所有不是红色文字的元素
8. Ext.query("*{color!=red}");
9. // [html, head, script firebug.js, link, body#ext-gen2.ext-gecko,
10. //script ext-base.js, script ext-core.js, span.bar,
11. //div#foo.bar, p, span.bar, a test.html#]
12.
13. // 获取所有颜色属性是从“yel”开始的元素
14. Ext.query("*{color^=yel}");
15.
16. // 获取所有颜色属性是以“ow”结束的元素
17. Ext.query("*{color$=ow}");
18.
19. // 获取所有颜色属性包含“ow”字符的元素
20. Ext.query("*{color*=ow}");
// 获取所以红色的元素
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,
//div#foo.bar, p, span.bar, a test.html#]
// 获取所有颜色属性是从“yel”开始的元素
Ext.query("*{color^=yel}");
// 获取所有颜色属性是以“ow”结束的元素
Ext.query("*{color$=ow}");
// 获取所有颜色属性包含“ow”字符的元素
Ext.query("*{color*=ow}");
第四部分：伪类选择符Pseudo Classes selectors
仍然是刚才的网页，但是有所不同的只是新加上了一个UL元素、一个TABLE元素和一个FORM元素，以便我们可以使用不同的伪类选择符，来获取节点。
view plaincopy to clipboardprint?
1. <html>
2. <head>
3. <script type="text/javascript" src="../js/firebug/firebug.js"></script>
4. </head>
5. <body>
6. <script type="text/javascript" src="../ext/ext-base.js"></script>
7. <script type="text/javascript" src="../ext/ext-core.js"></script>
8. <div id="bar" class="foo" style="color:red;
9. border: 2px dotted red; margin:5px; padding:5px;">
10. I'm a div ==> my id: bar, my class: foo
11. <span class="bar" style="color:pink;">
12. I'm a span within the div with a foo class</span>
13. <a href="http://www.extjs.com" target="_blank" style="color:yellow;">
14. An ExtJs link with a blank target!</a>
15. </div>
16. <div id="foo" class="bar" style="color:fushia;
17. border: 2px dotted black; margin:5px; padding:5px;">
18. my id: foo, my class: bar
19. <p>I'm a P tag within the foo div</p>
20. <span class="bar" style="color:brown;">
21. I'm a span within the div with a bar class</span>
22. <a href="#" style="color:green;">An internal link</a>
23. </div>
24. <div style="border:2px dotted pink; margin:5px; padding:5px;">
25. <ul>
26. <li>Some choice #1</li>
27. <li>Some choice #2</li>
28. <li>Some choice #3</li>
29. <li>Some choice #4 with a <a href="#">link</a></li>
30. </ul>
31. <table style="border:1px dotted black;">
32. <tr style="color:pink">
33. <td>1st row, 1st column</td>
34. <td>1st row, 2nd column</td>
35. </tr>
36. <tr style="color:brown">
37. <td colspan="2">2nd row, colspanned! </td>
38. </tr>
39. <tr>
40. <td>3rd row, 1st column</td>
41. <td>3rd row, 2nd column</td>
42. </tr>
43. </table>
44. </div>
45. <div style="border:2px dotted red; margin:5px; padding:5px;">
46. <form>
47. <input id="chked" type="checkbox" checked/>
48. <label for="chked">I'm checked</label>
49. <br /><br />
50. <input id="notChked" type="checkbox" /><label for="notChked">
51. not me brotha!</label>
52. </form>
53. </div>
54. </body>
55. </html>
<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>
<div id="bar" class="foo" style="color:red;
border: 2px dotted red; margin:5px; padding:5px;">
I'm a div ==> my id: bar, my class: foo
<span class="bar" style="color:pink;">
I'm a span within the div with a foo class</span>
<a href="http://www.extjs.com" target="_blank" style="color:yellow;">
An ExtJs link with a blank target!</a>
</div>
<div id="foo" class="bar" style="color:fushia;
border: 2px dotted black; margin:5px; padding:5px;">
my id: foo, my class: bar
<p>I'm a P tag within the foo div</p>
<span class="bar" style="color:brown;">
I'm a span within the div with a bar class</span>
<a href="#" style="color:green;">An internal link</a>
</div>
<div style="border:2px dotted pink; margin:5px; padding:5px;">
<ul>
<li>Some choice #1</li>
<li>Some choice #2</li>
<li>Some choice #3</li>
<li>Some choice #4 with a <a href="#">link</a></li>
</ul>
<table style="border:1px dotted black;">
<tr style="color:pink">
<td>1st row, 1st column</td>
<td>1st row, 2nd column</td>
</tr>
<tr style="color:brown">
<td colspan="2">2nd row, colspanned! </td>
</tr>
<tr>
<td>3rd row, 1st column</td>
<td>3rd row, 2nd column</td>
</tr>
</table>
</div>
<div style="border:2px dotted red; margin:5px; padding:5px;">
<form>
<input id="chked" type="checkbox" checked/>
<label for="chked">I'm checked</label>
<br /><br />
<input id="notChked" type="checkbox" /><label for="notChked">
not me brotha!</label>
</form>
</div>
</body>
</html>
off we go:
view plaincopy to clipboardprint?
1. /*
2. this one gives us the first SPAN child of its parent
3. */
4. Ext.query("span:first-child"); // [span.bar]
5.
6. /*
7. this one gives us the last A child of its parent
8. */
9. Ext.query("a:last-child") // [a, a test.html#]
10.
11. /*
12. this one gives us the second SPAN child of its parent
13. */
14. Ext.query("span:nth-child(2)") // [span.bar]
15.
16. /*
17. this one gives us ODD TR of its parents
18. */
19. Ext.query("tr:nth-child(odd)") // [tr, tr]
20.
21. /*
22. this one gives us even LI of its parents
23. */
24. Ext.query("li:nth-child(even)") // [li, li]
25.
26. /*
27. this one gives us A that are the only child of its parents
28. */
29.
30. Ext.query("a:only-child") // [a test.html#]
31.
32. /*
33. this one gives us the checked INPUT
34. */
35. Ext.query("input:checked") // [input#chked on]
36.
37. /*
38. this one gives us the first TR
39. */
40. Ext.query("tr:first") // [tr]
41.
42. /*
43. this one gives us the last INPUT
44. */
45. Ext.query("input:last") // [input#notChked on]
46.
47. /*
48. this one gives us the 2nd TD
49. */
50. Ext.query("td:nth(2)") // [td]
51.
52. /*
53. this one gives us every DIV that has the "within" string
54. */
55. Ext.query("div:contains(within)") // [div#bar.foo, div#foo.bar]
56.
57. /*
58. this one gives us every DIV that doesn't have a FORM child
59. */
60. Ext.query("div:not(form)") [div#bar.foo, div#foo.bar, div]
61.
62. /*
63. This one gives use every DIV that has an A child
64. */
65. Ext.query("div:has(a)") // [div#bar.foo, div#foo.bar, div]
66.
67. /*
68. this one gives us every TD that is followed by another TD.
69. obviously, the one that has a colspan property is ignored.
70. */
71. Ext.query("td:next(td)") // [td, td]
72.
73. /*
74. this one gives us every LABEL that is preceded by an INPUT
75. */
76. Ext.query("label:prev(input)") //[label, label]
/*
this one gives us the first SPAN child of its parent
*/
Ext.query("span:first-child"); // [span.bar]
/*
this one gives us the last A child of its parent
*/
Ext.query("a:last-child") // [a, a test.html#]
/*
this one gives us the second SPAN child of its parent
*/
Ext.query("span:nth-child(2)") // [span.bar]
/*
this one gives us ODD TR of its parents
*/
Ext.query("tr:nth-child(odd)") // [tr, tr]
/*
this one gives us even LI of its parents
*/
Ext.query("li:nth-child(even)") // [li, li]
/*
this one gives us A that are the only child of its parents
*/
Ext.query("a:only-child") // [a test.html#]
/*
this one gives us the checked INPUT
*/
Ext.query("input:checked") // [input#chked on]
/*
this one gives us the first TR
*/
Ext.query("tr:first") // [tr]
/*
this one gives us the last INPUT
*/
Ext.query("input:last") // [input#notChked on]
/*
this one gives us the 2nd TD
*/
Ext.query("td:nth(2)") // [td]
/*
this one gives us every DIV that has the "within" string
*/
Ext.query("div:contains(within)") // [div#bar.foo, div#foo.bar]
/*
this one gives us every DIV that doesn't have a FORM child
*/
Ext.query("div:not(form)") [div#bar.foo, div#foo.bar, div]
/*
This one gives use every DIV that has an A child
*/
Ext.query("div:has(a)") // [div#bar.foo, div#foo.bar, div]
/*
this one gives us every TD that is followed by another TD.
obviously, the one that has a colspan property is ignored.
*/
Ext.query("td:next(td)") // [td, td]
/*
this one gives us every LABEL that is preceded by an INPUT
*/
Ext.query("label:prev(input)") //[label, label]
总结
API依然最重要的资讯来源。本篇教程做的仅仅是拿一张现实中的网页示范了一些结果。
如读者已了解过API的DomQuery内容,可跳过本文，直接阅读 DomQuery advanced tutorial!
译者姓名：Frank
译者博客：http://www.ajaxjs.com/blog/
分享到：
发表评论
-
Extjs学习总结---RowExpander 的异步调用
2009-12-23 03:24 10878RowExpander是Extjs中grid的一个插件，可以在 ... -
Extjs学习总结---Date的处理
2009-12-01 02:31 4486Extjs中时间的处理做的相当的完善，但使用过程中一定要注意匹 ... -
Extjs学习总结---Ext JS Designer最新界面设计器
2009-10-17 05:54 7356最新的Ext JS Designer已经提供了，功能有不少增加 ... -
Extjs 3.0 beta 放出
2009-04-08 12:10 1088http://extjs.com/products/ext ... -
Extjs学习总结---NumberField自动加comma
2009-03-28 08:23 5004让20000.00 变为20，00.00 听说3.0已经实现 ... -
Extjs学习总结---NumberField不自动截取00
2009-03-05 06:38 4998Extjs中的NumberField非常好用但总是不能容忍00 ... -
Extjs学习总结---Ext.query的类Jquery$(selector)的实现
2009-03-04 07:19 5290Jquery最大的一个优点就是简单快捷的JQuery操作。 其 ... -
aptana 1.2.1.020234破解
2008-12-18 04:05 1221aptana 1.2.1.020234破解文件http://d ... -
Extjs--show一下我们刚做的extjs前台架构
2008-12-16 05:49 2140第一张 list 第二张 detail 第三张 一体图 ... -
Extjs学习总结---checkbox的focus解决
2008-09-27 06:46 9101Extjs中的checkbox无法获得焦点。通过重载可以解决这 ... -
Extjs学习总结---FieldSet中的布局
2008-09-27 05:52 17462程序中的布局要求一向很高。Extjs中的fieldset是一个 ... -
Extjs学习总结---Ext.i18n
2008-09-26 01:07 2649一直在研究国际化的问题，但如果用html一直没有很好的解决。最 ... -
Extjs学习总结---Ext.Grid回车控制
2008-08-30 02:44 7418原先的EditGrid无法解决回车控制问题，它的回车控制是向下 ... -
Extjs学习总结---让Ext.Ajax.Request加上Mask
2008-08-29 03:33 7615一直没有找到最佳方法，应该用继承能解决所有问题。偷懒啦。这个是 ... -
Extjs学习总结---Ext.data.store之错误处理
2008-08-29 03:28 3968原先的Ext.data.Store一直没有进行错误处理。今天把 ... -
Extjs学习总结---function的终极理解
2008-08-29 00:53 29641. /** 2. * 第二部分：能在定义 ... -
世界上最被误解的语言-JavaScript
2008-08-27 05:41 1445JavaScript：世界上最被误解的语言JavaScript ... -
Extjs学习总结---Ext.log的使用
2008-08-23 03:17 4521如果不想再JS中不停的用alert显示的话。反正我是厌恶死了。 ...
相关推荐
graph slam tutorial ：从推导到应用3（g2o版程序），包含文档读取，及后端优化
40057GC11 - Introduction to Oracle9i：SQL Basics Tutorial
The Java EE 6 Tutorial: Basic Concepts, Fourth Edition, is a task-oriented, example-driven guide to developing enterprise applications for the Java Platform, Enterprise Edition 6 (Java EE 6)....
matplotlib - tutorial：matplotlib 的源代码资源
MatConvNet tutorial：Train your own data.zip
本书教您如何使用Ruby on Rails开发和部署真正的，具有工业实力的Web应用程序，Ruby on Rails是为诸如Twitter，Hulu，GitHub和Yellow Pages等顶级网站提供支持的开源Web框架。
https://www.pyimagesearch.com/2018/07/19/opencv-tutorial-a-guide-to-learn-opencv/ 代码
Tutorial 1: Setting up DirectX 11 with Visual Studio Tutorial 2: Creating a Framework and Window Tutorial 3: Initializing DirectX 11 Tutorial 4: Buffers, Shaders, and HLSL Tutorial 5: ...
NIPS 2016 Tutorial: Generative Adversarial Networks（生成对抗网络） , by Ian Goodfellow
Java EE 7 Tutorial: The Duke's Bookstore Source Code
C++ Tutorial: Sockets - Server & Client using QT - 2015使用代码
Ruby.on.Rails.Tutorial,Learn.Web.Development.with.Rails,Third.Edition-中文版 文字版.pdf 个人收集电子书，仅用学习使用，不可用于商业用途，如有版权问题，请联系删除！
This tutorial provides an introduction to classification procedures using Landsat TM data from Cañon City, Colorado. Results of both unsupervised and supervised classifications are examined and post ...
Control Theory Tutorial: Basic Concepts Illustrated by Software Examples (SpringerBriefs in Applied Sciences and Technology) This open access Brief introduces the basic principles of control theory ...
CUDA教程本教程简要概述了GPU编程。 本教程没有解释详细信息，而是着重于建议从哪里开始学习。 它提供了和 ，这些在幻灯片中进行了说明。
git_tutorial 测试Git
This Book has been prepared for ...Title: Objective C Tutorial: Simply Easy Learning Author: Virender Singh Length: 309 pages Edition: 1 Language: English Publication Date: 2015-07-05 ISBN-10: B0112YNTDC
github-basics-tutorial：如何使用github和github的基础教程
In this tutorial, we aim to present to researchers and industry practitioners a broad overview of imitation learning techniques and recent applications. Imitation learning is a powerful and practical ...
形象地介绍了正交信号的意义，十分值得学习。还可以结合Lyons的经典教材《数字信号处理》进行阅读。