ExtJS Learning----------Ext.Dom.Query class Learning (example)

Specific examples:

Ext.onready (function () {//ext.domqueryext.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 elements based on selectors (this method is similar to Ext.DomQuery.select)//I divide him into three main categories://Basic 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) (complex selector)//Element selector//ext.query (' span ') returns the entire document span label (array form)//1 ext.query (' span ', ' root ') Based on the query with the node//var arr = ext.query (' span ', ' D1 ');//lookup using the specified parent node//ext.array.each (arr,function (EL) {//traversal of the results of the query//alert (el.innerhtml);//});//id selector//2 ext.query (' #id ') is queried by ID, but returns an array//var arr = ext.query (' #d1 ');//ext.array.each (arr, Function (EL) {//alert (el.innerhtml),//}),//3 ext.query ('. class ') query by style, return array//var arr = Ext.query ('. MyColor ');// Ext.Array.each (Arr,function (EL) {//alert (el.innerhtmL); Result: I am the second span//}); the style in the//jsp file//<style type= "Text/css" >//.mycolor{color:green;} </style>//ext.query (' * ') matches all elements//alert (ext.query (' * '));//Complex selector://1:ext.query (' div span ') contains selector filter based on tags// var arr = ext.query (' div[id=d1] span ');//You can add a restriction, otherwise you will find all//ext.array.each (Arr,function (EL) {//alert (el.innerhtml) ;//Result: I am SP content I am the second span//});//1.1:ext.query (' e>f ') makes a hierarchy to find the F node of the parent node E//var 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 ] ') make a selection of attributes to match//var arr = ext.query (' div[id*=d] '),//To find all IDs that contain D,/* to include; ^ to represent the first half; $ to represent the latter part of//ext.array.each (arr,    Function (EL) {//alert (el.id);//});/* Element selection: * Any element E with an e-tag element e F-e-derived element in all E > F elements with an F tag and all f tags in a direct child element E + F elements with an e-tag followed by all elements of the F-tag e ~ F with the e-labeled sibling element followed by all element attributes of the F tag are selected: ' @ ' and the reference are optional.    For example, div[@foo = ' bar ') is a valid property selection. E[foo] has an attribute "foo" E[foo=bar] has an attribute "foo" equivalent to "bar" E[foo^=bar] There is an attribute "foo" is a "bar" beginning with the E[foo$=bar] there is a genus"Foo" is the "bar" end of the E[foo*=bar] has an attribute "foo" contains the substring "bar" e[foo%=2] has an attribute "foo" can be divisible by 2 e[foo!=bar] There is an attribute "foo" is not equivalent to "bar" pseudo-class: E:first-child E is the first child of the parent class E:last-child E is the last child of the parent class E:nth-child (_n_) e is the nth child of the parent class (in 1 sizes) E:nth-child (odd) e is a parent class Odd child e:nth-child (even) e is an even child of the parent class E:only-child E is the only child of its parent e:checked E is an element with a check true attribute (ex: a radio or checkbox) E:fir The first e-e:last in the result set of the St result set is the nth E (1) In the result set of the last E e:nth (_n_) e:odd shortcut: Nth child (odd digit) E:even shortcut: Nth child (even digit) E:co Ntains (foo) e innerHTML contains a substring "foo" E:nodevalue (foo) e contains a text node, and the node value equals "foo" E:not (s) an E element that does not match the simple selector s E:has (s) one An e element with a subset that can match the simple selector s e:next (s) the next sibling element is the E element that matches the simple selector s E:prev (s) a sibling element is an e element that matches the simple selector s E:any (s1| s2| S2) and any simple selector S1, S2 or S3 matching E element CSS value selection: e{display=none} CSS Value "Display" is equivalent to "none" E{display^=none} The value of the CSS "display" is "no Ne "E{display$=none} CSS Value" Display "is the value of the E{display*=none} css ending with" none "" display "contains the substring" none "e{display%=2} CSS The value "Display" is a e{display!=none that can be divisible by 2}The value of CSS "display" is not equivalent to "none" *///3: Pseudo class selector//e:first-child//var arr = ext.query (' li:first-child ');//Filter All Li and select the first// Ext.Array.each (Arr,function (EL) {//alert (el.innerhtml);//results: item1//});//ext.domquery other methods:// 1:compile: Compiles a selector or XPath into a reusable function//var fn = Ext.DomQuery.compile (' span ');//alert (FN);//var arr = fn (ext.getdom (' D1 ') );//ext.array.each (Arr,function (EL) {//alert (el.innerhtml),//});//2:filter: Filter element array with simple selector//Parameter description htmlelement[] El, String selector, Boolean nonmatches//var arr = document.getelementsbytagname (' div ');//var Filterarr = Ext.DomQuery.filter (arr, ' div[id=d1] ', false);//true filtering instead, the default False//ext.array.each (Filterarr,function (EL) {//alert (el.id)//});//is: Determines whether the element matches the simple selector//alert (Ext.DomQuery.is (ext.getdom (' D1 '), ' div[id] '));//Determines whether the obtained DOM element is a div/containing an ID /Result: true});

ExtJS Learning----------Ext.Dom.Query class Learning (example)