If you are not ready yet, please read the previous article "Mootools 1.2 Tutorial (1) - Introduction to MooTools" first. We talked about how to reference MooTools 1.2 and how to call your scripts in domready. Today we start the second lecture of this series of tutorials. In this lesson, we'll learn several ways to select HTML elements. In many ways, this is the most used and basic of MooTools. After all, to create an interactive user experience based on HTML elements, you must first have them in your hands. Basic methods $(); $ function is the basic selector in MooTools. You can use it to select DOM elements based on an ID. Reference code:
.getElement(); . getElement(); extends the $ method, allowing you to simplify your selection operations. For example, you can use the $ method to select the element with the ID "body_wrap" and then select the first child node. .getElement(); Selects only one element. If there are multiple elements that meet the requirements, the first element is returned. If you give the .getElement(); method a CSS class name as a parameter, you will get the first element with that CSS class name, rather than an array of all elements of the function. To select multiple elements, you can use the .getElements(); method below. Reference code:
// Select the ID as " The first link under the element with the 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 first element with CSS class name "special_anchor_class" under the element with ID "body_wrap" $('body_wrap ').getElement('.special_anchor_class');
$$ (); 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 name (such as div, a, img, etc.), or ID, or various combinations of them. As one reader pointed out, you can do a lot more with $$ than we've covered here. Reference code:
. getElements(); .getElements(); is very similar to .getElement();, but it returns all elements that meet the requirements and form an array. You can use .getElements( like the .getElement(); method. );. Reference code:
// Select all links under the element with ID "body_wrap" $('body_wrap').getElements('a'); // Select the element with ID "body_wrap" All the child elements with the CSS class name "special_anchor_class" below $('body_wrap').getElements('.special_anchor_class');
Include and exclude with operators Results Operators MooTools 1.2 supports several operators that allow you to further streamline your selection 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]'); ^=: Start with... Reference code: //Select the input element whose name starts with "phone" $('body_wrap').getElements('input[name^=phone]' ; $=number]'); != : Not equal to Reference code: // Select the input element whose name is not equal to "address" $('body_wrap').getElements('input [name!=address]'); Reference code:
(Fdream note: Input is just an example here, you can also use this method to select other elements, such as div, a, etc.) To use the operator, you must first specify the type of the element (such as input here), and then Specify the attribute you want to filter (such as name here), plus 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 starts counting from 0, so the first element is in even order. Reference code: // Select the div with an even number $$('div:even'); Reference code:
Even
< !-- The above code will select this element-->
Odd
Even
Odd
odd (odd selection) Same as even, except that it selects elements with odd numbers. Reference code: // Select all divs with odd numbers $$('div:odd'); Reference code:
Even
Odd
Even
Odd .getParent(); Through the .getParent(); method, you can get the parent element (parent) of an element. Reference code: // Select the parent element of the element with ID "child_id" $('child_id').getParent(); Reference code:
Even
Code example Any MooTools UI development starts with selectors. Here are some very simple examples demonstrating how to use selectors to manipulate 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 ID to body_wrap The background color of all spans with the CSS class name .middle_spans under the element is #eee $('body_wrap').getElements('.middle_spans').setStyle('background-color', '#eee'); Reference code:
Download the zip package and Try it This zip package contains a simple html file, the MooTools 1.2 core library, an external js file and the example you see above.
Learn more…
This does not mean that this is the complete list of features of the selector in MooTools 1.2, it is just to help you get started and tell you what features MooTools provides you. To learn more about selectors, please refer to the following documentation:
There is a lot of documentation about the Element selector
This is a very good blog post on mootools.net about the $$ selector and its many variations . You’ll never believe what you can do with this selector, and this article is well worth a read.
Slickspeed Selector
Here is an experiment done by others on MooTools to measure how fast different libraries are when selecting elements. This is cool in its own right, but these selector examples are very valuable. All selector features here can be implemented through the $$ method.
W3C Selector
MooTools also lets you harness the power of pseudo-selectors (as demonstrated by Slickspeed above). Here is a W3C article about selectors that is definitely 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 most of them. Feel free to tell me more about this.
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
How to return to the homepage from an html subpage
The role of pycharm
How to solve error1
Introduction to shortcut keys for minimizing windows windows
Detailed explanation of oracle substr function usage
What platform is Kuai Tuan Tuan?
WiFi is connected but there is an exclamation mark
How to open mdf file
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
