Introduction to MooTools 1.2

Introduction to MooTools 1.2 JavaScript Library
MooTools 1.2 is a powerful and lightweight JavaScript library specially developed to reduce interactive JavaScript in the Web. To some extent, you can think of MooTools as an extension of CSS. For example, CSS allows you to change when you move the mouse up. JavaScript allows you to get more time (click events, mouse hover events, keyboard events...), and MooTools makes it all very easy.
In addition, MooTools has various very good extensions that allow you not only to change the properties of an element, but also to have "morph" or "tween" attributes, allowing you to create animation effects, just like you see on my navigation menu (Fdream note: original author, my homepage also has it).
This is just an example, MooTools can let you do more. Over the next 30 days, we will dive into the MooTools library and explore everything from arrays (Arrays) and functions (Functions) to other bundled plugins.
Quote MooTools 1.2
First, download and reference the MooTools 1.2 core library.
Download MooTools 1.2 Core Library
Upload the MooTools 1.2 core library to your server or workspace
Link MooTools 1.2 core library within the head tag of your HTML document
Reference code:

(Fdream Note: Now after MooTools 1.2 is downloaded, the default suffix name is ".txt", please change the suffix to ".js".)
Add Script tags within the Head tag
Now that you have applied MooTools to your page, you need a place to write your code. Here are two options:
1. Write the following code in your head tag and your code in the script tag:
Reference code:

2. Create a JavaScript file externally and link this file at the head of the page:
Reference code:

Here you can use either way. I usually put the methods called in the domready event between the script tags, and my functions are placed in an external file.
Put the code in domready
The method of MooTools must be called in the domready event.
Reference code:

(Fdream Note: This is not exactly the case, but it can ensure that your JavaScript code makes as few errors as possible. By the way, the domready event: When the HTML code of the page (excluding pictures, flash, etc., just code) is downloaded, the domready event will be triggered. This allows you to execute your script before the page is fully downloaded (including pictures, flash, etc.), thereby avoiding the script being unable to be executed because a large image takes a long time to be placed, resulting in exceptions.)
Put the code in a function
You can still create your function outside of domready and then call it in domready:
Reference code:


Detailed introduction to the library
In this first lecture, we will take a closer look at some key components of this library architecture, and then take a rough look at other basic functions.
Core
The core part contains some common functions of the MooTools library to complete some common tasks, and also strengthens many original functions (more introduction will be introduced later). The following content is just as some examples of the MooTools function and does not replace you reading MooTools' documentation.
Check a value (returns false if there is no value or is 0) - $chk(value);
Returns a random integer between two values ​​- $random(min, max);
It can more easily detect browsers, browser engines and browser capabilities
(Fdream Note: The first description is incorrect. $chk(value) just checks whether a value has been defined or assigned. It will return true when it is 0, and only if it is undefined or null returns false.)
Native (local object)
This section of the library also contains some common tools that allow you to easily manipulate arrays (Arrays, simple lists of values ​​or objects), functions (Functions), values ​​(Numbers), strings (Strings), hash objects (Hash), and events (Events). Here are some tool features in local objects:
Execute a script on each element in the array - .each();
Get the last element in the array - .getLast();
An event is triggered for each x millisecond - .periodical();
Round the decimals - .round();
Convert rgb to hexadecimal (HEX) - .rgbToHex();
Class (class)
A JavaScript class (relative to CSS class), is an object that functions can be reused. To learn more about the MooTools class, you can check out this brief introduction to Valerio (MooTools class - how to use them). I also recommend David Walsh's MooTools class template.
Element
The Element class of the MooTools library provides some very useful features. Through 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 for handling DOM elements:
Select the first DOM element of the specified type by ID or CSS class name - .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 property value of an element - .setProperty();
Get the style attribute value of an element - .getStyle();
Change the style attribute value of an element - .setStyle();
Get the coordinate position of an element - .getCoordinates();
(Dream Note: It is not recommended to have multiple identical IDs in a page, so it is best not to appear. Unforeseen errors are prone to occur under some browsers.)
Utilities
Utilities provide more excellent selection logic, including domready events, tools that can manage AJAX calls, tools that can easily manage cookies, and even "swiff" functions that can provide JavaScript interfaces to ActionScript.
FX (effect)
This is probably the most interesting part of MooTools. With Fx (effect), you can create "Tween" and "morph" effects to move your DOM objects.
Create an animation deformation between two style attribute values ​​(such as making a div grow smoothly) - var myFx = new (element);
Create an animation deformation between multiple different attribute values ​​(for example, in the process of making a div grow flat, make its border become increasingly initial and at the same time change its background color) - var myFx = new (element);
Request
Contains some tools that can easily handle JavaScript XMLHttpRequest (AJAX) functionality. To alleviate the pain caused by the entire request/response, the Request object also has some extensions specifically used to deal with HTML and JSON objects (JavaScript object notation).
Plugins (plugins)
The MooTools plugin extends core functionality to easily add advanced UI features to your web projects. The plugin list is as follows:



Drag

Color
Group

Sortables
Tips
SmoothScroll
Slider
Scroller
Assets
Accordion
Global Overview
Before starting the next lecture, take a moment to take a comprehensive look at the MooTools documentation. There may be some places you don’t understand very well, just read them through and absorb what you understand. Over the next 29 days, we will gradually dig into specific parts of this library and then break down MooTools into small, easy-to-digestible parts, but first, be sure to take a good look at the entire directory.
More learning
A compressed package containing everything you need to get started
Includes a MooTools 1.2 core library, a simple HTML file, an external JavaScript file for writing your functions, and a CSS stylesheet file. This HTML file has been commented in detail and contains the domready event.

MooTools 1.2 Memo
Here is a good summary table of MooTools 1.2 functions. I just printed one for myself and was looking for a place to hang it up. Maybe I should have visited the printers by the way and have them give me a poster-sized :). one way or another,Here is the link to the MooTools 1.2 memo。