(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: <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: <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
