Today, we will start the 2nd lecture in this series of tutorials. In this lecture, we will learn several methods to select HTML elements. In many ways, this is the most basic use of MooTools. After all, to create an interactive user experience based on HTML elements, you must first put them in your hands. If you are not ready, 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 2nd lecture in this series of tutorials. In this lecture, we will learn several methods to select HTML elements. In many ways, this is the most basic use of MooTools. After all, to create an interactive user experience based on HTML elements, you must first put them in your hands.
Basic Method
$ ();
$ Function is the basic selector in MooTools. You can use it to select DOM elements based on an ID.
Reference code:
The Code is as follows:
// Select the element with the ID "body_wrap"
$ ('Body _ wrap ');
Reference code:
The Code is as follows:
. GetElement ();
. GetElement (); extends the $ method to simplify your selection. For example, you can use the $ method to select the "body_wrap" element and select the first subnode .. GetElement (); select only one element. If multiple elements meet the requirements, the first element is returned. If you give the. getElement (); method a CSS class name as the parameter, you will get the first element with the CSS class name, instead of the array of all the elements of the function. To select multiple elements, you can use the following. getElements (); method.
Reference code:
The Code is as follows:
// Select the first link under the element with ID "body_wrap"
$ ('Body _ wrap '). getElement ('A ');
// Select the element whose ID is "body_wrap" and whose ID is "special_anchor"
$ ('Body _ wrap '). getElement (' # special_anchor ');
// Select the element whose ID is "body_wrap" and whose first CSS class is "special_anchor_class"
$ ('Body _ wrap '). getElement ('. special_anchor_class ');
Reference code:
The Code is as follows:
Anchor
Another anchor
Special anchor
Special anchor
Another special anchor
$ ();
$ Functions allow you to quickly select multiple elements and form an array (a list that you can operate, retrieve, and reorder in any way ). You can select multiple elements by tag names (such as p, a, and img), ID, or their combinations. As a reader pointed out, you can use $ to do many things, far beyond what we have described here.
Reference code:
The Code is as follows:
// Select all p
$ ('P ');
// Select the id_name element and all p
$ ('# Id_name', 'P ');
Reference code:
The Code is as follows:
A p
A span
. GetElements ();
. GetElements (); is very similar to. getElement (); but it returns all the elements that meet the requirements and forms an array. You can use. getElements (); As the. getElement (); method ();.
Reference code:
The Code is as follows:
// Select all links under the element with the ID "body_wrap"
$ ('Body _ wrap '). getElements ('A ');
// Select the child element whose ID is "body_wrap" and whose CSS class name is "special_anchor_class"
$ ('Body _ wrap '). getElements ('. special_anchor_class ');
Reference code:
The Code is as follows:
Anchor
Another anchor
Special anchor
Another special anchor
Use operators to include and exclude results
Operator
MooTools 1.2 supports several operators, allowing you to further streamline your selection operations. You can use these operators in. getElements (); to include or exclude specific results. MooTools supports four operators, each of which can be used to select an input element by name.
=: Equal
Reference code:
// Select the input element whose name is "phone_number"
$ ('Body _ wrap '). getElements ('input [name = phone_number]');
^ =: ...... Start
Reference code:
// Select the input element whose name starts with "phone"
$ ('Body _ wrap '). getElements ('input [name ^ = phone]');
$ =: ...... End
Reference code:
// Select the input element whose name ends with a number
$ ('Body _ wrap '). getElements ('input [name $ = number]');
! =: Not equal
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 p and .)
To use an operator, you must first specify the element type (such as input here), then specify the attribute you want to filter (such as the name here), and add your operator, finally, select your filter string.
Element sequence-based Selector
Even (select an even number)
With this simple selector, you can select an element with an even number. Note: This selector starts counting from 0, so the first element is in an even order.
Reference code:
// Select p with an even number
$ ('P: even ');
Reference code:
Even
Odd
Even
Odd
Odd)
Like even, it only selects an element with an odd number.
Reference code:
// Select all p with an odd number
$ ('P: odd ');
Reference code:
Even
Odd
Even
Odd
. GetParent ();
By using the. getParent (); method, you can obtain the parent element (parent) of an element ).
Reference code:
// Select the parent element of the element whose ID is "child_id"
$ ('Child _ id'). getParent ();
Reference code:
Even
Code example
Any MooTools UI development starts with selector. Here are some very simple examples to demonstrate how to use a selector 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 span with an odd number to # eee
$ ('Span: odd'). setStyle ('background-color', '# eee ');
// Set the background color of all the CSS classes named. middle_spans under the element whose ID is body_wrap to # eee
$ ('Body _ wrap '). getElements ('. middle_spans '). setStyle ('background-color',' # eee ');
Reference code:
The Code is as follows:
Even
Odd
Even
Odd
Download the zip package and try again
This zip package contains a simple html file, the core library of MooTools 1.2, an external js file, and the example above.
Learn more ......
This does not mean that this is a list of all functions of the MooTools 1.2 selector. It just helps you get started and shows you what functions MooTools provides. To learn more about selector, refer to the following documents:
- There are a lot of documents about Element selectors.
- By the way, let's take a look at Selectors)
$ Selector articles on MooTools Blog
This is a good post on mootools.net about $ selector and its varied blog. With this selector, you can do things that you cannot believe. This article is worth reading.
Slickspeed Selector
Here we have an experiment on MooTools to measure how quickly different libraries choose elements. This is cool for itself, but examples of these selectors are very valuable. All selector features can be implemented through the $ method.
W3C Selector
MooTools also allows you to leverage the power of pseudo selector (as demonstrated by Slickspeed above ). Here is a W3C article about selector. It must be worth reading (if only the selector list is useful to you ). I'm not sure whether the $ selector of MooTools supports every single selector on this page, but at least the vast majority. Let me know more about this.
