ispring

2008-07-21

文中使用函数“Ext.query”但须谨记它是“Ext.DomQuery.select()”的简写方式。
HTML源码:

   1: <html>

   2:  <head>

   3:  </head>

   4:  <body>

   5:   <script type="text/javascript" src="../ext/ext-base.js"></script>

   6:   <script type="text/javascript" src="../ext/ext-core.js"></script>

   7:   <div id="bar" class="foo">

   8:    I'm a div ==> my id: bar, my class: foo

   9:    <span class="bar">I'm a span within the div with a foo class</span>

  10:    <a href="http://www.extjs.com" target="_blank">An ExtJs link</a>

  11:   </div>

  12:   <div id="foo" class="bar">

  13:    my id: foo, my class: bar

  14:    <p>I'm a P tag within the foo div</p>

  15:    <span class="bar">I'm a span within the div with a bar class</span>

  16:    <a href="#">An internal link</a>

  17:   </div>

  18:  </body>

  19: </html>

第一部分：元素选择符Selector
JS源码:

   1: // 这个查询会返回有两个元素的数组因为查询选中对整个文档的所有span标签。

  2: Ext.query("span");

   3: // 这个查询会返回有一个元素的数组因为查询顾及到了foo这个id。

  4: Ext.query("span", "foo");

   5: // 这个查询会返回包含我们foo div一个元素的数组！

  6: Ext.query("#foo");

   7: /*这个查询会返回有一个元素的数组，包含与之前例子一样的div但是我们使用了class name来获取*/

   8: Ext.query(".foo");

   9: // 这会返回一个数组，包含文档的所有元素。

 10: Ext.query("*");

  11: // 这会返回有一个元素的数组，包含p标签的div标签

 12: Ext.query("div p");

  13: // 这会返回有两个元素的数组，包含span标签的div标签

 14: Ext.query("div span");

第二部分：属性选择符Attributes selectors
这些选择符可让你得到基于一些属性值的元素。属性指的是html元素中的href, id 或 class。
JS源码:

   1: // 我们检查出任何存在有class属性的元素。

  2: // 这个查询会返回5个元素的数组。

  3: // -[body#ext-gen2.ext-gecko, div#bar.foo, span.bar, div#foo.bar, span.bar]

   4: Ext.query("*[class]");

   5: // 这会得到class等于“bar”的所有元素

  6: Ext.query("*[class=bar]");

   7: // 这会得到class不等于“bar”的所有元素

  8: Ext.query("*[class!=bar]");

   9: // 这会得到class从“b”字头开始的所有元素

 10: Ext.query("*[class^=b]");

  11: //这会得到class由“r”结尾的所有元素

 12: Ext.query("*[class$=r]");

  13: //这会得到在class中抽出“a”字符的所有元素

 14: Ext.query("*[class*=a]");

第三部分： CSS值元素选择符
HTML源码:

   1: <html>

   2:  <body>

   3:   <script type="text/javascript" src="../ext/ext-base.js"></script>

   4:   <script type="text/javascript" src="../ext/ext-core.js">

   5:   <div id="bar" class="foo" style="color:red;">

   6:    我是一个div ==> 我的id是： bar, 我的class: foo

   7:    <span class="bar" style="color:pink;">I'm a span within the div with a foo class</span>

   8:    <a href="http://www.extjs.com" target="_blank" style="color:yellow;">An ExtJs link with a blank target!</a>

   9:   </div>

  10:   <div id="foo" class="bar" style="color:fushia;">

  11:    my id: foo, my class: bar

  12:    <p>I'm a P tag within the foo div</p>

  13:    <span class="bar" style="color:brown;">I'm a span within the div with a bar class</span>

  14:    <a href="#" style="color:green;">An internal link</a>

  15:   </div>

  16:  </body>

  17: </html>

JS源码:

   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: //a www.extjs.com, div#foo.bar, p, span.bar, a test.html#]

  10: // 获取所有颜色属性是从“yel”开始的元素

  11: Ext.query("*{color^=yel}"); // [a www.extjs.com]

  12: // 获取所有颜色属性是以“ow”结束的元素

  13: Ext.query("*{color$=ow}"); // [a www.extjs.com]

  14: // 获取所有颜色属性包含“ow”字符的元素

  15: Ext.query("*{color*=ow}"); // [a www.extjs.com, span.bar]