Ext.dom.Query

Element Selectors:(元素选择器)

Ext.core.DomQuery.select('表达式')   返回HTMLElement[]

* any element

Ext.core.DomQuery.select('*') //返回所有dom元素

E an element with the tag E

Ext.core.DomQuery.select('div') //返回所有div元素

E F All descendent elements of E that have the tag F

Ext.core.DomQuery.select('div span') //返回所有div下的span元素 (无限层级 1,2都会匹配)

      <div>

          <span>1</span>

          <p>

              <span>2</span>

          </p>

      </div>

E > F or E/F all direct children elements of E that have the tag F1 

Ext.DomQuery.select("div > span") //匹配直接子元素 只向下查询一级(返回1)

      <div>

          <span>1</span>

          <p>

              <span>2</span>

          </p>

      </div>

E + F all elements with the tag F that are immediately preceded by an element with the tag E

Ext.DomQuery.select("div + span") //返回平级的 下面第一个匹配的元素 (444)

E ~ F all elements with the tag F that are preceded by a sibling element with the tag E

Ext.DomQuery.select("div ~ span") //返回平级的 下面所有匹配的元素 (444,666,777,888) 注意不匹配555,只返回平级的

      <span id="111"></span>

      <div>

          <span id="222"></span>

          <h1></h1>

          <span id="333"></span>

      </div>

      <span id="444"><span id="555"></span></span>

      <span id="666"></span>

      <span id="777"></span>

      <span id="888"></span>

Attribute Selectors:(属性选择器)

E[foo] has an attribute "foo"

Ext.DomQuery.select('*[foo]') //返回包含foo属性的所有元素(*代表所有DOM元素)

Ext.DomQuery.select('div[foo]') //返回包含foo属性的所有DIV元素

E[foo=bar] has an attribute "foo" that equals "bar"

Ext.DomQuery.select('div[foo=bar]') //返回所有属性foo等于bar的DIV元素

E[foo^=bar] has an attribute "foo" that starts with "bar"

Ext.DomQuery.select('div[foo^=bar]') //返回所有属性foo已bar开头的DIV元素

E[foo$=bar] has an attribute "foo" that ends with "bar"

Ext.DomQuery.select('div[foo$=bar]') //返回所有属性foo已bar结尾的DIV元素

E[foo*=bar] has an attribute "foo" that contains the substring "bar"

Ext.DomQuery.select('div[foo*=bar]') //返回所有属性foo包含bar的DIV元素

E[foo%=2] has an attribute "foo" that is evenly divisible by 2

Ext.DomQuery.select('div[foo%=bar]') //返回所有属性foo能被2整除的DIV元素

E[foo!=bar] attribute "foo" does not equal "bar"

Ext.DomQuery.select('div[foo%=bar]') //返回所有属性foo不等于bar的DIV元素

CSS Value Selectors:(Css选择器)

与属性上面的属性选择器用法一样,只不过这里匹配的是CSS,STYLE

        .mydiv {

            display: none;

        }  
<div style="width: 300; display: none;" >22</div>
<div class="myidv"></div>

E{display=none} css value "display" that equals "none"

E{display^=none} css value "display" that starts with "none"

E{display$=none} css value "display" that ends with "none"

E{display*=none} css value "display" that contains the substring "none"

E{display%=2} css value "display" that is evenly divisible by 2

E{display!=none} css value "display" that does not equal "none"

Pseudo Classes:(伪类选择器)

E:first-child E is the first child of its parent

Ext.DomQuery.select('div:first-child') //返回元素E ,并且E是它父元素的下面的第一个子元素

//返回div0 , div1 因为div0的父元素是body 并且它是body在面的第一个元素 ，div1的父元素是div0. 并且他是div0下面的第一个元素

  <body>

      <div id="0">

          <div id="1">

              <span id="s1"></span>

              <div id="2"></div>

          </div>

          <span>33</span>

      </div>

      <div id="3"></div>

  </body>

E:last-child E is the last child of its parent

Ext.DomQuery.select('div:last-child') //跟上面的正好相反.是父元素中的最后一个元素

//返回div2,div3

  <body>

      <div id="0">

          <div id="1">

              <span id="s1"></span>

              <div id="2"></div>

          </div>

          <span>33</span>

      </div>

      <div id="3"></div>

  </body>

E:nth-child(_n_) E is the _n_th child of its parent (1 based as per the spec)

//Ext.DomQuery.select('div:nth-child(1)') 返回在其父元素中 第N个的E元素 返回 div0,div1,div4

//Ext.DomQuery.select('div:nth-child(2)')  返回div2,div3

  <body>

      <div id="0">

          <div id="1">

              <span id="s1"></span>

              <div id="2"></div>

          </div>

          <span>33</span>

      </div>

      <div id="3">

          <div id="4"></div>

      </div>

  </body>

