Introduction to MooTools 1.2

Introduction to MooTools 1.2 JavaScript Library
MooTools 1.2 is a powerful lightweight JavaScript library designed to reduce interactive JavaScript development on the Web. To some extent, you can think that MooTools is an extension of CSS. For example, CSS allows you to change when you move the mouse up. JavaScript allows you to access more time (Click Event, mouse hover event, keyboard event ......), MooTools makes it easy.
In addition, MooTools also has a variety of very good extensions that allow you not only to change the attributes of an element, but also to have "morph" (deformation) or the "tween" attribute allows you to create animation effects, just as you can see on my navigation menu (Fdream Note: Original Author's, my homepage is also available ).
This is just an example. MooTools allows you to do more things. In the next 30 days, we will go deep into the MooTools library and explore everything from arrays and functions to Fx. Slide and other bundled plug-ins.
Reference MooTools 1.2
First, download and reference the core library of MooTools 1.2.
Download the MooTools 1.2 core library
Upload the MooTools 1.2 core library to your server or Workspace
Link the MooTools 1.2 core library within the head mark of your HTML document
Reference code:
Copy codeThe Code is as follows:
<Script src = "mootools-1.2-core.js" type = "text/javascript"> </script>

(Fdream Note: After MooTools 1.2is downloaded, the suffix is ". js".)
Add a Script tag to the Head tag.
Now that you have applied MooTools on your page, you still need a place to write your code. There are two options:
1. Write the following code in your head tag and your code in the script Tag:
Reference code:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
// Mootools code goes here
</Script>

2. Create a JavaScript file externally and link the file to the header of the page:
Reference code:
Copy codeThe Code is as follows:
<Script src = "myJavaScriptFile. js" type = "text/javascript"> </script>

You can use either of the following methods. I usually place the methods called in the domready event between the script tag, and my functions in the external file.
Put the code in domready
The MooTools method must be called in the domready event.
Reference code:
Copy codeThe Code is as follows:
Window. addEvent ('domainready', function (){
ExampleFunction ();
});

(Fdream note: this is not the case, but it can ensure that your JavaScript code has as few errors as possible. By the way, the domready event is triggered when the HTML code (excluding images, flash, and so on) on the page is downloaded. In this way, you can execute your script before the page is completely downloaded (including images and flash), so that the script cannot be executed because a large image takes a long time, in this case, an exception occurs .)
Put the code in a function
You can still create your function outside domready and call it in domready:
Reference code:
Copy codeThe Code is as follows:
Var exampleFunction = function (){
Alert ('hello ')
};
Window. addEvent ('domainready', function (){
ExampleFunction ();
});


Database details
In the first lecture, we will take a closer look at some of the key components of the Library Architecture, and then roughly look at other basic functions.
Core)
The core part includes some common functions of the MooTools library to complete some common tasks. It also enhances many of the original functions (which will be detailed later ). The following content is just an example of the functions of MooTools, and does not replace reading the documents of MooTools.
Check a value (false if there is no value or 0)-$ chk (value );
Returns a random integer between two values-$ random (min, max );
It can more easily detect the browser, the browser engine and the browser's capabilities
(Fdream Note: The first description is incorrect. $ chk (value) only checks whether a value has been defined or assigned a value. If it is 0, true is returned, returns false only when undefined or null .)
Native (local object)
This part of the Library also contains some public tools that allow you to easily operate arrays (arrays, simple lists of values or objects), functions, and numbers), String, Hash, and Event ). Here are some tool features of the local object:
Execute a script for each element in the array-. each ();
Get the last element in the array-. getLast ();
One event is triggered every x milliseconds-. periodical ();
Integer-. round ();
Convert rgb to HEX-. rgbToHex ();
Class)
A JavaScript class (relative to a CSS class) is an object that can be reused by a function. To learn more about the MooTools class, read Valerio's brief introduction Article (MooTools class -- how to use them ). I also recommend the MooTools template of David Walsh.
Element)
The Element class of the MooTools Library provides some very useful functions. With this class, you can select DOM elements, manipulate their attributes and positions, and change their CSS style. Here are some very powerful tools provided by MooTools to process DOM elements:
Use ID or CSS class name to select the first DOM element of the specified type-. getElements ();
Select All DOM elements with the same ID or CSS class name-. getElements ();
Add a CSS class to an element-. addClass ();
Get the attribute value of an element-. getProperty ();
Change the attribute value of an element-. setProperty ();
Get the style attribute value of an element-. getStyle ();
Change the style attribute value of an element-. setStyle ();
Obtain the Coordinate Position of an element-. getCoordinates ();
(Fdream Note: it is not recommended to have multiple identical IDs on a page. It is better not to appear. Unexpected errors may easily occur in some browsers .)
Utilities (utility)
Utilities provides more sophisticated selection logic, including domready events, tools that can manage AJAX calls, tools that can easily manage cookies, and even the "swiff" function, javaScript interfaces can be provided to ActionScript.
FX (effect)
This may be the most interesting part of MooTools. With Fx, you can create "Tween" and "morph" effects to make your DOM objects move.
Create an animation deformation between two style property values (for example, to make a div grow gently)-var myFx = new Fx. Tween (element );
Create an animation deformation between multiple different attribute values (for example, in the process of flattening a div, make its border more and more early, and change its background color at the same time) -var myFx = new Fx. morph (element );
Request)
Includes some tools that can easily handle JavaScript XMLHttpRequest (AJAX) functions. To alleviate the pain of the entire request/response, the Request object has some extensions dedicated to processing HTML and JSON objects (JavaScript Object Notation.
Plugins)
The MooTools plug-in extends its core functions to easily add advanced UI functions to your web project. The following is a list of plug-ins:
Fx. Slide
Fx. Scroll
Fx. Elements
Drag
Drag. Move
Color
Group
Hash. Cookie
Sortables
Tips
SmoothScroll
Slider
Scroller
Assets
Accordion
Global overview
Before the next lecture, take a full look at the documents of MooTools. Maybe you don't understand it in some places, just read it, and then absorb what you know. In the next 29 days, we will gradually go deep into the specific part of this database, and then break down MooTools into a small part that is easy to digest, but first, we must take a look at the entire directory.
Learn more
A compressed package contains everything you need to start.
Includes a core library of MooTools 1.2, a simple HTML file, an external JavaScript file used to write your function, and a CSS style table file. The HTML file has been annotated in detail and contains a domready event.

MooTools 1.2 Memorandum
Here is a good induction table for the MooTools 1.2 function. I printed a copy for myself and am looking for a place to hook it up. Maybe I should visit the printer by the way and ask them to provide me with a poster size :). In any case, here is the link to the MooTools 1.2 memorandum.