DomQuery基础

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

这是要入手的html：

view plain copy to clipboard print ?
  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 plain copy to clipboard print ?
  1. // 这个查询会返回有两个元素的数组因为查询选中对整个文档的所有span标签。
  2. Ext.query("span" );
  3. // 这个查询会返回有一个元素的数组因为查询顾及到了foo这个id。
  4. Ext.query("span" ,  "foo" );注意刚才怎么传入一个普通的字符串作为第一个参数。
  5. 按id获取标签，你需要加上“#”的前缀：
  6. // 这个查询会返回包含我们foo div一个元素的数组！
  7. Ext.query("#foo" );按 class  name获取标签，你需要加上“.”的前缀：
  8. /*这个查询会返回有一个元素的数组，
  9. 包含与之前例子一样的div但是我们使用了class name来获取*/
  10. Ext.query(".foo" );你也可以使用关键字“*”来获取所有的元素：
  11. // 这会返回一个数组，包含文档的所有元素。
  12. Ext.query("*" );要获取子标签，我们只须在两个选择符之间插入一个空格：
  13. // 这会返回有一个元素的数组，包含p标签的div标签
  14. Ext.query("div p" );
  15. // 这会返回有两个元素的数组，包含span标签的div标签
  16. 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 plain copy to clipboard print ?
  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. // 这会得到class等于“bar”的所有元素
  7. Ext.query("*[class=bar]" );
  8. // 这会得到class不等于“bar”的所有元素
  9. Ext.query("*[class!=bar]" );
  10. // 这会得到class从“b”字头开始的所有元素
  11. Ext.query("*[class^=b]" );
  12. //这会得到class由“r”结尾的所有元素
  13. Ext.query("*[class$=r]" );
  14. //这会得到在class中抽出“a”字符的所有元素
  15. 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 plain copy to clipboard print ?
  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 plain copy to clipboard print ?
  1. // 获取所以红色的元素
  2. Ext.query("*{color=red}" );  // [div#bar.foo]
  3. // 获取所有粉红颜色的并且是有红色子元素的元素
  4. Ext.query("*{color=red} *{color=pink}" );  // [span.bar]
  5. // 获取所有不是红色文字的元素
  6. Ext.query("*{color!=red}" );
  7. // [html, head, script firebug.js, link, body#ext-gen2.ext-gecko,
  8. //script ext-base.js, script ext-core.js, span.bar,
  9. //div#foo.bar, p, span.bar, a test.html#]
  10. // 获取所有颜色属性是从“yel”开始的元素
  11. Ext.query("*{color^=yel}" );
  12. // 获取所有颜色属性是以“ow”结束的元素
  13. Ext.query("*{color$=ow}" );
  14. // 获取所有颜色属性包含“ow”字符的元素
  15. 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 plain copy to clipboard print ?
  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 plain copy to clipboard print ?
  1. /*
  2. this one gives us the first SPAN child of its parent
  3. */
  4. Ext.query("span:first-child" );  // [span.bar]
  5. /*
  6. this one gives us the last A child of its parent
  7. */
  8. Ext.query("a:last-child" )  // [a, a test.html#]
  9. /*
  10. this one gives us the second SPAN child of its parent
  11. */
  12. Ext.query("span:nth-child(2)" )  // [span.bar]
  13. /*
  14. this one gives us ODD TR of its parents
  15. */
  16. Ext.query("tr:nth-child(odd)" )  // [tr, tr]
  17. /*
  18. this one gives us even LI of its parents
  19. */
  20. Ext.query("li:nth-child(even)" )  // [li, li]
  21. /*
  22. this one gives us A that are the only child of its parents
  23. */
  24. Ext.query("a:only-child" )  // [a test.html#]
  25. /*
  26. this one gives us the checked INPUT
  27. */
  28. Ext.query("input:checked" )  // [input#chked on]
  29. /*
  30. this one gives us the first TR
  31. */
  32. Ext.query("tr:first" )  // [tr]
  33. /*
  34. this one gives us the last INPUT
  35. */
  36. Ext.query("input:last" )  // [input#notChked on]
  37. /*
  38. this one gives us the 2nd TD
  39. */
  40. Ext.query("td:nth(2)" )  // [td]
  41. /*
  42. this one gives us every DIV that has the "within" string
  43. */
  44. Ext.query("div:contains(within)" )  // [div#bar.foo, div#foo.bar]
  45. /*
  46. this one gives us every DIV that doesn't have a FORM child
  47. */
  48. Ext.query("div:not(form)" ) [div#bar.foo, div#foo.bar, div]
  49. /*
  50. This one gives use every DIV that has an A child
  51. */
  52. Ext.query("div:has(a)" )  // [div#bar.foo, div#foo.bar, div]
  53. /*
  54. this one gives us every TD that is followed by another TD.
  55. obviously, the one that has a colspan property is ignored.
  56. */
  57. Ext.query("td:next(td)" )  // [td, td]
  58. /*
  59. this one gives us every LABEL that is preceded by an INPUT
  60. */
  61. 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/

Tutorial:DomQuery Basics(DomQuery的基础)相关推荐

  1. Adobe Dimension Essential Training: The Basics Adobe Dimension 基础教程：基础知识 Lynda课程中文字幕

    Adobe Dimension Essential Training: The Basics 中文字幕 Adobe Dimension 基础教程:基础知识 中文字幕Adobe Dimension Es ...

  2. Z-Wave Networking Basics ZWAVE网络基础

    Z-Wave Networking Basics qq:380939960 Z-Wave的网络层定义了一个由最多可以容纳231个设备组成的网络,适合大多数住宅和轻型商业应用.他们定义一个网状网络拓扑( ...

  3. java编程语言基础外文,Java编程语言基础（外文文献翻译）

    Java编程语言基础(外文文献翻译) JavaTM Programming Language Basics Like applications, applets are created from cl ...

  4. vtk 转换视角_vtk使用基础[1]

    HuangSteve@163.com 第 1 页 共 10 页 第四章 The Basics (VTK 使用基础 ) yefeng2005 一．主要内容: VTK 是由 Will Schroeder ...

  5. Grbl V1.1F-GRBL接口基础

    # Grbl Interface Basics  Grbl接口基础 The interface for Grbl is fairly simple and straightforward. With ...

  6. 2007-11-7学习EXT第一天:EXT简介

    原文出处 翻译:Frank 无论你是Ext库的新手,抑或是想了解Ext的人,本篇文章的内容都适合你.本文将简单地介绍Ext的几个基本概念,和如何快速地做出一个动态的页面并运行起来,假设读者已具备了一些 ...

  7. 学习Ext第一天(Ext 简介)

    无论你是Ext库的新手,抑或是想了解Ext的人,本篇文章的内容都适合你.本文将简单地介绍Ext的几个基本概念,和如何快速地做出一个动态的页面并运行起来,假设读者已具备了一些JavaScript经验和初 ...

  8. Ext2.0学习入门

    本教程适用于Ext 2.0的版本,而版本1.x仍可找到. 无论你是Ext库的新手,抑或是想了解Ext的人,本篇文章的内容都适合你.本文将简单地介绍Ext的几个基本概念,和如何快速地做出一个动态的页面并 ...

  9. 计算机编程课程顺序_您可以在6月开始参加630项免费的在线编程和计算机科学课程...

    计算机编程课程顺序 Six years ago, universities like MIT and Stanford first opened up free online courses to t ...

最新文章

  1. 设置root密码，su与sudo的区别
  2. Firebug高级用法 - Web开发的利器
  3. npm ERR! the command again as root/Administrator
  4. U盘版便携式Linux制作, casper-rw 解析
  5. Deepin下java开发环境部署
  6. [.Net线程处理系列]专题五：线程同步——事件构造
  7. bootstrap-multiselect.js多选下拉框初始化时默认选中初始值
  8. 机器学习之常用优化方法（GD、牛顿、拟牛顿、拉格朗日乘子）
  9. python官方文档怎么样_python官方文档
  10. 写出常用的5个linux命令 并解释,【PHP面试题】写出尽可能多的Linux命令。
  11. HDOJ 1671 HDU 1671 Phone List ACM 1671 IN HDU
  12. 织梦php集成环境安装包,常用PHP运行环境一键安装包
  13. 苹果apple id无法申请开发者帐号问题
  14. zdragon 厚积薄发（博客）
  15. 魔兽世界开服教程——魔兽世界服务器架设全攻略---战网+Ladder排行版
  16. 解决“该文件夹包含名称过长且无法放入回收站的项目”导致无法删除
  17. matlab将图片旋转的代码_空间曲线绕空间直线旋转生成的旋转曲面方程
  18. Nginx下同域部署多个Vue项目（history路由模式），报404、500错误
  19. ResNet详细介绍
  20. java中jar文件

热门文章

  1. 你不得不知道的 IP 包详解（傻瓜式讲解）
  2. 基于数据库进行JDL文件编写
  3. OpenJudge noi1805碎纸机
  4. linux cut 最后一个字符,linux - 如何使用'cut'找到最后一个字段
  5. 2022鹏城杯CTF---Crypto
  6. 个人对23种设计模式总结 优缺点理解并分析
  7. 有没有可能组建电脑全部用水冷，不用风扇，达到静音的目的？
  8. 【2020年领域新星】 杨幻睿 杜克大学
  9. FL Studio 21水果编曲DAW宿主软件新版本
  10. Docker系列之入门