E:nth-child(odd) E is an odd child of its parent

//与上面类似 返回奇数

E:nth-child(even) E is an even child of its parent

//与上面类似 返回偶数

E:only-child E is the only child of its parent

//Ext.DomQuery.select('div:only-child') 返回父元素当中只有一个元素的E元素,返回div4

  <body>

      <div id="0">

          <div id="1">

              <span id="s1"></span>

              <div id="2"></div>

          </div>

          <span>33</span>

      </div>

      <div id="3">

          <div id="4"></div>

      </div>

  </body>

E:checked E is an element that is has a checked attribute that is true (e.g. a radio or checkbox)

//Ext.DomQuery.select('input:checked')  返回选中的元素 1,2

      <input id="1" name="hobby" checked="checked" type="checkbox">

      <input id="2" name="hobby" checked="checked" type="checkbox">

      <input id="3" name="hobby" type="checkbox">

E:first the first E in the resultset

//返回匹配元素结果集中的第一个元素

E:last the last E in the resultset

//返回匹配元素结果集中的最后一个元素

E:nth(_n_) the _n_th E in the resultset (1 based)

//返回匹配元素结果集中的第N个元素

E:odd shortcut for :nth-child(odd)

//与:nth-child(odd)相同

E:even shortcut for :nth-child(even)

//于:nth-child(even)相同

E:contains(foo) E's innerHTML contains the substring "foo"

//Ext.DomQuery.select('div:contains(foo)')  innerHTML 属性中包含foo的E元素, [div#0, div#1, div#2]

  <body>

      <div id="0">

          <div id="1">

              <span id="s1"></span>

              <div id="2">foo</div>

          </div>

          <span>33</span>

      </div>

      <div id="3">

          <div id="4"></div>

      </div>

      <div id="5"></div>

  </body>

E:nodeValue(foo) E contains a textNode with a nodeValue that equals "foo"

//Ext.DomQuery.select('div:nodeValue(foo)')//返回值包含一个文本元素,并且值为foo的 div元素 [div#2]

      <div id="0">

          <div id="1">

              foo

              <span id="s1"></span>

              <div id="2">foo</div>

          </div>

          <span>33</span>

      </div>

      <div id="3">

          <div id="4"></div>

      </div>

      <div id="5"></div>

E:not(S) an E element that does not match simple selector S

//Ext.DomQuery.select('div:not([id=3])') (注意红色地方放选择器表达式) 返回id 不等于3的div 返回 [div#0, div#1, div#2, div#4, div#5]

      <div id="0">

          <div id="1">

              <span id="s1"></span>

              <div id="2">foo</div>

          </div>

          <span>33</span>

      </div>

      <div id="3">

          <div id="4"></div>

      </div>

      <div id="5"></div>

E:has(S) an E element that has a descendent that matches simple selector S

//Ext.DomQuery.select('div:has(span[id=s1])')  返回包含span[id=s1]表达式所匹配元素的 div元素

//返回[div#0, div#1]

      <div id="0">

          <div id="1">

              <span id="s1"></span>

              <div id="2">foo</div>

          </div>

          <span>33</span>

      </div>

      <div id="3">

          <div id="4"></div>

      </div>

      <div id="5"></div>

E:next(S) an E element whose next sibling matches simple selector S

//Ext.DomQuery.select('div:next(div[id=3])') 返回div元素,并且其平级元素的下一个是div[id=3]所匹配的元素

//匹配 div#1

  <body>

      <div id="0">

          <div id="1">

              <span id="s1"></span>

              <div id="2">foo</div>

          </div>

          <span>33</span>

      </div>

      <div id="3">

          <div id="4"></div>

      </div>

      <div id="5"></div>

  </body>

E:prev(S) an E element whose previous sibling matches simple selector S

//Ext.DomQuery.select('div:next(div[id=3])') 返回div元素,并且其平级元素的上一个是div[id=3]所匹配的元素

//匹配div#5

  <body>

      <div id="0">

          <div id="1">

              <span id="s1"></span>

              <div id="2">foo</div>

          </div>

          <span>33</span>

      </div>

      <div id="3">

          <div id="4"></div>

      </div>

      <div id="5"></div>

  </body>

E:any(S1|S2|S2) an E element which matches any of the simple selectors S1, S2 or S3

//Ext.DomQuery.select('div:any([id=2]|[id=3]|[id=4])') 或者的关系

E:visible(true) an E element which is deeply visible according to Ext.dom.Element.isVisible

//Ext.DomQuery.select('div:visible(true)') 匹配所有可见的div 返回 [div#0, div#3, div#4, div#5]

  <body>

      <div id="0">

          <div id="1" style="display: none;">

              <span id="s1"></span>

              <div id="2">foo</div>

          </div>

          <span>33</span>

      </div>

      <div id="3">

          <div id="4"></div>

      </div>

      <div id="5"></div>

  </body>

