ext 选择器初级学习

最新推荐文章于 2024-03-13 16:01:31 发布

chenxuejiakaren

最新推荐文章于 2024-03-13 16:01:31 发布

阅读量4.2k

点赞数

分类专栏： EXTJS 文章标签： ext class div html attributes extjs

本文链接：https://blog.youkuaiyun.com/chenxuejiakaren/article/details/7547306

版权

EXTJS 专栏收录该内容

1 篇文章

订阅专栏

作为一个初学者，最开始需要掌握关于 ext js 的选择器。那么，我们现在分三部分学习。只要你学习过jquery的知识，这个就是小菜一碟了，语法基本上类似。

第一部分：元素选择符Selector

Ext.query("span"); // 这个查询会返回有两个元素的数组因为查询选中对整个文档的所有span标签。

Ext.query("span", "foo"); // 这个查询会返回有一个元素的数组因为查询顾及到了foo这个id。注意刚才怎么传入一个普通的字符串作为第一个参数。

Ext.query("#foo"); //按id获取标签，你需要加上“#”的前缀,这个查询会返回包含我们foo div一个元素的数组！

Ext.query(".foo"); //按class name获取标签，你需要加上“.”的前缀,这个查询会返回有一个元素的数组，包含与之前例子一样的div但是我们使用了class name来获取

Ext.query("*"); //你也可以使用关键字“*”来获取所有的元素,这会返回一个数组，包含文档的所有元素。

Ext.query("div p"); //要获取子标签，我们只须在两个选择符之间插入一个空格,这会返回有一个元素的数组，包含p标签的div标签

Ext.query("div span"); // 这会返回有两个元素的数组，包含span标签的div标签

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

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

Ext.query("*[class]"); // 我们检查出任何存在有class属性的元素。 // 这个查询会返回5个元素的数组。结果： [body#ext-gen2.ext-

gecko, div#bar.foo, span.bar, div#foo.bar, span.bar]

Ext.query("*[class=bar]"); // 这会得到class等于“bar”的所有元素

Ext.query("*[class!=bar]"); // 这会得到class不等于“bar”的所有元素

Ext.query("*[class^=b]"); // 这会得到class从“b”字头开始的所有元素

Ext.query("*[class$=r]"); //这会得到class由“r”结尾的所有元素

Ext.query("*[class*=a]"); //这会得到在class中抽出“a”字符的所有元素

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

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

先看下面的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）是一样的。

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

Ext.query("*{color^=yel}"); // 获取所有颜色属性是从“yel”开始的元素结果：[a www.extjs.com]

Ext.query("*{color$=ow}"); // 获取所有颜色属性是以“ow”结束的元素结果： [a www.extjs.com]

Ext.query("*{color*=ow}"); // 获取所有颜色属性包含“ow”字符的元素结果： [a www.extjs.com, span.bar]