Home > Developer > JavaScript
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.
Copy codeThe Code is as follows:
<Html>
<Body>
<Div id = "bar" class = "foo">
I'm a div ==> my id: bar, my class: foo
<Span class = "bar"> I'm a span within the div with a foo class </span>
<A href = "http://www.extjs.com" target = "_ blank"> An ExtJs link </a>
</Div>
<Div id = "foo" class = "bar">
My id: foo, my class: bar
<P> I'm a P tag within the foo div </p>
<Span class = "bar"> I'm a span within the div with a bar class </span>
<A href = "#"> An internal link </a>
</Div>
<Div name = "BlueLotus7"> BlueLotus7@126.com </div>
</Body>
</Hmlt>
(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 p tag under the div tag.
Ext. query ("div p ");
// This returns an array with two elements. The content is the span tag under the div label.
Ext. query ("div span"); (2) Get by ID: // This query returns an array containing one of our foo div 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, div # bar. foo, span. bar, div # 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:
Copy codeThe Code is as follows:
<Html>
<Head>
</Head>
<Body>
<Div id = "bar" class = "foo" style = "color: red;">
I am a div ==> my id is bar, and my class: foo
<Span class = "bar" style = "color: pink;"> I'm a span within the div with a foo class </span>
<A href = "http://www.extjs.com" target = "_ blank" style = "color: yellow;"> An ExtJs link with a blank target! </A>
</Div>
<Div id = "foo" class = "bar" style = "color: fushia;">
My id: foo, my class: bar
<P> I'm a P tag within the foo div </p>
<Span class = "bar" style = "color: brown;"> I'm a span within the div with a bar class </span>
<A href = "#" style = "color: green;"> An internal link </a>
</Div>
</Body>
</Html>
// Obtain the red Element
Ext. query ("* {color = red}"); // [div # 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, div # 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:
Copy codeThe Code is as follows:
<Html>
<Head>
</Head>
<Body>
<Div id = "bar" class = "foo" style = "color: red; border: 2px dotted red; margin: 5px; padding: 5px;">
I am a div ==> my id is bar, and my class is foo
<Span class = "bar" style = "color: pink;"> here is the span element. The outer div element has the class attribute of foo. </span>
<A href = "http://www.extjs.com" target = "_ blank" style = "color: yellow;"> set ExtJS link for blank = target </a>
</Div>
<Div id = "foo" class = "bar" style = "color: fushia; border: 2px dotted black; margin: 5px; padding: 5px;">
The id here is: foo, and the class here is bar
<P> the p element enclosed by "foo" div. </P>
<Span class = "bar" style = "color: brown;"> here is a span element. The outer layer is surrounded by div, and span has a class attribute of bar. </Span>
<A href = "#" style = "color: green;"> built-in link </a>
</Div>
<Div style = "border: 2px dotted pink; margin: 5px; padding: 5px;">
<Ul>
<Li> entry #1 </li>
<Li> entry #2 </li>
<Li> entry #3 </li>
<Li> entry #4 with <a href = "#"> link </a> </li>
</Ul>
<Table style = "border: 1px dotted black;">
<Tr style = "color: pink">
<Td> first row, first column </td>
<Td> first row and second column </td>
</Tr>
<Tr style = "color: brown">
<Td colspan = "2"> Row 2: merged cells! </Td>
</Tr>
<Tr>
<Td> Row 3, column 1 </td>
<Td> Row 3 and column 2 </td>
</Tr>
</Table>
</Div>
<Div style = "border: 2px dotted red; margin: 5px; padding: 5px;">
<Form>
<Input id = "chked" type = "checkbox" checked/> <label for = "chked"> clicked </label>
<Br/>
<Input id = "notChked" type = "checkbox"/> <label for = "notChked"> not me brotha! </Label>
</Form>
</Div>
</Body>
</Html>
// 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 ("div: contains (within)") // [div # bar. foo, div # foo. bar]
// Return the DIV that does not contain the FORM child element
Ext. query ("div: not (form)") [div # bar. foo, div # foo. bar, div]
// Return the DIV set containing element.
Ext. query ("div: has (a)") // [div # bar. foo, div # foo. bar, div]
// 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]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
