Ext 介绍入门之 DomQuery的基础

最新推荐文章于 2016-05-16 14:48:24 发布

转载最新推荐文章于 2016-05-16 14:48:24 发布 · 128 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/China-Dragon/archive/2010/05/07/1730167.html

本文介绍了DomQuery的基础用法，包括元素选择符、属性选择符、CSS值元素选择符及伪类选择符，并通过实例展示了如何获取指定类型的HTML元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DomQuery基础

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

这是要入手的html：

<html>
 <head>
  <script type= src=></script>
 </head>
 <body>
  <script type= src=></script>
  <script type= src=></script>
  <div id=  =>
   Im a span within the div  a foo class</span>
   <a href= target=>An ExtJs link</a>
  </div>
  <div id= =>
   my id: foo, my : bar
   <p>Im a span within the div  a bar class</span>
   <a href=>An internal link</a>
  </div>
 </body>
</hmlt>

第一部分：元素选择符Selector

假设我想获取文档内所有的“span”标签：


Ext.; 

Ext., ;

注意刚才怎么传入一个普通的字符串作为第一个参数。

按id获取标签，你需要加上“#”的前缀：


Ext.;

按class name获取标签，你需要加上“.”的前缀：


Ext.;

你也可以使用关键字“*”来获取所有的元素：


Ext.;

要获取子标签，我们只须在两个选择符之间插入一个空格：


Ext.;

Ext.;

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

如果朋友你觉得这里说得太简单的话，你可以选择到DomQuery 文档看看，可能会有不少收获:)

第二部分：属性选择符Attributes selectors

这些选择符可让你得到基于一些属性值的元素。属性指的是html元素中的href, id 或 class。



Ext.;

现在我们针对特定的class属性进行搜索。


Ext.;
 

Ext.;
 

Ext.;
 

Ext.;
 

Ext.;

第三部分： CSS值元素选择符

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

<html>
 <head>
  <script type= src=></script>
 </head>
 <body>
  <script type= src=></script>
  <script type= src=></script>
  <div id= = style=>
   我是一个div ==> 我的id是： bar, 我的: foo
   <span = style=>Im a P tag within the foo div</p>
   <span = style=>I

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

元素{属性操作符值}

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

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


Ext.; 
 

Ext.; 
 

Ext.; 
 

Ext.; 
 

Ext.; 
 

Ext.;

第四部分：伪类选择符Pseudo Classes selectors

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

<html>
 <head>
  <script type= src=></script>
 </head>
 <body>
  <script type= src=></script>
  <script type= src=></script>
  <div id= = style=>
   Im a span within the div  a foo class</span>
   <a href= target= style=>An ExtJs link  a blank target!</a>
  </div>
  <div id= = style=>
   my id: foo, my : bar
   <p>Im a span within the div  a bar class</span>
   <a href= style=>An internal link</a>
  </div>
  <div style=>
   <ul>
    <li>Some choice #</li>
    <li>Some choice #</li>
    <li>Some choice #</li>
    <li>Some choice #  a <a href=>link<li>
   </ul>
   <table style=>
    <tr style=>
     <td>1st row, 1st column</td>
     <td>1st row, 2nd column</td>
    </tr>
    <tr style=>
        <td colspan=>2nd row, colspanned! </td>
    </tr>
    <tr>
     <td>3rd row, 1st column</td>
     <td>3rd row, 2nd column</td>
    </tr> 
   </table>
  </div>
  <div style=>
   <form>
    <input id= type= checked/><label =>I

off we go:


Ext.; 
 

Ext. 
 

Ext. 
 

Ext. 
 

Ext. 
 

 
Ext. 
 

Ext. 
 

Ext. 
 

Ext. 
 

Ext. 
 

Ext. 
 

Ext. div#bar., div#foo., div
 

Ext. 
 

Ext. 
 

Ext.

总结

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

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

转载于:https://www.cnblogs.com/China-Dragon/archive/2010/05/07/1730167.html