If you are not ready, please read the previous article "Mootools 1.2 tutorial (1)--mootools introduction." We talked about how to quote MooTools 1.2 and how to call your script in Domready.
Today begins the 2nd lecture of this series of tutorials. In this talk, we'll learn several ways to choose HTML elements. In many ways, this is the most basic mootools. After all, to create an interactive user experience based on HTML elements, you must first hold them in your hands.
The Basic method
$();
The $ function is the basic selector in MooTools. You can select a DOM element from an ID by using it.
Reference code:
Copy Code code as follows:
Select an element with an ID of "Body_wrap"
$ (' body_wrap ');
Reference code:
Copy Code code as follows:
<div id= "Body_wrap" >
</div>
. GetElement ();
. GetElement (); The $ method is extended to allow you to simplify your choice of operations. For example, you can select an element with the id "Body_wrap" by using the $ method, and then select the first child node ... getelement (), select only one element, and return the first element if more than one element meets the requirements. If you give. GetElement (); method a CSS class masterpiece as a parameter, you get the first element that has the CSS class name, not the array of all the elements of the function. To select more than one element, you can use the following. GetElements () method.
Reference code:
Copy Code code as follows:
Select the first link below the element with ID "Body_wrap"
$ (' Body_wrap '). GetElement (' a ');
Select an element with the id "Special_anchor" below the element with ID "Body_wrap"
$ (' Body_wrap '). GetElement (' #special_anchor ');
Select element with id "Body_wrap" the first CSS class named "Special_anchor_class"
$ (' Body_wrap '). GetElement ('. Special_anchor_class ');
Reference code:
Copy Code code as follows:
<div id= "Body_wrap" >
<a href= "#" >anchor</a>
<a href= "#" >another anchor</a>
<a id= "Special_anchor" href= "#" >special anchor</a>
<a class= "Special_anchor_class" href= "#" >special anchor</a>
<a class= "Special_anchor_class" href= "#" >another Special anchor</a>
</div>
$$();
The $$ function allows you to quickly select multiple elements and form an array (a list that you can manipulate, get, and reorder in any way). You can select multiple elements by tag name (such as Div, A, IMG, etc.), or IDs or their various combinations. As one reader points out, you can do a lot of things with $$, far beyond what we've described here.
Reference code:
Copy Code code as follows:
Select all div in this page
$$ (' div ');
Select the element with ID "Id_name" and all the div
$$ (' #id_name ', ' div ');
Reference code:
Copy Code code as follows:
<div>
<div>a div</div>
<span id= "Id_name" >a span</span>
</div>
. getelements ();
. getelements (); GetElement (); very similar, but it returns all the elements that meet the requirements and makes up an array. You may want to use the. getelement (), the method to use. getelements ();.
Reference code:
Copy Code code as follows:
Select all links below the element with ID "Body_wrap"
$ (' Body_wrap '). GetElements (' a ');
Select all the CSS classes named "Special_anchor_class" below the element with ID "Body_wrap"
$ (' Body_wrap '). GetElements ('. Special_anchor_class ');
Reference code:
Copy Code code as follows:
<div id= "Body_wrap" >
<a href= "#" >anchor</a>
<a href= "#" >another anchor</a>
<a class= "Special_anchor_class" href= "#" >special anchor</a>
<a class= "Special_anchor_class" href= "#" >another Special anchor</a>
</div>
Include and exclude results with operators
Operator
MooTools 1.2 supports several operators, allowing you to further streamline your choice of operations. You can use these operators in. getelements () to include or exclude specific results. MooTools supports 4 operators, each of which can be used to select an INPUT element by name.
=: equal To
Reference code:
Select the INPUT element with name "Phone_number"
$ (' Body_wrap '). GetElements (' input[name=phone_number] ');
^=: To ... Begin
Reference code:
Select the input element whose name starts with "Phone"
$ (' Body_wrap '). GetElements (' input[name^=phone] ');
$=: To ... End
Reference code:
Select the input element with name ending in digits (number)
$ (' Body_wrap '). GetElements (' input[name$=number] ');
!=: Not equal to
Reference code:
Select the input element whose name does not equal "address"
$ (' Body_wrap '). GetElements (' input[name!=address] ');
Reference code:
<div id= "Body_wrap" >
<input name= "Address" type= "text"/>
<input name= "Phone_number" type= "text"/> <!--all of the sample code above will select this element-->
</div>
(Fdream Note: input here is just an example, you can also use this way to select other elements, such as Div, a, and so on.) ）
To use an operator, you must first specify the type of element (such as the input here), then specify the attributes you want to filter (such as the name here), plus your operator, and finally select your filter string.
Selector based on element order
Even (even selection)
With this simple selector, you can choose an element with an even number ordinal. Note: This selector is counted starting from 0, so the first element is even ordered.
Reference code:
Select a div with an even number
$$ (' Div:even ');
Reference code:
<div>Even</div><!--The above code will select this element-->
<div>Odd</div>
<div>Even</div><!--The above code will select this element-->
<div>Odd</div>
Odd (odd selection)
Just like even, it chooses an element with an odd number.
Reference code:
Select all div with odd numbers
$$ (' div:odd ');
Reference code:
<div>Even</div>
<div>Odd</div><!--The above code will select this element-->
<div>Even</div>
<div>Odd</div><!--The above code will select this element-->
. GetParent ();
By using the. GetParent () method, you can get the parent element of an element.
Reference code:
Select the parent element of the element with ID "child_id"
$ (' child_id '). GetParent ();
Reference code:
<div id= "parent_id" > <!--the script above will return this element-->
<div id= "child_id" >Even</div>
</div>
Code examples
Any MooTools UI development starts with a selector. Here are some very simple examples that demonstrate how to manipulate DOM elements using selectors.
Reference code:
Sets the background color for all spans to #eee
$$ (' span '). SetStyle (' Background-color ', ' #eee ');
Sets the background color for all spans with odd numbers as #eee
$$ (' span:odd '). SetStyle (' Background-color ', ' #eee ');
Sets the background color for all CSS classes under the element with ID Body_wrap as. Middle_spans is #eee
$ (' Body_wrap '). GetElements ('. Middle_spans '). SetStyle (' Background-color ', ' #eee ');
Reference code:
Copy Code code as follows:
<div id= "Body_wrap" >
<span>Even</span>
<span class= "Middle_spans" >Odd</span>
<span class= "Middle_spans" >Even</span>
<span>Odd</span>
</div>
Download the zip package and try
This ZIP package contains a simple HTML file, a MooTools 1.2 core library, an external JS file, and an example of what you see above.
Learn more ...
This does not mean that this is a list of all the features of the MooTools 1.2 selector, just to help you get started and tell you what MooTools has to offer you. To learn more about selectors, refer to the following documentation:
- There are a lot of documents about element selectors here
- By the way, you can also look at the selector (selectors)
MooTools blog on the $$ selector article
This is a very good mootools.net on the $$ selector and the introduction of its Changeable blog article. By using this selector you can do things you can't believe, and this article is well worth reading.
Slickspeed Selector
Here's another experiment for mootools to measure how fast the different libraries are when selecting elements. This is cool for itself, but the examples of these selectors are very valuable. All selector features here can be implemented through the $$ method.
The Consortium selector
MooTools also allows you to take advantage of the power of the pseudo selector (as shown by the slickspeed above). This is the A article about selectors , it must be worth reading (if only the list of selectors is useful to you). I'm not sure MooTools's $$ selector supports each of the individual selectors on this page, but at least most of them. You are welcome to tell me more about this.
