6.4 Ext.core.DomQuery 單實例查詢選擇器,經過正則表達式查找DOM或者HTM

<div class="box">
        <p id="myPanel"></p>
        <div class="code"> 
            <pre style="padding:5px; background:#333; color:#fff; width:340px;"> 
&lt;div id="div0"&gt;
    &lt;div id="div1"&gt;我是第一個div的內容&lt;&frasl;div&gt;
    &lt;div id="div2"&gt;
        &lt;div id="div3"&gt;我是第二個div的內容&lt;&frasl;div&gt;
    &lt;&frasl;div&gt;
&lt;&frasl;div&gt;
            </pre>
        </div>
    </div>

Ext.onReady(function(){
    
    //6.4 Ext.core.DomQuery 單實例查詢選擇器,經過正則表達式查找DOM或者HTML
    
    //6.4.1 compile() 動態造成selector的查詢函數
    //console.info(Ext.core.DomQuery.compile("#myPanelBox"));
    
    //6.4.2 filter() 節點過濾器
    
    //6.4.3 is() 是否包含該選擇器的節點
    
    //6.4.4 jsSelect() 以前的Ext.query實際上就是本函數的處理過程
    
    //6.4.5 selectNode() 返回root中第一個匹配的selector選擇器的元素
    
    //DomQuery類的使用示例
    var myPanel = new Ext.Panel({
        title : 'DomQuery類的使用示例',
        width : '350px',
        renderTo : 'myPanel',
        html : '<div id="div0"><div id="div1">我是第一個div的內容</div><div id="div2"><div id="div3">我是第二個div的內容</div></div></div>'
    });
    
    var tarArray = Ext.query("#div0 div");//獲取全部以id爲div0爲父節點的div
    var except = Ext.core.DomQuery.filter(tarArray,"#div1",true);//選擇那些不包含id爲div1的節點
    var include = Ext.core.DomQuery.filter(tarArray,"#div1",false);//選擇那些包含id爲div1的節點
    var isInclude = Ext.core.DomQuery.is(except,"#div0");//對數組中是否包含指定id的節點進行判斷
    var selectNode = Ext.core.DomQuery.selectNode("#div0 div");//選擇id爲div0下面的第一個div節點
    console.info("filter:div1:true不包含div1的元素以下:"); //[div#div2, div#div3]
    console.info(except);
    console.info("filter:div1:false包含div1的元素以下:"); //[div#div1]
    console.info(include);
    console.info("是否包含指定id的節點:"+isInclude); //false
    console.info("第一個div節點以下:"); //<div id="div1">我是第一個div的內容</div>
    console.info(selectNode);
});


相關文章
相關標籤/搜索