Mootools 1.2 tutorial (3) Introduction to array

Document directory

• Extended learning

Today, let's take a look at how to use arrays to manage DOM elements.
Basic Method
. Each ();
When processing arrays, The. each (); method is your best friend. It provides an easy way to traverse every element of an array. If necessary, you can perform any logic processing on the elements. For example, we can assume that you need to call the alert method for each div object on the page:
Reference code: Copy codeThe Code is as follows: $ ('div '). each (function (){
Alert ('a div ');
});

If the following HTML code is used, the above JavaScript code will pop up two alert dialogs, one for each div.
Reference code:Copy codeThe Code is as follows: <div> One </div>
<Div> Two </div>

. Each (); you do not need to use the $ method for the method. Another way to create an array (as we mentioned yesterday) is to use the. getElements (); method.
Reference code:Copy codeThe Code is as follows: $ ('body _ wrap '). getElements ('div'). each (function (){
Alert ('a div ');
});

Reference code:Copy codeThe Code is as follows: <div id = "body_wrap">
<Div> One </div>
<Div> Two </div>
</Div>

Another way to complete this same task is to assign this array to a variable and then use. each () for that variable. Method:
Reference code:Copy codeThe Code is as follows: // first, you need to declare a variable using the statement "var VARIABLE_NAME ".
// Then assign a value to this variable using the equal operator "= ".
// In this example, an array containing div elements
Var myArray = $ ('body _ wrap '). getElements ('div ');
// Now you can use this variable as an array selector.
MyArray. each (function (){
Alert ('a div ');
});

Finally, if you want to separate your function from the selector. We will explain this question in more detail in tomorrow's tutorial on using functions. However, now we can create a very simple example:
Reference code:Copy codeThe Code is as follows: var myArray = $ ('body _ wrap '). getElements ('div ');
// To create a function, you can declare a variable as you just did and name it
// Use "function ()" after the equal sign to declare this variable as a function
// Finally, write your function code between {And}
Var myFunction = function (){
Alert ('a div ');
};
// Now you can call the function in. each ();. method.
MyArray. each (myFunction );

Note: When you call a function in the. each ();. method, you do not need to quote the function name.
Copy an array
$
MooTools provides A simple way to copy an array through the $ A function. Let's use variables to create an array as we just did:
Reference code:Copy codeThe Code is as follows: // create your array variable
Var myArray = $ ('body _ wrap '). getElements ('div ');

Copy an array (create a copy of the array ):
Reference code:Copy codeThe Code is as follows: // create a new variable name named "myCopy" and assign the copy of "myArray" to it
Var myCopy = $ A (myArray );

Obtain the specified element from the array.
. GetLast ();
. GetLast (); method returns the last element in the array. First, we create an array:
Reference code:Copy codeThe Code is as follows: var myArray = $ ('body _ wrap '). getElements ('div ');

Now we can get the last element from this array:
Reference code:Copy codeThe Code is as follows: var lastElement = myArray. getLast ();

The current value of the variable lastElement is the last element in the array myArray.
. GetRandom ();
It is the same as. getLast (); but it randomly retrieves an element from the array:
Reference code:Copy codeThe Code is as follows: var randomElement = myArray. getRandom ();

The current value of the variable randomElement is an element randomly selected from the array myArray.
Add an element to the array
. Include ();
With this method, you can add another element to the array. You only need to pass the element selector to The. include (); method, which will include it in your array. We use the following HTML code:
Reference code:Copy codeThe Code is as follows: <div id = "body_wrap">
<Div> one </div>
<Div> two </div>
<Span id = "add_to_array"> add to array </span>
</Div>

We can create an array by calling all the divs under "body_wrap" as before:
Reference code:Copy codeThe Code is as follows: var myArray = $ ('body _ wrap '). getElements ('div ');

To add another element to this array, you must first assign the element to a variable and then use the include method:
Reference code:Copy codeThe Code is as follows: // first, assign your element to a variable.
Var newToArray = $ ('add _ to_array ');
// Add it to the array
MyArray. include (newToArray );

Now, this array contains both div and span elements.
. Combine ();
The method is the same as. include (); method, but it allows you to add an array to an existing array without worrying about repeated content. Suppose we get two arrays from the following HTML:
Reference code:Copy codeThe Code is as follows: <div id = "body_wrap">
<Div> one </div>
<Div> two </div>
<Span class = "class_name"> add to array </span>
<Span class = "class_name"> add to array, also </span>
<Span class = "class_name"> add to array, too </span>
</Div>

We can create two arrays as follows:
Reference code:Copy codeThe Code is as follows: // create your array as we did before
Var myArray = $ ('body _ wrap '). getElements ('div ');
// Create an array of elements for all CSS classes named. class_name
Var newArrayToArray =array $ ('. class_name ');

Now we can use the. combine (); Method to merge two arrays. This method will process repeated elements by itself, so we do not need to deal with it:
Reference code:Copy codeThe Code is as follows: // combines the array newArrayToArray into the array myArray
MyArray. combine (newArrayToArray );

Now myArray contains all the elements in newArraytoArray.
Sample Code
Array allows you to traverse the list containing all projects and execute the same code for each element. In this example, pay attention to the use of the variable "item" as an alternative to the current element.
Reference code:Copy codeThe Code is as follows: // create an array that contains all the elements of the CSS class named. class_name in "body_wrap ".
Var myArray = $ ('body _ wrap '). getElements ('. class_name ');
// First create an element to be added to the array
Var addSpan = $ ('addtoarray ');
// Create an array to be merged
Var addmedia=$ ('. addmedia ');
// Now we add the element addSpan to the array.
MyArray. include (addSpan );
// Merge the array addparts into myArray
MyArray. combine (addmedia );
// Create a function to execute each element in the array
Var myArrayFunction = function (item ){
// Item now points to the current element in the array
Item. setStyle ('background-color', '# eee ');
}
// Call the myArrayFunction function for each item in the array.
MyArray. each (myArrayFunction );

Reference code:Copy codeThe Code is as follows: <div id = "body_wrap">
<Div class = "class_name"> one </div> <! -- This has gray background -->
<Div> two </div>
<Div class = "class_name"> three </div> <! -- This has gray background -->
<Span id = "addtoarray"> add to array </span> <! -- This has gray background -->
<Br/> <span class = "addbench"> one of classes </span> <! -- This has gray background -->
<Br/> <span class = "addbench"> two of California </span> <! -- This has gray background -->
</Div>

Extended learning

This tutorial does not cover all the things you can do on arrays, but I hope to give you a reference to tell you what functions MooTools provides. To learn more about arrays, read these carefully:

• Array section in the document
• This page contains a lot of information about JavaScript arrays.

Download a zip package containing everything you need

Includes a simple html file, the core library of MooTools 1.2, an external JavaScript file, a css file, and all the above examples.