Ext JS Learning 15th Day Ext Foundation of Ext.domquery

This article together to record the study notes

Ext.dom.query Well, this class is a look at the time to do something, do not need me to explain too much. This class provides a total of 8 methods for developers to use. • To say that the most commonly used method is to ext.query this method, we have simply contacted this method, here is the detailed usage rules for this method: – Basic element Selector ID selector CSS class selector tag Selector (simple selector) – Property selector – Pseudo-Class selector (also can be said to be equivalent to JQ filter selector) ext.query basic Use form: –ext.query (' span ') returns the entire document's span label –ext.query (' span ', ' root ') based on the query with the node Ext.query (' #id ') queries based on the ID, but returns the array –ext.query ('. class ') to query based on the style, returning the array –ext.query (' div span ') that contains the selector filter based on the tag –ext.query (' * ') match all elements –ext.query (' input[value*=val] ') to make an attribute selection match –ext.query (' e>f ') to make a hierarchy to find the F node of the parent node E Ext.dom.query Other methods: • Compile: Compiles a selector or XPath into a reusable function filter: Filter An array of elements using a simple selector is: Determine if an element matches a simple selector jsselect: Select an element based on a selector

Ext.onready (function() {//Ext.domquery ext.create (' Ext.panel '), {title: ' Ext.domquery example ', width:500, height:400, RenderTo:Ext.getBody (), HTML: ' <ul><li>item1</li><li>item2</li></ul><div Id=d1><span id=sp> I am SP content </span><span class= "MyColor" > I am the second span</span></div> '}); Ext.DomQuery.select = = Ext.query//Return content: htmlelement[]///ext.domquery.jsselect: Select element according to selector (this method is similar to Ext.DomQuery.select)//I divide him into three main categories://Class selector Tag Selector for basic selector ID selector css (simple selector)//Property selector, Pseudo-class selector (also equivalent to JQ filter selector) (complex selector)//Ext.query (' span ') returns the span label for the entire document//1 ext.query (' span ', ' root ') based on the query with the nodevar arr = ext.query (' span ', ' D1 '); Ext.Array.each (arr,function(EL) {alert (el.innerhtml);});//2 ext.query (' #id ') query based on ID, but return arrayvar arr = ext.query (' #d1 '); Ext.Array.each (arr,function(EL) {alert (el.innerhtml);});//3 Ext.query ('. class ') query based on style, return arrayvar arr = Ext.query ('. MyColor ')); Ext.Array.each (arr,function(EL) {alert (el.innerhtml);});//Ext.query (' * ') matches all elements alert (ext.query (' * ')));//Complex selectors://1:ext.query (' div span ') contains selector filters based on tagsvar arr = ext.query (' div[id=d1] span '); Ext.Array.each (arr,function(EL) {alert (el.innerhtml);});//1.1:ext.query (' e>f ') a hierarchy to find the F-node with the parent node Evar arr = ext.query (' Div>span ');//Xpath:div/span Find XML file Comparison utility Ext.Array.each (arr,function(EL) {alert (el.innerhtml);});//2: Property selector ext.query (' e[attr=val] ') to select a property to matchvar arr = ext.query (' div[id*=d] '); Ext.Array.each (arr,function(EL) {alert (el.id);});//3: Pseudo-class Selector//E:first-childvar arr = ext.query (' Li:first-child '); Ext.Array.each (arr,function(EL) {alert (el.innerhtml);});//Ext.domquery Other methods://1:compile: Compiling a selector or XPath into a reusable functionvar fn = Ext.DomQuery.compile (' span '); Alert (FN);var arr = fn (ext.getdom (' D1 ')); Ext.Array.each (arr,function//2:filter: Filter An array of elements using a simple selector // var arr = document.getelementsbytagname (' div ' var Filterarr = Ext.DomQuery.filter (arr, ' div[id=d1] ', false ); Ext.Array.each (Filterarr,function//is: Determines whether the element matches a simple selector alert (Ext.DomQuery.is (ext.getdom (' D1 '), ' div[id] ' 

To recommend an article network www.fishcmonkey.com, learning to improve the literary accomplishment;

Ext JS Learning 15th Day Ext Foundation of Ext.domquery