Extjs Simple Selector 具体解释

在 Ext.Element  的方法中用到了不少选择器，如

 Ext.Element

 findParentNode :simple selector
 first :simple selector
 select : selector

 Ext.EventObject.getTarget :simple selector

 

 Ext.DomQuery.is :simple selector

但是这些方法中的参数有的有特殊要求 simple selector ,而不是我们所熟悉的通用 css选择器，但API对此解释较少。

simple selector ：

  主要用于过滤节点集，以及对某一特定节点是否满足属性约束等。所以该选择器不包含后代选择器以及子选择器，同胞选择器 等会产生新结果节点集的特性。使DomQuery可以更高效。

  如：

  div.class1

  span:first-child

selector :

  主要用于生成结果节点集合，会有扩充的功能，而扩充功能则主要通过后代选择器以及子选择器，同胞选择器来实现。

  如：

  ul > li  div a:first-child

  

解释：

findParentNode : 对祖先（父）节点集合进行过滤，first 对子节点进行过滤，getTarget 对 target的祖先（父）节点集合进行过滤，以上三种采用simple selector

而 Ext.Element.select 要选择出一些符合需求的子孙节点，主要为扩充操作，采用selector。

 

 

示例：

 

<div id="d" class="divd">
<a href="#" class="l">x</a>
<a href="#">y</a>
<a href="#" class="l">x</a>
</div>

<script>
var div=Ext.get("d");
var x= Ext.DomQuery.compile("#d a.l", "select");
console.log(x());
console.log("************************************************");


x= Ext.DomQuery.compile("a.l", "select");
console.log(x(div.dom));
console.log("************************************************");



x= Ext.DomQuery.compile("#d a.l", "simple");
console.log(x());
console.log(x(document.getElementsByTagName("a")));
console.log("************************************************");


x= Ext.DomQuery.compile("a.l", "simple");
console.log(x());
console.log(x(document.getElementsByTagName("a")));
</script>