If you are not ready, please read the previous article "Mootools 1.2 Tutorial (1) - Introduction to MooTools". We talked about how to reference MooTools 1.2 and how to call your script in domready.
Today we will start the second lesson of this series of tutorials. In this lecture, we will learn several ways to select HTML elements. In many ways, this is the most basic thing that MooTools uses the most. After all, to create an interactive user experience based on HTML elements, you must first take them into your hands.
Basic Methods
$();
The $ function is the basic selector in MooTools. You can select the DOM element based on an ID through it.
Reference code:
// Select the element with ID "body_wrap"
$('body_wrap');
Reference code:
<div >
</div>
.getElement();
.getElement(); extends the $ method, which allows you to simplify your selection operations. For example, you can select the element with ID "body_wrap" through the $ method and select the first child node. .getElement(); selects only one element, and if there are multiple elements that meet the requirements, the first element will be returned. If you give the .getElement(); method a CSS class name as a parameter, you will get the first element with this CSS class name, not an array of all elements of the function. To select multiple elements, you can use the .getElements(); method below.
Reference code:
// Select the first link below the element with ID "body_wrap"
$('body_wrap').getElement('a');
// Select the element with the ID "special_anchor" below the element with the ID "body_wrap"
$('body_wrap').getElement('#special_anchor');
// Select the element with the first CSS class named "special_anchor_class" below the element with ID "body_wrap"
$('body_wrap').getElement('.special_anchor_class');
Reference code:
<div >
<a href="#">anchor</a>
<a href="#">another anchor</a>
<a 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, retrieve, and reorder in any way). You can select multiple elements by tag names (such as div, a, img, etc.), or IDs, or various combinations of them. As one reader points out, there are a lot you can do with $$, far beyond what we've covered here.
Reference code:
// Select all divs in this page
$$('div');
// Select the element with ID "id_name and all divs
$$('#id_name', 'div');
Reference code:
<div>
<div>a div</div>
<span >a span</span>
</div>
.getElements();
.getElements(); and .getElement(); are very similar, but it returns all elements that meet the requirements and forms an array. You can use .getElements(); like this using the .getElement(); method.
Reference code:
// Select all links below the element with ID "body_wrap"
$('body_wrap').getElements('a');
// Select all child elements with CSS class name "special_anchor_class" under the element with ID "body_wrap"
$('body_wrap').getElements('.special_anchor_class');
Reference code:
<div >
<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
Operators
MooTools 1.2 supports several operators, which can further streamline your selection operations. You can use these operators in .getElements(); to include or exclude specific results. MooTools supports 4 kinds of 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]');
^= : Start with...
Reference code:
// Select the input element whose name starts with "phone"
$('body_wrap').getElements('input[name^=phone]');
$= : Ended with...
Reference code:
// Select the input element whose name ends with a number (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 >
<input name="address" type="text" />
<input name="phone_number" type="text" /> <!-- All the above example codes will select this element -->
</div>
(Fdream Note: input is just as an example here. You can also use this method to select other elements, such as div, a, etc.)
To use an operator, you must first specify the type of the element (such as input here), then specify the attribute you want to filter (such as name here), add your operator, and finally select your filter string.
Selector based on element order
Even (even number selection)
With this simple selector, you can select elements with even numbers. Note: This selector counts 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)
Like even, except that it selects elements with odd numbers.
Reference code:
// Select all divs 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();
Through 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 > <!-- The above script will return this element -->
<div >Even</div>
</div>
Code example
Any MooTools UI development starts with selectors. Here are some very simple examples that demonstrate how to use selectors to operate DOM elements.
Reference code:
// Set the background color of all spans to #eee
$$('span').setStyle('background-color', '#eee');
// Set the background color of all spans with odd numbers to #eee
$$('span:odd').setStyle('background-color', '#eee');
// Set the background color of all spans with the name of .middle_spans under the element with ID of body_wrap to #eee
$('body_wrap').getElements('.middle_spans').setStyle('background-color', '#eee');
Reference code:
<div >
<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 it
This zip package contains a simple html file, MooTools 1.2 core library, an external js file and the examples you see above.
Today we will start the second lesson of this series of tutorials. In this lecture, we will learn several ways to select HTML elements. In many ways, this is the most basic thing that MooTools uses the most. After all, to create an interactive user experience based on HTML elements, you must first take them into your hands.
Basic Methods
$();
The $ function is the basic selector in MooTools. You can select the DOM element based on an ID through it.
Reference code:
Copy the codeThe code is as follows:
// Select the element with ID "body_wrap"
$('body_wrap');
Reference code:
Copy the codeThe code is as follows:
<div >
</div>
.getElement();
.getElement(); extends the $ method, which allows you to simplify your selection operations. For example, you can select the element with ID "body_wrap" through the $ method and select the first child node. .getElement(); selects only one element, and if there are multiple elements that meet the requirements, the first element will be returned. If you give the .getElement(); method a CSS class name as a parameter, you will get the first element with this CSS class name, not an array of all elements of the function. To select multiple elements, you can use the .getElements(); method below.
Reference code:
Copy the codeThe code is as follows:
// Select the first link below the element with ID "body_wrap"
$('body_wrap').getElement('a');
// Select the element with the ID "special_anchor" below the element with the ID "body_wrap"
$('body_wrap').getElement('#special_anchor');
// Select the element with the first CSS class named "special_anchor_class" below the element with ID "body_wrap"
$('body_wrap').getElement('.special_anchor_class');
Reference code:
Copy the codeThe code is as follows:
<div >
<a href="#">anchor</a>
<a href="#">another anchor</a>
<a 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, retrieve, and reorder in any way). You can select multiple elements by tag names (such as div, a, img, etc.), or IDs, or various combinations of them. As one reader points out, there are a lot you can do with $$, far beyond what we've covered here.
Reference code:
Copy the codeThe code is as follows:
// Select all divs in this page
$$('div');
// Select the element with ID "id_name and all divs
$$('#id_name', 'div');
Reference code:
Copy the codeThe code is as follows:
<div>
<div>a div</div>
<span >a span</span>
</div>
.getElements();
.getElements(); and .getElement(); are very similar, but it returns all elements that meet the requirements and forms an array. You can use .getElements(); like this using the .getElement(); method.
Reference code:
Copy the codeThe code is as follows:
// Select all links below the element with ID "body_wrap"
$('body_wrap').getElements('a');
// Select all child elements with CSS class name "special_anchor_class" under the element with ID "body_wrap"
$('body_wrap').getElements('.special_anchor_class');
Reference code:
Copy the codeThe code is as follows:
<div >
<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
Operators
MooTools 1.2 supports several operators, which can further streamline your selection operations. You can use these operators in .getElements(); to include or exclude specific results. MooTools supports 4 kinds of 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]');
^= : Start with...
Reference code:
// Select the input element whose name starts with "phone"
$('body_wrap').getElements('input[name^=phone]');
$= : Ended with...
Reference code:
// Select the input element whose name ends with a number (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 >
<input name="address" type="text" />
<input name="phone_number" type="text" /> <!-- All the above example codes will select this element -->
</div>
(Fdream Note: input is just as an example here. You can also use this method to select other elements, such as div, a, etc.)
To use an operator, you must first specify the type of the element (such as input here), then specify the attribute you want to filter (such as name here), add your operator, and finally select your filter string.
Selector based on element order
Even (even number selection)
With this simple selector, you can select elements with even numbers. Note: This selector counts 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)
Like even, except that it selects elements with odd numbers.
Reference code:
// Select all divs 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();
Through 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 > <!-- The above script will return this element -->
<div >Even</div>
</div>
Code example
Any MooTools UI development starts with selectors. Here are some very simple examples that demonstrate how to use selectors to operate DOM elements.
Reference code:
// Set the background color of all spans to #eee
$$('span').setStyle('background-color', '#eee');
// Set the background color of all spans with odd numbers to #eee
$$('span:odd').setStyle('background-color', '#eee');
// Set the background color of all spans with the name of .middle_spans under the element with ID of body_wrap to #eee
$('body_wrap').getElements('.middle_spans').setStyle('background-color', '#eee');
Reference code:
Copy the codeThe code is as follows:
<div >
<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 it
This zip package contains a simple html file, MooTools 1.2 core library, an external js file and the examples you see above.
Learn more...
This does not mean that this is the full list of MooTools 1.2's selector, it's just to get started and tell you what MooTools provides you with. To learn more about selectors, please refer to the following documentation:
- There are a lot of related things hereElementSelector's documentation
- You can also take a lookSelectors
Articles on the MooTools Blog about $$ selector
This is a very good article about$$ selector and introduce it to its variedblog post. With this selector you can do more than you can't believe, and this article is worth reading.
Slickspeed selector
Here is an experiment done by someone else on MooTools to measure how fast different libraries are when selecting elements. This is cool for itself, butThese selectorsExamples are very valuable. All selector features can be implemented here through the $$ method.
W3C selector
MooTools also lets you take advantage of the power of a pseudo-selectror (as proved by Slickspeed above). This is W3CAn article about selectors, it must be worth reading (if only the list of selectors is useful to you). I'm not sure if MooTools' $$ selector supports every single selector on this page, but at least the vast majority. Everyone is welcome to tell me more about this.