SoFunction
Updated on 2025-04-14

Prototype1.4 manual

Developer Manual

Corresponding version 1.4.0

original article by sp('Sergio Pereira') Sergio Pereira

last update: March 30th 2006

Chinese version:THIN

Last updated: 2006-3-31

I was really unhappy to see a good thing that was not used by many people in China, so I spent a lot of effort to translate this manual into Chinese.Since this article is very long, the translation work is very heavy and some English versions are not explained clearly. Although I have to check the source code, I am fortunately I have not done it. Please encourage me! ^o^
It is a very elegant basic JavaScript library. It has made a lot of extensions to JavaScript and supports Ajax well. There are multiple effect libraries implemented based on this type of library abroad, which is also very good.
It is not only a js library with great practical value, but also has high learning value. So I strongly recommend that B/S developers and friends who are interested in JS development browse some of its source code, which contains a lot of gems. You will definitely think that reading its source code is a pleasure, of course you have to understand it, haha.
Someone has also written a source code interpretation of version 1.3 on the Internet, so you can find it. However, version 1.4 has made a great expansion, so I hope some friends will write a source code interpretation of version 1.4.
A few explanations:

  • A friend said that someone has translated prototype, haha, that's right, it means you have paid attention to it before, but it turned out that the document was translated from version 1.3, and version 1.4 has many important extensions, and version 1.5 is now available, so there are not much changes.
  • Some friends said it was useful and there was no translation. Please, but the parameter descriptions of each method were not translated. Many of these instructions are of what type. It is better to do it if you have time. Just put it first. Sorry, it is already very tiring to turn it into this program. After all, it is so long.
  • I can only make CHM documents, because I don’t have this time and have never done CHM. I think it’s similar to CHM after typing the web page.

 

What is it?

If you have never used a famous one, let me tell youIs it fromSam StephensonA JavaScript class library written. This is a wonderful concept and compatible with standard class libraries, which can help you easily create rich client pages with highly interactive web2.0 features.

If you've tried using it recently, you probably understand that documentation is not a strong point for the author. Like many developers who used this library before, at the beginning, I had to dive into the source code I read and experiment with its functions. I think it is a good thing to share what I have learned with everyone after I have learned it.

At the same time, in this article, I will also provide a question about the objects, classes, functions, extensions provided by this class library.Unofficial reference

When reading this document, developers familiar with Ruby will notice that some of Ruby's built-in classes and this class library extension implementation are very similar.

Related Articles

Advanced JavaScript guide.

Some practical functions

This library comes with a lot of predefined objects and practical functions, and the purpose of these things is obviously to free you from some duplicate typing.

Use the $() method

The $() method is a convenient abbreviation for using the () method too frequently in the DOM. Just like this DOM method, this method returns the element of the id passed in the parameter.

This is better than the method in DOM. You can pass in multiple ids as arguments and then $() returns an Array object with all the required elements.

<HTML>
<HEAD>
<TITLE> Test Page </TITLE>
<script src="prototype-1.3."></script>
<script>
function test1()
{
var d = $('myDiv');
alert();
}
function test2()
{
var divs = $('myDiv','myOtherDiv');
for(i=0; i<; i++)
{
alert(divs[i].innerHTML);
}
}
</script>
</HEAD>
<BODY>
<div >
<p>This is a paragraph</p>
</div>
<div >
<p>This is another paragraph</p>
</div>
<input type="button" value=Test1 onclick="test1();"><br>
<input type="button" value=Test2 onclick="test2();"><br>
</BODY>
</HTML>

Another advantage is that this function can be passed into the object ID represented by string, or into the object itself, which is very useful when creating other functions that can pass two types of parameters.

Use the $F() function

The $F() function is another popular "shortcut key" that can be used to return the value of any form input control, such as text box, drop-down list. This method can also use the element id or the element itself as parameters.

<script>
function test3()
{
alert( $F('userName') );
}
</script>
<input type="text"  value="Joe Doe"><br>
<input type="button" value=Test3 onclick="test3();"><br>

use$A()function

The $A() function can convert the single parameter it receives into an Array object.

This method, combined with the Array class extended by this class library, can easily convert any enumerable list into or copy to an Array object. A recommended usage is to convert DOM Node Lists into an ordinary Array object, so as to traverse more efficiently. Please see the following example.

<script>
function showOptions(){
var someNodeList = $('lstEmployees').getElementsByTagName('option');
var nodes = $A(someNodeList);
(function(node){
alert( + ': ' + );
});
}
</script>
<select  size="10" >
<option value="5">Buchanan, Steven</option>
<option value="8">Callahan, Laura</option>
<option value="1">Davolio, Nancy</option>
</select>
<input type="button" value="Show the options" onclick="showOptions();" >

use$H()function

The $H() function converts some objects into an enumerable Hash object similar to a union array.

<script>
function testHash()
{
//let's create the object
var a = {
first: 10,
second: 20,
third: 30
};
//now transform it into a hash
var h = $H(a);
alert(()); //displays: first=10&second=20&third=30
}
</script>

use$R()function

$R() is the abbreviation of new ObjectRange(lowBound, upperBound, excludeBounds).

Jump toObjectRangeYou can see a complete description of this class in the class document. At this time, let’s take a look at an example to show what methods this abbreviation can replace. Some other related knowledge can be found inEnumerableFound in the object document.

<script>
function demoDollar_R(){
var range = $R(10, 20, false);
(function(value, index){
alert(value);
});
}
</script>
<input type="button" value="Sample Count" onclick="demoDollar_R();" >

use()function

()Methods make it very easy to implement the requirement that when you want to call different methods until one of them succeeds, it takes a series of methods as parameters and executes these methods one by one in order until one of them is successfully executed, returning the return value of the method that was successfully executed.

In the following example,It's easy to use in some browsers, butWorks properly in other browsers. use()Methods We can get the return value of the method that works normally.

<script>
function getXmlNodeValue(xmlNode){
    return (
        function() {return ;},
        function() {return ;)
        );
}
</script>
  

AjaxObject

The common methods mentioned above are very good, but when it comes to it, they are not the most advanced things. Are they? You may have written these yourself and even have similar functions in your scripts. But these methods are just the tip of the iceberg.

I'm pretty sure the reason you're interested in is most likely due to its AJAX capabilities. So let's explain how this package makes it easier when you need to complete AJAX logic.

AjaxAn object is a predefined object created by this package and written for encapsulation and simplificationAJAXThe cunning code involved in the function. This object contains a series of classes that encapsulate AJAX logic. Let's take a look at several of these categories.

usekind

If you don't use any help packages, you're likely writing a whole lot of code to createXMLHttpRequestThe object is tracked asynchronously, and then parses out the response and processes it. You will feel very lucky when you don't need to support more than one type of browser.

In order to support AJAX functionality. This package is defined kind.

If you have an application that can be passed through the urlhttp://yoursever/app/get_sales?empID=1234&year=1998Communication with the server. It returns the following XML response.

<?xml version="1.0" encoding="utf-8" ?>
<ajax-response>
<response type="object" >
<monthly-sales>
<employee-sales>
<employee-id>1234</employee-id>
<year-month>1998-01</year-month>
<sales>$8,115.36</sales>
</employee-sales>
<employee-sales>
<employee-id>1234</employee-id>
<year-month>1998-02</year-month>
<sales>$11,147.51</sales>
</employee-sales>
</monthly-sales>
</response>
</ajax-response>

useIt is very simple to communicate with the server and get this XML. The following example demonstrates how it is done.

<script>
function searchSales()
{
var empID = $F('lstEmployees');
var y = $F('lstYears');
var url = 'http://yoursever/app/get_sales';
var pars = 'empID=' + empID + '&year=' + y;


var myAjax = new (
url,
{
method: 'get',
parameters: pars,
onComplete: showResponse
});


}
function showResponse(originalRequest)
{
//put returned XML in the textarea
$('result').value = ;
}
</script>
<select  size="10" onchange="searchSales()">
<option value="5">Buchanan, Steven</option>
<option value="8">Callahan, Laura</option>
<option value="1">Davolio, Nancy</option>
</select>
<select  size="3" onchange="searchSales()">
<option selected="selected" value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
</select>
<br><textarea id=result cols=60 rows=10 ></textarea>

You noticed the incomingIs the second object of the constructor? parameter{method: 'get', parameters: pars, onComplete: showResponse}Represents the true writing of an anonymous object. He means that the object you passed in has a namemethodThe value is'get' attribute,Another attribute name isparametersContains the query string for HTTP requests, and aonCompleteProperties/methods contain functionsshowResponse。

