To use the library function of ExtJS to perform various operations on the DOM, you need to obtain the object of the Element type, but Ext. although get () obtains Element, the parameter can only be id. If you like and worship jQuery selector, you must learn Ext. get () and Ext. query () combination. I have omitted the get () and query () parameters. First, let's look at the function prototype in the document:
Ext. get (Mixed el): Element
Parameters:
El: Mixed
The id of the node, a DOM Node or an existing Element.
Returns:
Element
The Element object
Ext. query (String path, [Node root]): Array
Parameters:
Path: String
The selector/xpath query
Root: Node
(Optional) The start of the query (defaults to document ).
Returns:
Array
The query function returns an array of DOM nodes, and the el parameter of Ext. get can be DOM Node. Haha, do you understand? That is to say, to achieve the most flexible method, you should use the query to get the DOM Node and then hand it to get to become the Element. That is:
Var x = Ext. query (QueryStr );
// Why am I not writing inline functions? Because the x here can only be one element, and the x in the above sentence is an Array, you can convert and process it yourself.
Var y = Ext. get (x );
Next, we need to introduce the QueryStr format (in fact, it is similar to the selector format in jQuery). As for what you can do after getting the Element, let's take a look at Ext in the ExtJS document. element description, I will not pick it up.
First, give an html code for demonstration.
The Code is as follows:
I'm a p => my id: bar, my class: foo
I'm a span within the p with a foo class
An ExtJs link
My id: foo, my class: bar
I'm a P tag within the foo p
I'm a span within the p with a bar class
An internal link
BlueLotus7@126.com
(1) According to the tag: // This query returns an array with two elements because all span tags selected for the entire document are queried.
Ext. query ("span ");
// This query returns an array of elements because the query takes the foo id into account.
Ext. query ("span", "foo"); // This returns an array of elements with the content of the p tag under the p tag.
Ext. query ("p ");
// This returns an array with two elements. The content is the span tag under the p tag.
Ext. query ("p span"); (2) Get by ID: // This query returns an array containing one of our foo p elements!
Ext. query ("# foo"); // or directly Ext. get ("foo"); (3) According to the class Name to get: Ext. query (". foo "); // This query returns an array of five elements.
Ext. query ("* [class]"); // The result is [body # ext-gen2.ext-gecko, p # bar. foo, span. bar, p # foo. bar, span. bar] (4) Universal Method: (this method can be used to obtain the id, name, class, css, etc.) // This will get all elements whose class is equal to "bar"
Ext. query ("* [class = bar]");
// This will get all elements whose class is not equal to bar
Ext. query ("* [class! = Bar] ");
// This will get all elements of the class starting from the "B" Header
Ext. query ("* [class ^ = B]");
// This will get all elements of the class ending with "r"
Ext. query ("* [class $ = r]");
// This will get all elements that extract the "a" character from the class.
Ext. query ("* [class * = a]"); // all elements whose name is "BlueLotus7"
Ext. query ("* [name = BlueLotus7]");
Let's change the html code:
The Code is as follows:
I am a p ==> my id is bar, and my class: foo
I'm a span within the p with a foo class
An ExtJs link with a blank target!
My id: foo, my class: bar
I'm a P tag within the foo p
I'm a span within the p with a bar class
An internal link
// Obtain the red Element
Ext. query ("* {color = red}"); // [p # bar. foo]
// Obtain all pink elements with red child elements
Ext. query ("* {color = red} * {color = pink}"); // [span. bar]
// Obtain all elements that are not in red.
Ext. query ("* {color! = Red} "); // [html, head, script firebug. js, link, body # ext-gen2.ext-gecko, script ext-base.js, script ext-core.js, span. bar, a www.extjs.com, p # foo. bar, p, span. bar, a test.html #]
// Obtain all the elements whose color attributes start with "yel ".
Ext. query ("* {color ^ = yel}"); // [a www.extjs.com]
// Obtain all elements whose color attributes end with "ow"
Ext. query ("* {color $ = ow}"); // [a www.extjs.com]
// Obtain all elements whose color attributes contain the "ow" character.
Ext. query ("* {color * = ow}"); // [a www.extjs.com, span. bar]
(5) change the pseudo Operator Method to html:
The Code is as follows:
I am a p ==> my id is bar, and my class is foo
Here is the span element. The outer p element has the class attribute of foo.
Set ExtJS link of blank = target
The id here is: foo, and the class here is bar
The p element enclosed by "foo" p.
Here is a span element, the outer layer is surrounded by p, and span also has a class attribute of bar.
Built-in Link
- Entry #1
- Entry #2
- Entry #3
- Entry #4 with Link
| First row, first column |
First row and second column |
| Row 2: merged cells! |
| Row 3, column 1 |
Row 3 and column 2 |
// The SPAN element is the first child element of its parent element.
Ext. query ("span: first-child"); // [span. bar]
// Element A is the last child element of its parent element.
Ext. query ("a: last-child") // [a www.extjs.com, a test.html #]
// The SPAN element is the 2nd child element of its parent element (number starting from 1)
Ext. query ("span: nth-child (2)") // [span. bar]
// The TR element is a child element with an odd number of its parent element.
Ext. query ("tr: nth-child (odd)") // [tr, tr]
// The LI element is a child element with an odd number of its parent element.
Ext. query ("li: nth-child (even)") // [li, li]
// Returns Element A, which is the unique child element of its parent element.
Ext. query ("a: only-child") // [a test.html #]
// Returns all INPUT elements of the selected checked object.
Ext. query ("input: checked") // [input # chked on]
// Returns the first TR element.
Ext. query ("tr: first") // [tr]
// Returns the last INPUT element.
Ext. query ("input: last") // [input # notChked on]
// Returns the second TD element.
Ext. query ("td: nth (2)") // [td]
// Returns each DIV containing the "within" string.
Ext. query ("p: contains (within)") // [p # bar. foo, p # foo. bar]
// Return the DIV that does not contain the FORM child element
Ext. query ("p: not (form)") [p # bar. foo, p # foo. bar, p]
// Return the DIV set containing element.
Ext. query ("p: has (a)") // [p # bar. foo, p # foo. bar, p]
// Returns the TD sets with TD. In particular, if the TD with the colspan attribute is used
Ext. query ("td: next (td)") // [td, td]
// Return the set of LABEL elements that reside in front of the INPUT element.
Ext. query ("label: prev (input)") // [label, label]
