`

Tutorial:DomQuery Basics(DomQuery的基础)

 
阅读更多

DomQuery基础

DomQuery的select函数有两个参数。第一个是选择符字符（selector string ）而第二个是欲生成查询的标签ID(TAG ID)。本文中我准备使用函数“Ext.query”但读者须谨记它是“Ext.DomQuery.select()”的简写方式。

这是要入手的html：

view plaincopy to clipboardprint?
  1. <html>
  2. <head>
  3. <scripttype="text/javascript"src="../js/firebug/firebug.js"></script>
  4. </head>
  5. <body>
  6. <scripttype="text/javascript"src="../ext/ext-base.js"></script>
  7. <scripttype="text/javascript"src="../ext/ext-core.js"></script>
  8. <divid="bar"class="foo">
  9. I'madiv==>myid:bar,myclass:foo
  10. <spanclass="bar">I'maspanwithinthedivwithafooclass</span>
  11. <ahref="http://www.extjs.com"target="_blank">AnExtJslink</a>
  12. </div>
  13. <divid="foo"class="bar">
  14. myid:foo,myclass:bar
  15. <p>I'maPtagwithinthefoodiv</p>
  16. <spanclass="bar">I'maspanwithinthedivwithabarclass</span>
  17. <ahref="#">Aninternallink</a>
  18. </div>
  19. </body>
  20. </hmlt>

第一部分：元素选择符Selector
假设我想获取文档内所有的“span”标签：

view plaincopy to clipboardprint?
  1. //这个查询会返回有两个元素的数组因为查询选中对整个文档的所有span标签。
  2. Ext.query("span");
  3. //这个查询会返回有一个元素的数组因为查询顾及到了foo这个id。
  4. Ext.query("span","foo");注意刚才怎么传入一个普通的字符串作为第一个参数。
  6. 按id获取标签，你需要加上“#”的前缀：
  8. //这个查询会返回包含我们foodiv一个元素的数组！
  9. Ext.query("#foo");按classname获取标签，你需要加上“.”的前缀：
  11. /*这个查询会返回有一个元素的数组，
  12. 包含与之前例子一样的div但是我们使用了classname来获取*/
  13. Ext.query(".foo");你也可以使用关键字“*”来获取所有的元素：
  15. //这会返回一个数组，包含文档的所有元素。
  16. Ext.query("*");要获取子标签，我们只须在两个选择符之间插入一个空格：
  18. //这会返回有一个元素的数组，包含p标签的div标签
  19. Ext.query("divp");
  20. //这会返回有两个元素的数组，包含span标签的div标签
  21. Ext.query("divspan");


还有三个的元素选择符，待后续的教程会叙述。 ""

如果朋友你觉得这里说得太简单的话，你可以选择到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属性进行搜索。
  7. //这会得到class等于“bar”的所有元素
  8. Ext.query("*[class=bar]");
  10. //这会得到class不等于“bar”的所有元素
  11. Ext.query("*[class!=bar]");
  13. //这会得到class从“b”字头开始的所有元素
  14. Ext.query("*[class^=b]");
  16. //这会得到class由“r”结尾的所有元素
  17. Ext.query("*[class$=r]");
  19. //这会得到在class中抽出“a”字符的所有元素
  20. Ext.query("*[class*=a]");

第三部分： CSS值元素选择符
这些选择符会匹配DOM元素的style属性。尝试在那份html中加上一些颜色：

view plaincopy to clipboardprint?
  1. <html>
  2. <head>
  3. <scripttype="text/javascript"src="../js/firebug/firebug.js"></script>
  4. </head>
  5. <body>
  6. <scripttype="text/javascript"src="../ext/ext-base.js"></script>
  7. <scripttype="text/javascript"src="../ext/ext-core.js"></script>
  8. <divid="bar"class="foo"style="color:red;">
  9. 我是一个div==>我的id是：bar,我的class:foo
  10. <spanclass="bar"style="color:pink;">
  11. I'maspanwithinthedivwithafooclass</span>
  12. <ahref="http://www.extjs.com"target="_blank"style="color:yellow;">
  13. AnExtJslinkwithablanktarget!</a>
  14. </div>
  15. <divid="foo"class="bar"style="color:fushia;">
  16. myid:foo,myclass:bar
  17. <p>I'maPtagwithinthefoodiv</p>
  18. <spanclass="bar"style="color:brown;">
  19. I'maspanwithinthedivwithabarclass</span>
  20. <ahref="#"style="color:green;">Aninternallink</a>
  21. </div>
  22. </body>
  23. </html>


基于这个CSS的颜色值我们不会作任何查询，但可以是其它的内容。它的格式规定是这样的：

元素{属性 操作符 值}

注意我在这里是怎么插入一个不同的括号。

所以，操作符（operators）和属性选择符（attribute selectors）是一样的。

view plaincopy to clipboardprint?
  1. //获取所以红色的元素
  2. Ext.query("*{color=red}");//[div#bar.foo]
  4. //获取所有粉红颜色的并且是有红色子元素的元素
  5. Ext.query("*{color=red}*{color=pink}");//[span.bar]
  7. //获取所有不是红色文字的元素
  8. Ext.query("*{color!=red}");
  9. //[html,head,scriptfirebug.js,link,body#ext-gen2.ext-gecko,
  10. //scriptext-base.js,scriptext-core.js,span.bar,
  11. //div#foo.bar,p,span.bar,atest.html#]
  13. //获取所有颜色属性是从“yel”开始的元素
  14. Ext.query("*{color^=yel}");
  16. //获取所有颜色属性是以“ow”结束的元素
  17. Ext.query("*{color$=ow}");
  19. //获取所有颜色属性包含“ow”字符的元素
  20. Ext.query("*{color*=ow}");

第四部分：伪类选择符Pseudo Classes selectors
仍然是刚才的网页，但是有所不同的只是新加上了一个UL元素、一个TABLE元素和一个FORM元素，以便我们可以使用不同的伪类选择符，来获取节点。

view plaincopy to clipboardprint?
  1. <html>
  2. <head>
  3. <scripttype="text/javascript"src="../js/firebug/firebug.js"></script>
  4. </head>
  5. <body>
  6. <scripttype="text/javascript"src="../ext/ext-base.js"></script>
  7. <scripttype="text/javascript"src="../ext/ext-core.js"></script>
  8. <divid="bar"class="foo"style="color:red;
  9. border:2pxdottedred;margin:5px;padding:5px;">
  10. I'madiv==>myid:bar,myclass:foo
  11. <spanclass="bar"style="color:pink;">
  12. I'maspanwithinthedivwithafooclass</span>
  13. <ahref="http://www.extjs.com"target="_blank"style="color:yellow;">
  14. AnExtJslinkwithablanktarget!</a>
  15. </div>
  16. <divid="foo"class="bar"style="color:fushia;
  17. border:2pxdottedblack;margin:5px;padding:5px;">
  18. myid:foo,myclass:bar
  19. <p>I'maPtagwithinthefoodiv</p>
  20. <spanclass="bar"style="color:brown;">
  21. I'maspanwithinthedivwithabarclass</span>
  22. <ahref="#"style="color:green;">Aninternallink</a>
  23. </div>
  24. <divstyle="border:2pxdottedpink;margin:5px;padding:5px;">
  25. <ul>
  26. <li>Somechoice#1</li>
  27. <li>Somechoice#2</li>
  28. <li>Somechoice#3</li>
  29. <li>Somechoice#4witha<ahref="#">link</a></li>
  30. </ul>
  31. <tablestyle="border:1pxdottedblack;">
  32. <trstyle="color:pink">
  33. <td>1strow,1stcolumn</td>
  34. <td>1strow,2ndcolumn</td>
  35. </tr>
  36. <trstyle="color:brown">
  37. <tdcolspan="2">2ndrow,colspanned!</td>
  38. </tr>
  39. <tr>
  40. <td>3rdrow,1stcolumn</td>
  41. <td>3rdrow,2ndcolumn</td>
  42. </tr>
  43. </table>
  44. </div>
  45. <divstyle="border:2pxdottedred;margin:5px;padding:5px;">
  46. <form>
  47. <inputid="chked"type="checkbox"checked/>
  48. <labelfor="chked">I'mchecked</label>
  49. <br/><br/>
  50. <inputid="notChked"type="checkbox"/><labelfor="notChked">
  51. notmebrotha!</label>
  52. </form>
  53. </div>
  54. </body>
  55. </html>

off we go:

view plaincopy to clipboardprint?
  1. /*
  2. thisonegivesusthefirstSPANchildofitsparent
  3. */
  4. Ext.query("span:first-child");//[span.bar]
  6. /*
  7. thisonegivesusthelastAchildofitsparent
  8. */
  9. Ext.query("a:last-child")//[a,atest.html#]
  11. /*
  12. thisonegivesusthesecondSPANchildofitsparent
  13. */
  14. Ext.query("span:nth-child(2)")//[span.bar]
  16. /*
  17. thisonegivesusODDTRofitsparents
  18. */
  19. Ext.query("tr:nth-child(odd)")//[tr,tr]
  21. /*
  22. thisonegivesusevenLIofitsparents
  23. */
  24. Ext.query("li:nth-child(even)")//[li,li]
  26. /*
  27. thisonegivesusAthataretheonlychildofitsparents
  28. */
  30. Ext.query("a:only-child")//[atest.html#]
  32. /*
  33. thisonegivesusthecheckedINPUT
  34. */
  35. Ext.query("input:checked")//[input#chkedon]
  37. /*
  38. thisonegivesusthefirstTR
  39. */
  40. Ext.query("tr:first")//[tr]
  42. /*
  43. thisonegivesusthelastINPUT
  44. */
  45. Ext.query("input:last")//[input#notChkedon]
  47. /*
  48. thisonegivesusthe2ndTD
  49. */
  50. Ext.query("td:nth(2)")//[td]
  52. /*
  53. thisonegivesuseveryDIVthathasthe"within"string
  54. */
  55. Ext.query("div:contains(within)")//[div#bar.foo,div#foo.bar]
  57. /*
  58. thisonegivesuseveryDIVthatdoesn'thaveaFORMchild
  59. */
  60. Ext.query("div:not(form)")[div#bar.foo,div#foo.bar,div]
  62. /*
  63. ThisonegivesuseeveryDIVthathasanAchild
  64. */
  65. Ext.query("div:has(a)")//[div#bar.foo,div#foo.bar,div]
  67. /*
  68. thisonegivesuseveryTDthatisfollowedbyanotherTD.
  69. obviously,theonethathasacolspanpropertyisignored.
  70. */
  71. Ext.query("td:next(td)")//[td,td]
  73. /*
  74. thisonegivesuseveryLABELthatisprecededbyanINPUT
  75. */
  76. Ext.query("label:prev(input)")//[label,label]

总结
API依然最重要的资讯来源。本篇教程做的仅仅是拿一张现实中的网页示范了一些结果。

如读者已了解过API的DomQuery内容,可跳过本文，直接阅读 DomQuery advanced tutorial!

译者姓名：Frank
译者博客：http://www.ajaxjs.com/blog/

分享到：
| (Ext)Ext事件的处理
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics