MooTools 1.2 JavaScript Library Introduction
MooTools 1.2 is a powerful, lightweight JavaScript library 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 when the mouse is moved. JavaScript allows you to touch more time (click events, mouse hover events, keyboard events ...). MooTools makes it all very easy.
In addition, MooTools has a variety of very good extensions that let you not only change the attributes of an element, but also allow you to have "morph" or "tween" (motion tween) properties that give you the ability to create animation effects, As you can see on my navigation menu (Fdream Note: Original author's, my homepage also has).
This is just an example, MooTools can let you do more things. Over the next 30 days, we'll delve into the MooTools library, exploring everything from arrays and functions (function) to Fx.slide, and other bundled plug-ins.
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 your HTML document header head tag
Reference code:
Copy Code code as follows:
<script src= "Mootools-1.2-core.js" type= "Text/javascript" ></script>
(Fdream Note: Now mootools 1.2 download, the default suffix name is ". txt", please change the suffix to ". js". ）
Add a script tag within the head tag
Now that you've applied mootools to your page, you'll need a place to write your code. Here are a couple of options:
1. Write the following code within your head tag, and your code is written in the script tag:
Reference code:
Copy Code code as follows:
<script type= "Text/javascript" >
Mootools Code goes here
</script>
2. Create a JavaScript file externally, and then link the file to the page header:
Reference code:
Copy Code code as follows:
<script src= "Myjavascriptfile.js" type= "Text/javascript" ></script>
Here, you can use any one way. I usually place the method called in the Domready event between the script tags, and my functions are placed in an external file.
Put the code in the Domready.
The MooTools method must be called in the Domready event.
Reference code:
Copy Code code as follows:
Window.addevent (' Domready ', function () {
Examplefunction ();
});
(Fdream Note: Not exactly, but you can make sure that your JavaScript code makes as few mistakes as possible.) By the way Domready event: When the page's HTML code (excluding pictures, Flash, and so on, just code) is finished downloading, the Domready event is triggered. This allows you to execute your script before the full download of the page (including pictures, flash, etc.) is performed, thus preventing the script from executing because a large picture is going to take a long time to complete, causing the exception to occur. ）
Put the code in a function
You can still create your function outside of domready and call it in Domready:
Reference code:
Copy Code code 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 the library architecture, and then look at the other basic features roughly.
Core (cores)
The core section contains some common functions (function) of the MooTools library to accomplish some of the usual tasks, as well as many of the original features (described later). The following are just some examples of mootools functionality and do not replace the documents you read MooTools.
Checks for a value (returns False if no value or 0)-$chk (value);
Returns a random integer between two values-$random (min, max);
The ability to detect browsers, browser engines, and browsers more easily
(Fdream Note: The first description is incorrect, $chk (value) simply checks whether a value has been defined or assigned, returns True when 0, and returns false only undefined or null. ）
Native (Local object)
This section of the library also includes public tools that allow you to easily manipulate arrays (array, value, or simple list of objects), functions (function), numeric (number), String (strings), hash objects (hash), and events (event). Here are some of the tool features in the local object:
Each element in an array executes a script-. each ();
Gets the last element in the array-. GetLast ();
Each X-millisecond triggers an event-. Periodical ();
Rounding decimal-. Round ();
Convert RGB to 16 (HEX)-. Rgbtohex ();
Class (Class)
A JavaScript class (as opposed to a CSS class) is an object that functionality can be reused. To learn more about the MooTools class, you can take a look at Valerio's brief article (MooTools class-How to use them). I also recommend David Walsh's MooTools class template.
Element (elements)
The MooTools Library's element class provides some very useful features. With this class, you can choose the DOM elements, manipulate their properties and locations, and change their CSS style. Here are some of the very powerful tools MooTools provides for dealing with DOM elements:
Select the DOM element of the first 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 ();
Gets the attribute value of an element-. GetProperty ();
Change the attribute value of an element-. SetProperty ();
Gets the style attribute value of an element-. GetStyle ();
Change the style attribute value of an element-. SetStyle ();
Gets the coordinate position of an element-. Getcoordinates ();
(Fdream Note: It is not recommended to have multiple identical IDs on a page, preferably not, and in some browsers it is easy to make unforeseen mistakes.) ）
Utilities (Practical tool)
The utility (Utilities) provides more sophisticated selection logic, including Domready events, tools that can manage Ajax invocations, tools to easily manage cookies, and even the "Swiff" feature, JavaScript interfaces can be provided to ActionScript.
FX (effect)
This may be the most interesting part of MooTools. With the FX (effect), you can create "Tween" (motion Tween) and "Morph" (animated animation) effects so that your DOM objects move.
Creates an animation variant between two style attribute values (for example, let a div flatten out)-var myfx = new Fx.tween (element);
Create an animation variant between several different property values (for example, in the process of letting a div flatten out, make its border more and more original, and transform its background color)-var myfx = new Fx.morph (element);
Request (requests)
Contains tools that allow you to easily handle JavaScript XMLHttpRequest (AJAX) features. To mitigate the pain of the entire request/response (Request/response), the Request object also has extensions that are specifically designed to handle HTML and JSON objects (JavaScript Object notation).
Plugins (plugin)
The MooTools plug-in expands the core functionality to easily add advanced UI functionality to your Web project. The list of Plug-ins 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
Take a moment to get a complete look at the MooTools document before you start the next lecture. There may be places you don't understand, don't care about it, read through it, and absorb what you know. Over the next 29 days, we'll step into the library-specific section and break the MooTools down into some easy to digest parts, but first, make sure you have a good look at the entire directory.
Learn More
A compressed package that contains everything you need to start a startup.
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 already been written with detailed comments and contains domready events.
MooTools 1.2 Memo
Here is a good mootools 1.2 function of the induction table, I just printed a copy, is looking for a place to hang it up. Maybe I should drop by the printer and have them give me a poster size:). Anyway, here is a link to the MooTools 1.2 memo.
