MooTools 1.2 Introduction_Mootools

MooTools 1.2 JavaScript library introduction
MooTools 1.2 is a powerful lightweight JavaScript library, specially designed to ease interactive JavaScript development in the Web. In a way, you can think of MooTools as an extension of CSS. For example, CSS allows you to change things when you mouse over them. JavaScript allows you to touch more events (click events, mouseover events, keyboard events...), and MooTools makes it very easy.
In addition, MooTools also has a variety of very good extensions that allow you not only to change the properties of an element, but also allow you to have "morph" (deformation) or "tween" (tween animation) properties. , giving you the ability to create animated effects like the ones you see on my navigation menu (Fdream note: from the original author, also on my homepage).
This is just an example, MooTools allows you to do more. Over the next 30 days, we'll dive into the MooTools library, exploring everything from Arrays and Functions to Fx.Slide, and other bundled plugins.
Reference MooTools 1.2
First, download and reference the MooTools 1.2 core library.
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 tag of your HTML document
Reference code:

Copy code The code is as follows:

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

Copy code The code is as follows:

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

Copy code The code is as follows:

Here, you can use any method. I usually put the methods called in the domready event between script tags, and my functions in external files.
Put the code in domready
MooTools methods must be called in the domready event.
Reference code:

Copy code The code is as follows:

window.addEvent('domready ', function() {
exampleFunction();
});

(Fdream note: This is not exactly the case, but it can ensure that your JavaScript code has as few errors as possible. By the way, the domready event: When the HTML code of the page (not including pictures, flash, etc., just the code) is downloaded, the domready event will be triggered. This way, the page can be completely downloaded (including pictures, flash, etc.) ) before executing your script to avoid exceptions caused by the script not being able to execute because a large picture will take a long time to download)
Put the code in a function
You can still create it outside of domready. your function and then call it in domready:
Reference code:

Copy code The code is as follows:

var exampleFunction = function() {
alert('hello')
};
window.addEvent('domready', function() {
exampleFunction();
});

A detailed introduction to the library
In this first lecture, we will take a closer look at some of the key components of this library's architecture, and then take a cursory look at other basic features.
Core
The core part contains some public functions of the MooTools library to complete some common tasks, and also enhances many original functions (details will be introduced later). The following content is only used as some examples of MooTools functions and does not replace your reading of MooTools documentation.
Checks for a value (returns false if there is no value or is 0) - $chk(value);
Returns a random integer between two values ​​- $random(min, max);
Okay Easier to detect browsers, browser engines and browser capabilities
(Fdream note: the first description is wrong, $chk(value) just checks whether a value has been defined or assigned, when it is 0 Will return true, only return false if undefined or null)
Native (local object)
This part of the library also contains some public tools that allow you to easily manipulate arrays (Arrays, values ​​or objects). simple list), function, number, string, hash object and event. Here are some utility features in native objects:
Execute a script for each element in the array - .each();
Get the last element in the array - .getLast();
Each Trigger an event for )
A JavaScript class (as opposed to a CSS class) is an object whose functionality can be reused. To learn more about MooTools classes, you can check out this simple introductory article by Valerio (MooTools Classes – How to Use Them). I also recommend David Walsh’s MooTools templates.
Element (Element)
The Element class of the MooTools library provides some very useful functions. Through this class, you can select DOM elements, manipulate their properties and positions, and change their CSS styles. Here are some very powerful tools for processing DOM elements provided by MooTools:
Select the first DOM element of a specified type by ID or CSS class name - .getElements();
Select all with the same ID or CSS class DOM element named - .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();
Get the coordinate position of an element - .getCoordinates ();
(Fdream note: It is not recommended to have multiple identical IDs in one page. It is best not to appear. Unforeseen errors may easily occur in some browsers.)
Utilities
Utilities provide more sophisticated selection logic, including domready events, tools that can manage AJAX calls, tools that can easily manage cookies, and even a "swiff" function that can provide a JavaScript interface to ActionScript.
FX (Effects)
This is probably the most interesting part of MooTools. Through Fx (effect), you can create "Tween" (tween animation) and "morph" (morph animation) effects to animate your DOM objects.
Create an animated transformation between two style attribute values ​​(such as making a div grow gently) - var myFx = new Fx.Tween(element);
Create between multiple different attribute values An animation transformation (for example, in the process of making a div gradually grow larger, its border becomes smaller and smaller, and its background color changes at the same time) - var myFx = new Fx.Morph(element);
Request (request )
Contains tools to easily handle JavaScript XMLHttpRequest (AJAX) functionality. To ease the pain of the entire request/response, the Request object also has some extensions designed to handle HTML and JSON objects (JavaScript Object Notation).
Plugins
MooTools plug-ins extend the core functionality and can easily add advanced UI features to your web projects. The list of plugins is as follows:
Fx.Slide
Fx.Scroll
Fx.Elements
Drag
Drag.Move
Color
Group
Hash.Cookie
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 parts that you don't understand, so don't worry about it. Just read it through and absorb what you understand. Over the next 29 days, we'll gradually dive into specific parts of the library and break down MooTools into digestible bite-sized pieces, but first, be sure to take a good look at the entire catalog.
Learn more

A zipped package that contains everything you need to get started

Includes a MooTools 1.2 core library, a simple HTML file, and a script to write your The function of an external JavaScript file, a CSS style sheet file. This HTML file has been written with detailed comments and contains the domready event.

MooTools 1.2 Memo
Here is a good summary list of MooTools 1.2 functions. I just printed a copy for myself and am looking for a place to hang it up. Maybe I should stop by the printer and ask them to provide me with a poster-sized one :). Anyway, here is the link to the MooTools 1.2 cheat sheet.