<div class="box"> <p id="myPanel"></p> <div class="code"> <pre style="padding:5px; background:#333; color:#fff; width:340px;"> <div id="div0"> <div id="div1">我是第一個div的內容<⁄div> <div id="div2"> <div id="div3">我是第二個div的內容<⁄div> <⁄div> <⁄div> </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); });