Ext. get () and Ext. query () are combined to achieve the most flexible element fetch method _ jquery

Source: Internet
Author: User
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]
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.