Ext.core.DomQuery Dom选择器的更多相关文章

  1. ExtJs之Ext.core.DomQuery

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  2. ExtJS初接触 —— 了解 Ext Core

    ExtJS初接触 —— 了解 Ext Core Ext Core是一款和jQuery媲美的轻型JS库,基于MIT许可.对于Dom的操作,我个人还是比较喜欢用jQuery.当然如果项目中用的是ExtJS ...

  3. ExtJS初探：了解 Ext Core

    Ext Core是一款和jQuery媲美的轻型JS库,基于MIT许可.对于Dom的操作,我个人还是比较喜欢用jQuery.当然如果项目中用的是ExtJS框架,也就没必要多引用一个jQuery,Ext ...

  4. dom core,html dom,css dom,jquery 中的dom操作

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

  5. 都别说工资低了，我们来一起写简单的dom选择器吧！

    前言 我师父(http://www.cnblogs.com/aaronjs/)说应当阅读框架(jquery),所以老夫就准备开始看了 然后公司的师兄原来写了个dom选择器,感觉不错啊!!!原来自己从来 ...

  6. 关于一个新的DOM选择器querySelector

    在传统的javascript中,提到DOM选择器,大家比较熟悉的方式是通过tag,name,id来获取,其实大家都发现如果获取比较复杂的话,用这个方法会很繁琐,这时大家应该都会想到jquery里获取一 ...

  7. ExtJs之Ext.core.DomHelper.append

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  8. 一周学会Mootools 1.4中文教程:(1)Dom选择器

    利器: 君欲善其事须先利其器,好吧因为我们的时间比较紧迫,只有六天而已,那么六天的时间用死记硬背的方式学会Mt犹如天方夜谭,因此我们需要借鉴一下Editplus的素材栏帮我们记忆就好了,当我们需要用到 ...

  9. DOM选择器

    DOM选择器分为:id.class.name.tagname.高级.关系选择器;(返回的都是标签) 一:元素节点选择器: 1. id: 返回的是单个对象 <body> <div cl ...

随机推荐

  1. PHP 多个mysql连接的问题

    今天在同一个php进程中用mysql_connect新建了两个mysql句柄,这两个句柄都连接同一台数据库,只不过操作的数据库dbname不同,假设这两个句柄分别是$dbhA和$dbhB,它们对应的数 ...

  2. 【java设计模式】之 代理（Proxy）模式

    代理模式的核心作用就是通过代理,控制对对象的访问.这跟实际中是一样的,比如说明星都有经纪人,这就是一个代理,比如有人要找某明星拍戏,那么首先处理这事的是他的经纪人,虽然拍戏需要自己拍,但是拍戏前后的一 ...

  3. Linux-Tmux使用初体验

    Tmux使用初体验 tmux #开启tmux tmux ls #显示已有tmux列表(ctrl+b s) tmux attach-session -t 数字 #选择tmux ctrl+b c 创建一个 ...

  4. RabbitMQ消息队列（二）："Hello, World"[转]

    2. Sending 第一个program send.cs:发送Hello world 到queue.正如我们在上篇文章提到的,你程序的第9行就是建立连接,第12行就是创建channel,第14行创建 ...

  5. 标准I/O库

    前言:我想大家学习C语言接触过的第一个函数应该是printf,但是我们真正理解它了吗?最近看Linux以及网络编程这块,我觉得I/O这块很难理解.以前从来没认识到Unix I/O和C标准库I/O函数压 ...

  6. 关于centos7中使用rpm方式安装mysql5.7版本后无法使用root登录的问题

    最近在centos7中通过rpm方式安装了最新版本的mysql-server 5.7 (mysql57-community-release-el7-7.noarch.rpm) ,发现安装成功后无法使用 ...

  7. Math.Celing、Math.Floor、Math.DivRem与Math.BigMul

    返回大于或等于指定数字的最小整数.例如: double a=Math.Celing(0.00);  //0 double a=Math.Celing(0.40);  //1 double a=Math ...

  8. 定制WinEdt 优化Latex输入

    定制WinEdt 优化Latex输入 ---原文转载地址:http://www.mamicode.com/info-detail-342716.html ---推荐winedt功能定制使用-说明文档: ...

  9. Spring Boot 2.0官方文档之 Actuator（转）

    执行器(Actuator)的定义 执行器是一个制造业术语,指的是用于移动或控制东西的一个机械装置,一个很小的改变就能让执行器产生大量的运动. An actuator is a manufacturin ...

  10. Java：HttpClient篇，Cookie概述，及其在HttpClient4.2中的应用

    1. Cookie 概述 Cookie是什么? Cookie 是一小段文本信息,伴随着用户请求和页面在 Web 服务器和浏览器之间传递.Cookie 包含每次用户访问站点时 Web 应用程序都可以读取 ...