There are some other properties that can be defined and set in this object, such asasynchronous, can betrueorfalseTo determine whether AJAX calls to the server are asynchronous (the default value istrue）。

This parameter defines the options for AJAX calls. In our example, in the first parameter, the url is requested through the HTTP GET command, and a variable is passed inparsThe query string contained, The object will be called when it completes receiving the responseshowResponsemethod.

Maybe you know,XMLHttpRequestProgress is reported during HTTP requests. This progress is described as four different stages:Loading, Loaded, Interactive, orComplete. You can makeThe object calls a custom method at any stage,CompleteIt is the most commonly used one. If you want to call a custom method, you only need to simply call the requested option parameter.onXXXXXProvides custom method objects in properties/methods. Just like in our exampleonComplete. The method you pass in will be called with a parameter, which isXMLHttpRequestThe object of yourself. You will use this object to get the returned data and perhaps check the HTTP result code contained in this callstatusproperty.

There are two other useful options for processing results. We canonSuccessPass a method at the option, and it is called after AJAX is executed correctly. On the contrary, it can also beonFailureA method is passed in the option, which is called when an error occurs on the server side. Just asonXXXXXThe same method is passed in. When these two are called, one with an AJAX request is also passed.XMLHttpRequest object.

Our example doesn't handle this XML response in any interesting way, we just put this XML into a text field. A typical application to this response is likely to find the information you want, and then update certain elements of the page, or even some XSLT conversions to produce some HTML in the page.

In version 1.4.0, a new event return external mechanism was introduced. If you have a piece of code that is always going to execute for a special event, regardless of which AJAX call raises it, then you can use the new oneObject.

Suppose you want to show some prompt effects when an AJAX call is running, like a constantly turning icon, you can do it with two global event Handlers, one of which shows the icon at the beginning of the first call and the other hides the icon when the last call is finished. Look at the example below.

<script>
var myGlobalHandlers = {
onCreate: function(){
('systemWorking');
},
onComplete: function() {
if( == 0){
('systemWorking');
}
}
};
(myGlobalHandlers);
</script>
<div id='systemWorking'><img src=''>Loading...</div>

For a more complete explanation, please refer torefer toandAjax Options Reference。

usekind

If the information returned by the other end of your server is already HTML, then use this packageClass will make your life easier. To use it, you just need to provide which element needs to be filled with HTML returned by the AJAX request. The example is clearer than what I wrote.

<script>
function getHTML()
{
var url = 'http://yourserver/app/getSomeHTML';
var pars = 'someParameter=ABC';


var myAjax = new (
'placeholder',
url,
{
method: 'get',
parameters: pars
});


}
</script>
<input type=button value=GetHtml onclick="getHTML()">
<div ></div>

As you can see, this code is more concise than the previous example, not includingonCompleteMethod, but an element id is passed in the constructor. Let's modify the code a little to describe how it becomes possible to handle server segmentation errors on the client.

We will add more options to specify a method to handle errors. This is foronFailureOptions to complete. We also specified oneplaceholderIt will only be filled after a successful request. To accomplish this we modified the first parameter from a simple element id to an object with two attributes.success(Everything is used when everything is OK) andfailure(It is used when something goes wrong) Not used in the following examplefailureAttributes, but only inonFailureUsedreportErrormethod.

<script>
function getHTML()
{
var url = 'http://yourserver/app/getSomeHTML';
var pars = 'someParameter=ABC';


var myAjax = new (
{success: 'placeholder'},
url,
{
method: 'get',
parameters: pars,
onFailure: reportError
});


}
function reportError(request)
{
alert('Sorry. There was an error.');
}
</script>
<input type=button value=GetHtml onclick="getHTML()">
<div ></div>

If your server logic is returned with HTML tags to return JavaScript code,The object can execute that JavaScript code. In order to make this object respond to JavaScript, you simply add it to the object constructor of the last parameterevalScripts: trueproperty. But it is worth reminding that, like the option name evalScripts suggests, these scripts will be executed, but they will not be added to the Page script. "What's the difference?", you might ask. Let's assume the request address returns something like this:

<script language="javascript" type="text/javascript">
function sayHi(){
alert('Hi');
}
</script>
<input type=button value="Click Me" onclick="sayHi()">

If you've tried this before, you know that these scripts won't work as you expected, because the script will be executed, but script execution like the one above does not create a function called sayHi, it does nothing. If we want to create a function, we should change the code to the following:

<script language="javascript" type="text/javascript">

sayHi = function(){
alert('Hi');
};

</script>
<input type=button value="Click Me" onclick="sayHi()">

Why don't we use the var keyword to declare this variable (referring to sayHi) in the above code, because the function created in that way will be just a local variable of the current script block (at least in IE). Without writing the var keyword, the scope of the created object is the window we expect.

For more related knowledge, please see referenceandoptions reference.

Enumeration... Oh! Oh!

You know, we all do loops like this, build an Array, organize them with elements, and then build a loop structure (for, foreach, while) to access each element through index numbers, and then use this element to do some actions.

When you think of this, you will find that almost every time you write loop code, you will use an Array sooner or later. So, wouldn't it be great if Array objects can provide more functions for their iterators to use? This is true. In fact, many programming languages ​​provide some such functions in their Array or other similar structures (such as Collections, Lists).

Now, give us oneEnumerableObject, it implements many tips for interacting with iterable data. Compared with the original JS object, it is betterArray classExtends all functions to use for enumeration.

Loop, Ruby style

In standard javascript, if you want to display all elements in an array, you can write it well like the following code:

<script>
function showList(){
var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg'];

      for(i=0;i<;i++){
alert(simpsons[i]);
}

}
</script>
<input type="button" value="Show List" onclick="showList();" >

Using our new best friend, we can write it like this

   function showList(){
var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg'];

      ( function(familyMember){
alert(familyMember);
});

}

You might think "very weird way...relatively old, this grammar is so weird". Oh, in the above example, there is really nothing, and in this stern example, there has not changed much, even so, please continue reading.

Before continuing the following, do you notice the function that is passed as a parameter to each function? We understand it as an iterator function.

Your arrays on steroids

As we mentioned above, it is very common to use the same attributes and functions as the same type (Common, I don't know if it should be translated into general or vulgar). Let's see how to take advantage of the iterative features of our new horsepower-powered Arrays.

Find an element according to the criteria.

<script>
function findEmployeeById(emp_id){
var listBox = $('lstEmployees')
var options = ('option');
options = $A(options);
var opt = options.find( function(employee){
return ( == emp_id);
});
alert(); //displays the employee name
}
</script>
<select  size="10" >
<option value="5">Buchanan, Steven</option>
<option value="8">Callahan, Laura</option>
<option value="1">Davolio, Nancy</option>
</select>
<input type="button" value="Find Laura" onclick="findEmployeeById(8);" >

Now let's take another game and see how to filter elements in an Array and get the members we want from each element.

<script>
function showLocalLinks(paragraph){
paragraph = $(paragraph);
var links = $A(('a'));
//find links that do not start with 'http'
var localLinks = links.findAll( function(link){
var start = (0,4);
return start !='http';
});
//now the link texts
var texts = localLinks.pluck('innerHTML');
//get them in a single string
var result = texts.inspect();
alert(result);
}
</script>
<p >
This <a href="/">text</a> has
a <a href="#localAnchor">lot</a> of
<a href="#otherAnchor">links</a>. Some are
<a href="/">external</a>
and some are <a href="#someAnchor">local</a>
</p>
<input type=button value="Find Local Links" onclick="showLocalLinks('someText')">

The above code is just a little practice that makes people fall in love with this syntax. Please seeEnumerableandArrayAll functions of

 

refer to

JavaScript class extension

One way for class libraries to achieve powerful functions is to extend existing JavaScript classes.

rightObject extension

Method Kind Arguments Description
extend(destination, source) static destination: any object, source: any object Provides a method to achieve inheritance by copying all sources with image attributes and functions to objective functions
inspect(targetObj) static targetObj: any object Returns a literal description of the target object with good readability. If the object instance does not define an inspect function, the value of the toString function is returned by default.

Extensions to Number

Method Kind Arguments Description
toColorPart() instance (none) Returns the hexadecimal representation of the number. It is useful when converting an RGB number into HTML representation.
succ() instance (none) Returns the next number, this method can be used in iterative call scenarios.
times(iterator) instance iterator: a function object conforming to Function(index) Calls the iterator function repeatedly passing the current index in the indexargument. Repeatly call the iterator function and pass the index parameter of the current index to the iterator.

The following example shows 0-9 with a prompt box.

<script>
function demoTimes(){
var n = 10;
(function(index){
alert(index);
});
/***************************
* you could have also used:
*      (10).times( .... );
***************************/
}
</script>
<input type=button value="Test ()" onclick="demoTimes()">

rightFunction extension

Method Kind Arguments Description
bind(object) instance object: the object that owns the method Returns an instance of function, which is the same as the structure of the source function, but it has been bound to the object provided in the parameter, that is, the pointer in the function points to the parameter object.
bindAsEventListener(object) instance object: the object that owns the method The usage is the same as the bind above, the difference is that it is used to bind events.

Let's see how these extensions are applied.

<input type=checkbox id=myChk value=1> Test?
<script>
//declaring the class
var CheckboxWatcher = ();
//defining the rest of the class implementation
 = {
initialize: function(chkBox, message) {
 = $(chkBox);
 = message;
//assigning our method to the event


 =
(this);


},
showMessage: function(evt) {
alert( + ' (' +  + ')');
}
};
var watcher = new CheckboxWatcher('myChk', 'Changed');
</script>

Extensions to String

Method Kind Arguments Description
stripTags() instance (none) Returns a string that removes all HTML or XML tags.
stripScripts() instance (none) Returns a string that removes all scripts.
escapeHTML() instance (none) Returns a string that escapes all HTML tags appropriately.
unescapeHTML() instance (none) Inversion of escapeHTML().
extractScripts() instance (none) Returns an array containing all <script>s found in string.
evalScripts() instance (none) Execute all <script>s found in string.
toQueryParams() instance (none) Split querystring only a joint Array using parameter name as index, which is more like a hash.
parseQuery() instance (none) Same as toQueryParams().
toArray() instance (none) Convert strings into character arrays.
camelize() instance (none) Convert a string concatenated with hyphen into a camel-style string. For example, when writing code, it is very useful to use this function as a style tool.

rightArrayExtensions

Because array extends to enumerable, array can be used for all enumerable objects functions. In addition, the following are also implemented.

Method Kind Arguments Description
clear() instance (none) Clear.
compact() instance (none) Returns an array that does not include null or undefined elements in the source array. This method does not change the source array.
first() instance (none) Returns the first object of the array.
flatten() instance (none) Return a "flat" one-dimensional array by recursively combining the child elements of each element of the array (if the element is also an array).
indexOf(value) instance value: what you are looking for. Returns the element giving the number position (calculated from 0). If no object is found at that position, return -1.
inspect() instance (none) Overload inspect() to return a better formatted character description that reflects each element of Array.
last() instance (none) Returns the last element.
reverse([applyToSelf]) instance applyToSelf: indicates if the array itself should also be reversed. Reverse the order of elements in Array. If no parameters are given, or the parameter is true, the order of elements in the source Array is also reversed, otherwise the source Array remains unchanged.
shift() instance (none) Returns the first element of Array and removes it from Array, Length-1 of Array.
without(value1 [, value2 [, .. valueN]]) instance value1 ... valueN: values to be excluded if present in the array. Returns an Array that excludes elements contained in the parameter list from the source Array.

documentDOM extension

Method Kind Arguments Description
getElementsByClassName(className [, parentElement]) instance className: name of a CSS class associated with the elements, parentElement: object or id of the element that contains the elements being retrieved. Returns all elements whose CSS className attributes are equal to the className parameter. If parentElement is not given, the document body will be searched. (I think it is better to use document here, because sometimes some pages do not have body)

EventExtended

Property Type Description
KEY_BACKSPACE NumberNumber 8: Constant. Code for the Backspace key.
KEY_TAB Number 9: Constant. Code for the Tab key.
KEY_RETURN Number 13: Constant. Code for the Return key.
KEY_ESC Number 27: Constant. Code for the Esc key.
KEY_LEFT Number 37: Constant. Code for the Left arrow key.
KEY_UP Number 38: Constant. Code for the Up arrow key.
KEY_RIGHT Number 39: Constant. Code for the Right arrow key.
KEY_DOWN Number 40: Constant. Code for the Down arrow key.
KEY_DELETE Number 46: Constant. Code for the Delete key.
observers: Array List of cached observers. Part of the internal implementation details of the object.

Method Kind Arguments Description
element(event) static event: an Event object Returns the event source object.
isLeftClick(event) static event: an Event object If the left mouse button is clicked, return true.
pointerX(event) static event: an Event object Returns the X coordinate of the mouse.
pointerY(event) static event: an Event object Returns the Y coordinate of the mouse.
stop(event) static event: an Event object Use this function to interrupt the default behavior of events and prevent passing (bubbling).
findElement(event, tagName) static event: an Event object, tagName: name of the desired tag. Start searching up the DOM tree from the event source object until the first element that matches tagName is found
observe(element, name, observer, useCapture) static element: object or id, name: event name (like 'click', 'load', etc), observer: function to handle the event, useCapture: if true, handles the event in the capture phase and if false in the bubbling phase. Add a handler to an event of the object.
stopObserving(element, name, observer, useCapture) static element: object or id, name: event name (like 'click'), observer: function that is handling the event, useCapture: if true handles the event in the capture phase and if false in the bubbling phase. Contrary to the above function.
_observeAndCache(element, name, observer, useCapture) static   Private function, don't worry about it.
unloadCache() static (none) Private function, don't worry about it. Clear all observers caches from memory.

The following code shows how to add a load event handler to window.

<script>
(window, 'load', showMessage, false);
function showMessage() {
alert('Page loaded.');
}
</script>

Define new objects and classes in

Another thing that this package helps you is to provide many objects that support object-oriented design concepts and have common functions.

The PeriodicalExecuter object

This object provides the logic of repeatedly calling a method at a certain interval.

Method Kind Arguments Description
[ctor](callback, interval) constructor callback: a parameterless function, interval: number of seconds Creating an instance of this object will repeatedly call the given method.

Property Type Description
callback Function() The method being called, the method cannot pass parameters.
frequency Number The interval in seconds.
currentlyExecuting Boolean Indicates whether this method is being executed.

The Prototype object

PrototypeIt doesn't have much importance, it just declares the version of the package.

Property Type Description
Version String Version.
emptyFunction Function() Empty function.
K Function(obj) A function that only returns parameters.
ScriptFragment String Identify script regularity.

The Enumerable object

The Enumberable object can be used to enumerate the structure of list styles in a more elegant way.

Many other objects obtain these useful interfaces by extending from Enumerable objects.

Method Kind Arguments Description
each(iterator) instance iterator: a function object conforming to Function(value, index) Take each element as the first parameter, and the element's index as the first parameter to call the iterator function.
all([iterator]) instance iterator: a function object conforming to Function(value, index) This function will use the given iterator to test the entire set. If any element in the set returns false or null in the iterator function test, then this function returns false, otherwise it returns true. If no iterator is given, then it will be tested whether all elements are not equal to false and null. You can simply think of it as "detecting that every element is neither empty nor negative".
any(iterator) instance iterator: a function object conforming to Function(value, index), optional. This function will use the given iterator to test the entire set. If any element in the set returns true in the iterator function test, then the function returns true, otherwise it returns false. If no iterator is given, then it will test whether all elements have one that does not equal false and null. You can simply think of it as "detecting whether there is non-empty and non-negative in the element".
collect(iterator) instance iterator: a function object conforming to Function(value, index) Calling the iterator function returns a result based on each element in the set, and then returns an Array in the order in the original set.
detect(iterator) instance iterator: a function object conforming to Function(value, index) Each element in the collection calls Iterator once, returning the first element that causes Iterator to return True. If there is no call to true in the end, then return null.
entries() instance (none) equal to toArray().
find(iterator) instance iterator: a function object conforming to Function(value, index) equaldetect().
findAll(iterator) instance iterator: a function object conforming to Function(value, index) Each element in the collection calls Iterator, returning an array composed of all elements whose result returns equal to true. The opposite of reject().
grep(pattern [, iterator]) instance pattern: a RegExp object used to match the elements, iterator: a function object conforming to Function(value, index) Use pattern parameter regular expression to test each element in the set, return an Array containing all elements matching the regular expression. If the Iterator is given, each result must be processed by the Iterator.
include(obj) instance obj: any object Judges that the package in the collection does not contain the specified object.
inject(initialValue, iterator) instance initialValue: any object to be used as the initial value, iterator: a function object conforming to Function(accumulator, value, index) Use Iterator to join all elements in the collection. When iterator is called, iterator passes the result of the last iteration as the first parameter to the accumulator. During the first iteration, the accumulator is equal to initialValue, and the value of the accumulator is returned at the end.
invoke(methodName [, arg1 [, arg2 [...]]]) instance methodName: name of the method that will be called in each element, arg1..argN: arguments that will be passed in the method invocation. Each element in the collection calls the specified function (see the source code and you can find that when the specified function is called, this pointer is passed into the current element), and passes in the given parameters, returning the Array composed of the call result.
map(iterator) instance iterator: a function object conforming to Function(value, index) Same as collect().
max([iterator]) instance iterator: a function object conforming to Function(value, index) Returns the maximum value of the element in the collection, or the maximum value of the value returned after calling Iterator (if Iterator is given).
member(obj) instance obj: any object sameinclude().
min([iterator]) instance iterator: a function object conforming to Function(value, index) Returns the minimum value, see max().
partition([iterator]) instance iterator: a function object conforming to Function(value, index) Returns an Array containing two Arrays, the first Array contains all elements that call Iterator to return True, and the second Array contains the remaining elements. If the Iterator is not given, then it is judged based on the element itself.
pluck(propertyName) instance propertyName name of the property that will be read from each element. This can also contain the index of the element Returns an Array composed of the values ​​of the attributes of the specified attribute name for each element.
reject(iterator) instance iterator: a function object conforming to Function(value, index) andfindAll() instead (returns all elements equal to false).
select(iterator) instance iterator: a function object conforming to Function(value, index) samefindAll().
sortBy(iterator) instance iterator: a function object conforming to Function(value, index) Sorting the value returned by each element calls Iterator, returns an Array.
toArray() instance (none) Returns an Array consisting of all elements of the collection.
zip(collection1[, collection2 [, ... collectionN [,transform]]]) instance collection1 .. collectionN: enumerations that will be merged, transform: a function object conforming to Function(value, index) Merge each given collection into the current collection. The merge operation returns a new array. The number of elements in this array is the same as the number of elements in the original set. Each element of this array is another child array, which combines elements of the same index in all sets. If the transform function is specified, each element of the array will also call the transform function to process it first. For example: [1,2,3].zip([4,5,6], [7,8,9]).inspect() Returns "[ [1,4,7],[2,5,8],[3,6,9] ]"

The Hash object

Hash objects implement a Hash structure, which is a collection of Key:Value pairs.

Each Item in Hash is an array with two elements, the first one is a Key and the latter one is Value. Each Item also has two attributes, key and value that do not need to be specified.

Method Kind Arguments Description
keys() instance (none) Returns an array of keys for all Items.
values() instance (none) Returns an array of the set of values ​​of all Items.
merge(otherHash) instance otherHash: Hash object Merge the given Hash and return a new Hash.
toQueryString() instance (none) Return all items in the hash in a style like QueryString, for example:'key1=value1&key2=value2&key3=value3'
inspect() instance (none) Use a suitable method to display the key:value pair in hash.

The ObjectRange class

Inherited fromEnumerable

Use upper and lower boundaries to describe an object area.

Property Type Kind Description
start (any) instance

The lower boundary of range
end (any) instance The upper boundary of range
exclusive Boolean instance Determines whether the boundary itself is part of the range.

Method Kind Arguments Description
[ctor](start, end, exclusive) constructor start: the lower bound, end: the upper bound, exclusive: include the bounds in the range? Create a range object, generated from start to end, it should be noted here that the types of start and end must be the same, and this type must have a succ() method.
include(searchedValue) instance searchedValue: value that we are looking for Check if a value is in range.

The Class object

In this packageClassObjects are used when declaring other classes. Use this object to declare the class to support the new classinitialize()Method, it plays the role of constructing methods.

See the following example

//declaring the class
var MySampleClass = ();

//defining the rest of the class implmentation
= {

   initialize: function(message) {
= message;
   },

   showMessage: function(ajaxResponse) {
      alert();
   }
};

//now, let's instantiate and use one object
var myTalker = new MySampleClass('hi there.');
(); //displays alert

Method Kind Arguments Description
create(*) instance (any) Defines the constructor of a new class.

The Ajax object

This object is used as the root object of other classes that provide AJAX functionality.

Property Type Kind Description
activeRequestCount Number instance The number of Ajax requests being processed.

Method Kind Arguments Description
getTransport() instance (none) Return to newXMLHttpRequestObject.

The object

Inherited fromEnumerable

This object maintains a list of objects to be called when Ajax-related events occur. For example, if you want to set a global hook to handle Ajax operation exceptions, then you can use this object.

Property Type Kind Description
responders Array instance List of objects registered to the Ajax event notification.

Method Kind Arguments Description
register(responderToAdd) instance responderToAdd: object with methods that will be called. The object passed in the parameter should contain a series of methods (such as onCreate, onComplete, onException) with the name of Ajax event. The communication event triggers a function with the appropriate name of all registered objects to be called.
unregister(responderToRemove) instance responderToRemove: object to be removed from the list. Remove from the list.
dispatch(callback, request, transport, json) instance callback: name of the AJAX event being reported, request: the object responsible for the event, transport: the XMLHttpRequest object that carried (or is carrying) the AJAX call, json: the X-JSON header of the response (if present) Iterate through the registered object list and find the object with the function determined by the callback parameter. Then pass the other three parameters to these functions. If the Ajax response contains an X-JSON HTTP header with JSON content, it will be hot-lined and passed in the json parameter. If the event is onException, then the transport parameter will be replaced by an exception and json will not be passed.

The class

This class is the base class of other classes defined in Ajax objects.

Method Kind Arguments Description
setOptions(options) instance options: AJAX options Set the options you want for AJAX operation.
responseIsSuccess() instance (none) returntrueIf AJAX operation is successful, otherwisefalse 。
responseIsFailure() instance (none) andresponseIsSuccess()on the contrary.

The class

Inherited from

Package AJAX Operation

Property Type Kind Description
Events Array static A list of all possible events/statuses that may be reported in an AJAX operation. This list includes:'Uninitialized', 'Loading', 'Loaded', 'Interactive', and'Complete'。
transport XMLHttpRequest instance Carrying AJAX operationsXMLHttpRequestObject.
url string instance The requested URL.

Method Kind Arguments Description
[ctor](url, options) constructor url: the url to be fetched, options: AJAX options Create an instance of this object that will request the url under the given options. The onCreate event is fired when calling constructor.important:If the selected URL is protected by the browser's security settings, it will not be of any use. In many cases, the browser will not request a URL with a different host (domain name) than the current page. You'd better just use local urls to avoid restricting users from configuring their browser (thanks Clay)
evalJSON() instance (none) This method obviously will not be called externally. It is used to internally call to execute these when the Ajax response contains the X-JSON HTTP header.
evalReponse() instance (none) This method obviously will not be called externally. If the Ajax response contains a Cotent-Type header with the value of text/javascript, then this method will use the called execution response body.
header(name) instance name: HTTP header name Refer to the content of the header of the Ajax response and call this method after the Ajax access is completed.
onStateChange() instance (none) This method is not usually called externally. When the AJAX request status changes, the object itself is called.
request(url) instance url: url for the AJAX call This method is not usually called externally. Already called in the constructor.
respondToReadyState(readyState) instance readyState: state number (1 to 4) This method is not usually called externally. When the AJAX request status changes, the object itself is called.
setRequestHeaders() instance (none) This method is not usually called externally. This object is called by itself to configure the HTTP header to be sent in the HTTP request.

The options argument object

An important part of the AJAX operations is the options argument. There's no options class per se. Any object can be passed, as long as it has the expected properties. It is common to create anonymous objects just for the AJAX calls.

Property Type Default Description
method String 'post' HTTP request method.
parameters String '' List of values ​​in url format passed in HTTP request.
asynchronous Boolean true Specifies whether to make asynchronous AJAX requests.
postBody String undefined In the case of HTTP POST, the contents in the request body are passed.
requestHeaders Array undefined The HTTP header list is passed in with the request. This list must contain even items, any odd items are the name of the custom header, and the following even items make the string value of the header item. example:['my-header1', 'this is the value', 'my-other-header', 'another value']
onXXXXXXXX Function(XMLHttpRequest, Object) undefined In AJAX request, a custom method called when the corresponding event/state is formed. For examplevar myOpts = {onComplete: showResponse, onLoaded: registerLoaded};. This method will be passed in a parameter, which is the AJAX operationXMLHttpRequestThe other object is an HTTP header containing the X-JSON response being executed.
onSuccess Function(XMLHttpRequest, Object) undefined Custom methods called when the AJAX request is successfully completed. This method will be passed in a parameter, which is the AJAX operationXMLHttpRequestThe other object is an HTTP header containing the X-JSON response being executed.
onFailure Function(XMLHttpRequest, Object) undefined Custom method called when the AJAX request is completed but an error occurs. This method will be passed in a parameter, which is the AJAX operationXMLHttpRequestThe other object is an HTTP header containing the X-JSON response being executed.
onException Function(, exception) undefined A custom function is called when an exception occurs such as an invalid response or invalid parameter in Ajax executed on the client. It receives two parameters, including the object that is exception Ajax operation and the exception object.
insertion an Insertion class undefined A class that can decide how to insert new content can, , , or. Only applied toObject.
evalScripts Boolean undefined, false Decide whether to execute the script block when the response arrives, onlyApplied in the object.
decay Number undefined, 1 Decide when the last response is the same as the previous responseThe number of times of reduced-difference access in the object. For example, if set to 2, the subsequent refresh is the same as the previous result. This object will wait for 2 set time intervals for the next refresh. If the same again, it will wait 4 times, etc. Not setting this only, or setting it to 1 will prevent the access frequency from slowing down.
frequency Number undefined, 2 The interval between refreshes represented in seconds can only be applied toObject.

The class

Inherited from

It is used when the requested url returns a piece of HTML and you want to place it directly on a specific element in the page. If the return of url<script>The object can also be used when the block of the object is to be executed upon receipt. Use when scripts are includedevalScriptsOptions.

Property Type Kind Description
containers Object instance This object contains two properties: it is used when the AJAX request is successfully executed, otherwise it will be used 。

Method Kind Arguments Description
[ctor](container, url, options) constructor container:this can be the id of an element, the element object itself, or an object with two properties - element (or id) that will be used when the AJAX call succeeds, and element (or id) that will be used otherwise. url: the url to be fetched, options: AJAX options Creates an instance of the given url requested with the given option.
updateContent() instance (none) This method is not usually called externally. When the response arrives, it is called by the object itself. It will update the appropriate element with HTML or call itinsertionMethod passed in the option - This method will be passed in two parameters, the updated element and the response text.

The class

Inherited from

This class is replicated and used Object to refresh an element in the page. Or perform other tasks that can be performed. More information referencerefer to 。

Property Type Kind Description
container Object instance This value will be passed directly intoconstruction method.
url String instance This value will be passed directly intoconstruction method.
frequency Number instance The interval between two refreshes (not frequency), in seconds. Default is 2 seconds. This when calledWhen the object is used, this number will be the current onedecayMultiply.
decay Number instance The level of decline maintained when performing tasks.
updater instance Last used Object
timer Object instance Notify the object of the JavaScript timer used for the next update.

Method Kind Arguments Description
[ctor](container, url, options) constructor container:this can be the id of an element, the element object itself, or an object with two properties - element (or id) that will be used when the AJAX call succeeds, and element (or id) that will be used otherwise. url: the url to be fetched, options: AJAX options Creates an instance of the given url requested with the given option.
start() instance (none) This method is not usually called externally. A method called by the object to start periodic execution of tasks.
stop() instance (none) Makes the object stop performing periodic tasks. After stopping, if there is the onComplete option, then a callback is raised.
updateComplete() instance (none) This method is not usually called externally. Being the current one Use, when a request ends, it is used as a plan for the next request.
onTimerEvent() instance (none) This method is not usually called externally. Called internally when the next update is reached.

The Element object

This object provides a functional method used when manipulating elements in the DOM.

Method Kind Arguments Description
addClassName(element, className) instance element: element object or id, className: name of a CSS class Add the given className to the object's className property.
classNames(element) instance element: element object or id Returns an object indicating that CSS gives the class names of the object.
cleanWhitespace(element) instance element: element object or id Clears all blank text nodes in object child elements.
empty(element) instance element: element object or id Returns a Boolean value indicating that the object is empty or has only whitespace characters.
getDimensions(element) instance element: element object or id Returns the object's size, and the return value has two properties, height and width.
getHeight(element) instance element: element object or id Returns the element'soffsetHeight 。
getStyle(element, cssProperty) instance element: element object or id, cssProperty name of a CSS property (either format 'prop-name' or 'propName' works). Returns null when the CSS property value of the given object or when cssProperty is not specified.
hasClassName(element, className) instance element: element object or id, className: name of a CSS class returntrueIf the element's class name contains the given class name
hide(elem1 [, elem2 [, elem3 [...]]]) instance elemN: element object or id By settingfor'none'to hide each incoming element.
makeClipping(element) instance element: element object or id Can set the content overflow through the value of the overflow.
makePositioned(element) instance element: element object or id Change the object to 'relative'.
remove(element) instance element: element object or id Removes the specified element from the document object.
removeClassName(element, className) instance element: element object or id, className: name of a CSS class Remove the given class name from the element's class name.
scrollTo(element) instance element: element object or id Scroll the window to the object's position.
setStyle(element, cssPropertyHash) instance element: element object or id, cssPropertyHash Hash object with the styles to be applied. Set the CSS property value to the object according to the cssPropertyHash parameter.
show(elem1 [, elem2 [, elem3 [...]]]) instance elemN: element object or id Set it for''to display each incoming element.
toggle(elem1 [, elem2 [, elem3 [...]]]) instance elemN: element object or id Toggle the visibility of each incoming element.
undoClipping(element) instance element: element object or id The value of 1 returns to the previous set value.
undoPositioned(element) instance element: element object or id Clear object'sfor''
update(element, html) instance element: element object or id, html: html content Replace the object's innerHTML with the given HTML parameter. If the HTML parameter contains <script>, then they will not be included, but will be executed.
visible(element) instance element: element object or id Returns a Boolean value indicating whether the object is visible.

The class

Inherited fromEnumerable

Represents a collection of CSS class names in an object.

Method Kind Arguments Description
[ctor](element) constructor element: any DOM element object or id Create an object, and the CSS class names given to the object are represented in this ClassNames object.
add(className) instance className: a CSS class name Include the CSS class name into the object's class names list.
remove(className) instance className: a CSS class name Remove className from the object's class names list
set(className) instance className: a CSS class name Set the object CSS class name to className and remove other class names.

The Abstract object

This object is the root of other classes in this package. It has no properties or methods. Classes defined in this object can be regarded as traditional abstract classes.

The class

This class is used as the base class for other classes that provide dynamic content insertion functions, and it is used like an abstract class.

Method Kind Arguments Description
[ctor](element, content) constructor element: element object or id, content: HTML to be inserted Create an object that can help insert dynamic content.
contentFromAnonymousTable() instance (none) The content is transformed into a Node array through an anonymous table.

Property Type Kind Description
adjacency String static, parameter This parameter specifies where the content will be placed relative to the given element. Possible values ​​are:'beforeBegin', 'afterBegin', 'beforeEnd', and'afterEnd'.
element Object instance Make reference element object with insert.
content String instance The HTML that was inserted.

The Insertion object

This object is the root of other similar functions. It has no properties or methods. Classes defined in this object can still be regarded as traditional abstract classes.

The class

Inherited from

Insert HTML before the given element start markup.

Method Kind Arguments Description
[ctor](element, content) constructor element: element object or id, content: HTML to be inserted Inherited from. Create an object that can help insert dynamic content. 
The following code

<br>Hello, <span  style="color:red;">Wiggum. How's it going?</span>
<script> new ('person', 'Chief '); </script>

Will turn HTML into

<br>Hello, Chief <span  style="color:red;">Wiggum. How's it going?</span>

The class

Inherited from

Insert HTML at the first child node position of the given element. The content will be located immediately after the start mark of the element.

Method Kind Arguments Description
[ctor](element, content) constructor element: element object or id, content: HTML to be inserted Inherited from. Create an object that can help insert dynamic content. 
The following code

<br>Hello, <span  style="color:red;">Wiggum. How's it going?</span>
<script> new ('person', 'Mr. '); </script>

Will turn HTML into

<br>Hello, <span  style="color:red;">Mr. Wiggum. How's it going?</span>

The class

Inherits from

Insert HTML at the last child node position of the given element. The content will be located in the close mark of the element.

Method Kind Arguments Description
[ctor](element, content) constructor element: element object or id, content: HTML to be inserted Inherited from . Creates an object that will help with dynamic content insertion.

The following code 

<br>Hello, <span  style="color:red;">Wiggum. How's it going?</span>
<script> new ('person', " What's up?"); </script>

Will change the HTML to 

<br>Hello, <span  style="color:red;">Wiggum. How's it going? What's up?</span>

The class

Inherits from

Insert HTML after the given element end tag.

Method Kind Arguments Description
[ctor](element, content) constructor element: element object or id, content: HTML to be inserted Inherited from . Creates an object that will help with dynamic content insertion.

The following code 

<br>Hello, <span  style="color:red;">Wiggum. How's it going?</span>
<script> new ('person', ' Are you there?'); </script>

Will change the HTML to 

<br>Hello, <span  style="color:red;">Wiggum. How's it going?</span> Are you there?

The Field object

This object provides a functional method for manipulating input items in a form.

Method Kind Arguments Description
clear(field1 [, field2 [, field3 [...]]]) instance fieldN: field element object or id Clears the value of the item element passed in the incoming form.
present(field1 [, field2 [, field3 [...]]]) instance fieldN: field element object or id Returns only if all form items are not emptytrue 。
focus(field) instance field: field element object or id Move focus to the given form item.
select(field) instance field: field element object or id Select the value of the form item that supports item value selection.
activate(field) instance field: field element object or id Move the focus and select the value of the form item that supports item value selection.

The Form object

This object provides a functional method for manipulating forms and their input elements.

Method Kind Arguments Description
serialize(form) instance form: form element object or id Returns a list of item names and values ​​in the url parameter format, such as'field1=value1&field2=value2&field3=value3'。
findFirstElement(form) instance form: form element object or id Returns the first Enable object in the Form.
getElements(form) instance form: form element object or id Returns all items entered in the formArrayObject.
getInputs(form [, typeName [, name]]) instance form: form element object or id, typeName: the type of the input element, name: the name of the input element. Return oneArrayInclude all in the form<input> element. In addition, this list can filter the type or name attributes of the element.
disable(form) instance form: form element object or id Invalidate all input items in the form.
enable(form) instance form: form element object or id Make all input items in the form valid.
focusFirstElement(form) instance form: form element object or id Activate the visible, valid input item in the first form.
reset(form) instance form: form element object or id Reset the form. and call form objectreset()The same method.

The object

This object provides a functional method for both visual and non-visible elements in a form object.

Method Kind Arguments Description
serialize(element) instance element: element object or id Return the name=value pair of the element, such as'elementName=elementValue'。
getValue(element) instance element: element object or id Returns the value of the element.

The object

This object provides some useful methods used internally to assist in parsing out the current value of a form element.

Method Kind Arguments Description
inputSelector(element) instance element: object or id of a form element that has the checked property, like a radio button or checkbox. Returns an element name and valueArray, like['elementName', 'elementValue']
textarea(element) instance element: object or id of a form element that has the value property, like a textbox, button or password field. Returns an element name and valueArray, like['elementName', 'elementValue']
select(element) instance element: object of a <select> element Returns the value or text with the element name and all selected optionsArray, like['elementName', 'selOpt1 selOpt4 selOpt9']

The class

This class is the base class for other classes that listen for changes in the value of an element (or any attribute involved in the class). This class is used like an abstract class.

Subclasses can be created to listen for things like input item values, or style attributes, or the number of rows of a table, or anything else related to tracking changes.

Subclasses must implement this method to determine what is the current value of the element being listened to.

Method Kind Arguments Description
[ctor](element, frequency, callback) constructor element: element object or id, frequency: interval in seconds, callback: function to be called when the element changes Create an object that listens to the element.
getValue() instance, abstract (none) The subclass must implement this method to determine what current value this element is being monitored.
registerCallback() instance (none) This method is not usually called externally. Called by this object itself to start listening to that element.
onTimerEvent() instance (none) This method is not usually called externally. This object is called by itself to periodically check that element.

Property Type Description
element Object The element object being listened to.
frequency Number The interval in seconds in each check.
callback Function(Object, String) As long as the element changes this method, it will be called. Element object and new value are received as parameters.
lastValue String The last value of the element being verified.

The class

Inherited from

An implementation class is used to listen for changes in the value of the form input item. Use this class when you want to listen for an element without a reported value change event. Otherwise useClass substitute.

Method Kind Arguments Description
[ctor](element, frequency, callback) constructor element: element object or id, frequency: interval in seconds, callback: function to be called when the element changes Inherited from. Create an object that listens for element value attributes.
getValue() instance (none) Returns the value of the element.

The class

Inherited from

An implementation class is used to listen for changes in the value of any data item in the form. Use this class when you want to listen for an element without a reported value change event. Otherwise, use the classreplace.

Method Kind Arguments Description
[ctor](form, frequency, callback) constructor form: form object or id, frequency: interval in seconds, callback function to be called when any data entry element in the form changes Inherited from. Create an object that listens for changes in the form.
getValue() instance (none) Returns a series of values ​​for all form data.

The class

This class is used as the base class of some other classes, which have the function of executing a callback method when an element's value changes event occurs.

kindMultiple objects can be bound to one element, instead of one to help the others to wipe out, these callback methods are executed in the order they pay to the elements.

The triggering event for radio buttons and check boxes isonclickwhile the text box and drop-down list box/drop-down list box areonchange 。 

Method Kind Arguments Description
[ctor](element, callback) constructor element: element object or id, callback: function to be called when the event happens Creates an object that listens to the element.
getValue() instance,abstract (none) The subclass must implement this method to determine what current value this element is being monitored.
registerCallback() instance (none) This method is not usually called externally. The event that is called by the object to bind itself to the element.
registerFormCallbacks() instance (none) This method is not usually called externally. The event called by the object to bind itself to each data item element in the form.
onElementEvent() instance (none) This method is not usually called externally. The event that will be bound to the element.

Property Type Description
element Object The element object being listened to.
callback Function(Object, String) Methods that are called as long as the element changes. Element object and new value are received as parameters.
lastValue String The last value of the element being verified.

The class

Inherited from

An implementation class that executes a callback method when monitoring the corresponding event of the value of the data item element in the form that changes. If the element does not report any events that change, then you can useClass substitute.

Method Kind Arguments Description
[ctor](element, callback) constructor element: element object or id, callback: function to be called when the event happens Inherited from. Creates an object that listens to element value attributes.
getValue() instance (none) Returns the value of the element.

The class

Inherited from

An implementation class that listens for any changes in any object contained in a form object, detects changes in value using the element's events. If the element does not report any changes, then you can useClass substitute.

Method Kind Arguments Description
[ctor](form, callback) constructor form: form object or id, callback: function to be called when any data entry element in the form changes Inherited from. Creates an object that listens to element value attributes.
getValue() instance (none) Returns a series of values ​​for all form data.

PositionObject (preparation document)

This object provides many methods related to element position.

Method Kind Arguments Description
prepare() instance (none) AdjustmentdeltaXanddeltaYProperties to coordinate changes in the scroll position. Remember any calls after the page scrollingwithinIncludingScrolloffsetThis method was called before.
realOffset(element) instance element: object Returns the correct scrolling deviation of this elementArrayObject, including all scroll deviations that affect elements. The result array is similar[total_scroll_left, total_scroll_top]
cumulativeOffset(element) instance element: object Return to the correct scrolling deviation of this elementArrayObject, containing any imposed bias of the placed parent element. The result array is similar[total_offset_left, total_offset_top]
within(element, x, y) instance element: object, x and y: coordinates of a point Tests whether the coordinates of a given point are within the outer rectangle range of the given element.
withinIncludingScrolloffsets(element, x, y) instance element: object, x and y: coordinates of a point Tests whether the coordinates of a given point are within the outer rectangle range of the given element (including scroll offsets).
overlap(mode, element) instance mode: 'vertical' or 'horizontal', element: object You need to call this method before calling itwithin(). This method returns numbers between 0.0 and 1.0 to represent the fractions where coordinates overlap the elements. For example, if the element is a DIV with a square with a side length of 100px and is located at (300, 300), thenwithin(divSquare, 330, 330)；overlap('vertical', divSquare); It will return 0.10, meaning that the point is 10% (30px) below the top border of the DIV.
clone(source, target) instance source: element object or id, target: element object or id Change the size and position of the target element as the source element.