What is Prototype.js?

xiaoxiao2021-04-04  242

What is Prototype.js?

In case you didn't use the famous prototype.js, let me tell you, prototype.js is a JavaScript class library written by Sam Stephenson. This concept wonderful, and compatible standard class libraries can help you easily build a rich client page with high interactive Web 2.0 features.

If you have tried using it recently, you probably understand the document is not a strong one of the author. As many developers I used to use this class library, I have to get into the source code of Prototype.js and experimentally. I think, after I study it, share what I learned to everyone is a good thing.

At the same time, in this article, I will also provide an Objects, Classes, Functions, Extensions for this class library to Dong East's unofficial reference.

When reading this document, developers who are familiar with Ruby will notice that there is very similar to some of Ruby's internal category and this class library extension implementation.

related articles

Advanced JavaScript Guide.

Some practical functions

This class library has many predefined objects and practical functions, which obviously liberate you from some repetitive typing.

Use $ () method

$ () Method is to use a convenient discument.getlementById () method in the DOM, just like this DOM method, this method returns the element of the ID incoming ID.

This is more winning more than a method in the DOM. You can pass multiple IDs as a parameter and then returns an Array object with an element with all required elements.

test page </ title></p> <p><script src = "prototype-1.3.1.js"> </ script></p> <p><script></p> <p>Function test1 ()</p> <p>{</p> <p>VAR D = $ ('mydiv');</p> <p>Alert (D.INNNERHTML);</p> <p>}</p> <p>Function test2 ()</p> <p>{</p> <p>VAR DIVS = $ ('mydiv', 'myotherdiv');</p> <p>For (i = 0; i <divs.length; i )</p> <p>{</p> <p>Alert (Divs [i] .innerhtml);</p> <p>}</p> <p>}</p> <p></ script></p> <p></ HEAD></p> <p><Body></p> <p><div id = "mydiv"></p> <p><p> this is a paragraph </ p></p> <p></ div></p> <p><div id = "myotherdiv"></p> <p><p> this is another paragraph </ p></p> <p></ div></p> <p><Input Type = "Button" Value = Test1 οnclick = "TEST1 ();> <br></p> <p><Input Type = "Button" Value = Test2 οnclick = "TEST2 ();"> <br></p> <p></ Body></p> <p></ Html></p> <p>Another benefit is that this function can be passed to the object ID represented by String, or it can be incompatible to the object itself, so it is useful when establishing a function that can pass two types of parameters.</p> <p>Use a $ f () function</p> <p>The $ f () function is another "shortcut key" that is popular, it can be used to return any form of input controls, such as Text Box, Drop-Down List. This method can also be used as parameters with element ID or element itself. <script></p> <p>Function TEST3 ()</p> <p>{</p> <p>Alert ($ f ('username');</p> <p>}</p> <p></ script></p> <p><input type = "text" id = "username" value = "joe doe"> <br></p> <p><Input Type = "Button" Value = Test3 οnclick = "TEST3 ();> <br></p> <p>Use $ a () function</p> <p>The $ A () function can convert the single parameters it receive into an Array object.</p> <p>This method, combines the Array class expanded by this library, which can easily convert any enumerable list into or copy to an Array object. A recommended usage is to convert the Dom Node Lists into a normal Array object, and more efficient traversal, please see the example below.</p> <p><script></p> <p>Function ShowOptions () {</p> <p>Var Somenodelist = $ ('lstemployees'). getElementsBytagname ('Option');</p> <p>Var nodes = $ a (Somenodelist);</p> <p>Nodes.each (Function (node) {</p> <p>Alert (node.nodeename ':' node.innerhtml);</p> <p>});</p> <p>}</p> <p></ script></p> <p><select id = "lstemployees" size = "10"></p> <p><option value = "5"> BUCHANAN, Steven </ option></p> <p><option value = "8"> Callahan, Laura </ option></p> <p><option value = "1"> DAVOLIO, NANCY </ OPTION></p> <p></ select></p> <p><Input Type = "Button" Value = "Show the Options" οnclick = "showoptions ();">></p> <p>Use $ h () functions</p> <p>The $ h () function converts some objects into an enumerable and united array similar HASH object.</p> <p><script></p> <p>Function Testhash ()</p> <p>{</p> <p>// let's create the object</p> <p>VAR a = {</p> <p>First: 10,</p> <p>SECOND: 20,</p> <p>Third: 30</p> <p>}</p> <p>// Now Transform It Into a Hash</p> <p>Var h = $ h (a);</p> <p>Alert (H.ToQueryString ()); // Displays: first = 10 & second = 20 & third = 30</p> <p>}</p> <p></ script></p> <p>Use $ R () function</p> <p>$ R () is an abbreviation for New ObjectRange (Lowbound, UpperBound, ExcludeBounds).</p> <p>Skip to the ObjectRange documentation can see a full description of this class. At this time, we will first look at an example to show this abbreviation which method can be replaced. Other related knowledge can be found in the Enumerable object document. <script></p> <p>Function Demodollar_r () {</p> <p>Var Range = $ R (10, 20, False);</p> <p>Range.each (Function (value, index) {</p> <p>Alert (Value);</p> <p>});</p> <p>}</p> <p></ script></p> <p><Input Type = "Button" Value = "Sample Count" οnclick = "Demodollar_r ();">>>>>>>>>></p> <p>Use the TRY.THESE () function</p> <p>The TRY.THESE () method makes it easy to implement the different methods until one of them have become very easy. He performs a series of methods as a parameter and performs these methods in one by one. A successful execution, returning the return value of the method that successfully executed.</p> <p>In the following example, XMLNode.Text is easy to use in some browsers, but XMLNode.TextContent works normally in other browsers. Using the TRY.THESE () method we can get the return value of the method of the normal operation.</p> <p><script> function getXmlnodeValue (xmlnode) {return {return xmlnode.text;}, function () {return XMLNode.TextContent;));} </ script></p> <p>Ajax object</p> <p>The common method mentioned above is very good, but face it, they are not the most advanced thing. Are they? You are likely to write these methods that have similar functions in your script. But these methods are just the hoss of the iceberg.</p> <p>I am sure that your reason for prototype.js is probably due to its AJAX capabilities. So let us explain how this package makes it easier when you need to complete the AJAX logic.</p> <p>Ajax object is a predefined object, created by this packet, to encapsulate and simplify the embassy code involved in the Ajax function. This object contains a series of encapsulated Ajax logic classes. Let's take a look at several classes.</p> <p>Use the Ajax.Request class</p> <p>If you don't use any help package, you are likely to write a lot of code to create an XMLHttpRequest object and track it asynchronously, then resolve the response and process it. You will be very lucky when you don't need to support more than one type of browser.</p> <p>In order to support the AJAX functionality. This package defines the Ajax.Request class.</p> <p>If you have an application to communicate with the server via URL http: // Yourver / App / Get_Sales? Empid = 1234 & Year = 1998. It returns the XML response below.</p> <p><? XML Version = "1.0" encoding = "UTF-8"?></p> <p><ajax-response></p> <p><Response Type = "Object" ID = "ProductDetails"></p> <p><monthly-sales></p> <p><Employee-Sales></p> <p><Employee-Id> 1234 </ Employee-id></p> <p><year-month> 1998-01 </ year-month></p> <p><Sales> $ 8,115.36 </ sale></p> <p></ EMPLOYEE-SALES> <Employee-Sales></p> <p><Employee-Id> 1234 </ Employee-id></p> <p><year-month> 1998-02 </ year-month></p> <p><Sales> $ 11,147.51 </ sales></p> <p></ Employee-Sales></p> <p></ monthly-sales></p> <p></ response></p> <p></ ajax-response></p> <p>Communication with Ajax.Request objects and servers and get this XML is very simple. The following example demonstrates how it is done.</p> <p><script></p> <p>Function searchsales ()</p> <p>{</p> <p>Var Empid = $ f ('lstemployees');</p> <p>VAR Y = $ f ('lstyears');</p> <p>Var URL = 'http: // yoursever / app / get_sales'</p> <p>VAR PARS = 'Empid =' Empid '& Year =' Y;</p> <p>Var myajax = new ajax.Request</p> <p>URL,</p> <p>{</p> <p>Method: 'get',</p> <p>Parameters: PARS,</p> <p>Oncomplete: showResponse</p> <p>});</p> <p>}</p> <p>Function ShowResponse (OriginalRequest)</p> <p>{</p> <p>// Put Returned XML in The Textarea</p> <p>$ ('result'). Value = OriginalRequest.ResponseText;</p> <p>}</p> <p></ script></p> <p><select id = "lstemployees" size = "10" οnchange = "searchsales ()"></p> <p><option value = "5"> BUCHANAN, Steven </ option></p> <p><option value = "8"> Callahan, Laura </ option></p> <p><option value = "1"> DAVOLIO, NANCY </ OPTION></p> <p></ select></p> <p><select id = "lstyears" size = "3" οnchange = "searchsales ()"></p> <p><option selected = "SELECTED" value = "1996"> 1996 </ option></p> <p><option value = "1997"> 1997 </ option></p> <p><option value = "1998"> 1998 </ option></p> <p></ select></p> <p><br> <textarea ID = Result cols = 60 rows = 10> </ textarea></p> <p>Have you noticed the second object that passed into the Ajax.Request constructor? Parameters {Method: 'Get', Parameters: Pars, OnComplete: ShowResponse} indicates a true writing of an anonymous object. He indicates that the object you have introduced has a property named a Method value of 'get', and the other property name is a query string containing the HTTP request, and an OnComplete property / method contains a function showResponse. There are also other properties to define and set up in this object, such as Asynchronous, you can determine whether Ajax is asynchronous for the call to the server (the default value is true).</p> <p>This parameter defines the options for the AJAX call. In our example, the first parameter requests the URL through the http get command, incorporating the variable PARS containing the query string, the Ajax.Request object will call the showResponse method when it completes the reception response.</p> <p>Maybe you know that XMLHttpRequest will report progress during HTTP requests. This progress is described as four different phases: loading, loaded, interactive, or complete. You can call the Ajax.Request object at any stage to customize the custom method, and Complete is the most commonly used. To call custom methods only need to provide custom method objects in the ONXXXX attribute / method in the requested option parameter. Just like oncomplete in our example. The way you are incorporated will be called with a parameter, this parameter is an XMLHttpRequest object yourself. You will use this object to get the returned data and verify the status property containing the HTTP result code in this call.</p> <p>There are also two useful options to process results. We can pass a method at the onSuccess option, and then call the Ajax error, the opposite, or you can pass a method at the onfailure option, which is called when an error occurs. As the ONXXXX option is incorporated, the two are also incoming an XMLHttpRequest object with an AJAX request when they are called.</p> <p>Our example does not handle this XML response in any interesting way, we just put this XML into a text domain. A typical application for this response is likely to find the desired information, then update some elements in the page, or may even do some XSLT conversions to generate some HTML in the page.</p> <p>In version 1.4.0, a new event backhaul is introduced. If you have a code to be executed for a special event, no matter which Ajax call triggered it, you can use the new Ajax.Responders object.</p> <p>Suppose you want to call some prompts in an AJAX call, like a constantly rotating icon, you can use two global event handler to do, one of the display icons at the beginning of the first call The other hides the icon when the last call is completed. Look at the example below.</p> <p><script></p> <p>Var myglobalhandlers = {</p> <p>Oncreate: function () {</p> <p>Element.show ('systemworking ";</p> <p>}</p> <p>OnComplete: function () {</p> <p>IF (ajax.activeRequestCount == 0) {</p> <p>Element.hide ('systemworking');</p> <p>}</p> <p>}</p> <p>}</p> <p>Ajax.Responders.Register (MyGlobalHandlers);</p> <p></ script></p> <p><div id = 'systemworking'> <img src = 'spinner.gif'> load ... </ div> More fully explanation, refer to the Ajax.Request reference and ajax option reference.</p> <p>Use ajax.Updater class</p> <p>If the information returned by the other end of your server is already HTML, then the Ajax.Updater class in this package will make your life easier. With it you only need to provide any element that needs to be returned by the Ajax request, the example is more clear than I write.</p> <p><script></p> <p>Function gethtml ()</p> <p>{</p> <p>VAR URL = 'http:// YourServer / App / GetSomeHtml';</p> <p>VAR PARS = 'SomeParameter = ABC';</p> <p>Var myajax = new ajax.Updater</p> <p>'PlaceHolder',</p> <p>URL,</p> <p>{</p> <p>Method: 'get',</p> <p>Parameters: PARS</p> <p>});</p> <p>}</p> <p></ script></p> <p><Input Type = Button Value = gethtml οnclick = "gethtml ()"></p> <p><div id = "PlaceHolder"> </ div></p> <p>You can see that this code is more concise than the previous example, does not include an oncomplete method, but an element ID is incorporated in the constructor. Let's modify the code slightly to describe how it is possible to have an error in the client segment.</p> <p>We will add more options to specify a method of processing an error. This is done with the onfailure option. We also specified a PlaceHold only after successful requests. In order to complete this purpose, we modified the first parameter from a simple element ID to an object with two attributes, Success (used when OK) and Failure (used when there were problems) In the following example, the Failure property is not used, but only the ReportError method is used at ONFAILURE.</p> <p><script> function gethtml () {var URL = 'http: // YourServer / app / getsomehtml'; var pars = 'someparameter = abc';</p> <p>Var myajax = new ajax.Updater</p> <p>{Success: 'PlaceHolder'},</p> <p>URL,</p> <p>{</p> <p>Method: 'get',</p> <p>Parameters: PARS,</p> <p>OnFailure: ReportError</p> <p>});</p> <p>}</p> <p>Function ReportError (Request)</p> <p>{</p> <p>Alert ('sorry. there is an error.');</p> <p>}</p> <p></ script></p> <p><Input Type = Button Value = gethtml οnclick = "gethtml ()"></p> <p><div id = "PlaceHolder"> </ div></p> <p>If your server logic returns a JavaScript code along with the HTML tag, the Ajax.Updater object can perform the JavaScript code. In order to treat this object to be responded to JavaScript, you only need to simply add the evagescripts: True property in the object constructor of the last parameter. However, it is worth reminding that it is implied that these scripts will be executed, but they will not be added to the script of Page. "What is the difference?", You may ask this. We assume that the request address returns this: <script language = "javascript" type = "text / javascript"></p> <p>Function Sayhi () {</p> <p>Alert ('hi');</p> <p>}</p> <p></ script></p> <p><Input Type = Button Value = "Click Me" οnclick = "Sayhi ()"></p> <p>If you have tried this before, you know that these scripts will not work as you expect, because this script will be executed, but the following script execution does not create a function called Sayhi, what is it? Do not do it. If you want to create a function, we should change the code to this:</p> <p><script language = "javaScript" type = "text / javascript"></p> <p>SAYHI = Function () {</p> <p>Alert ('hi');</p> <p>}</p> <p></ script></p> <p><Input Type = Button Value = "Click Me" οnclick = "Sayhi ()"></p> <p>Why don't we use a VAR key in the code to declare this variable (refer to Sayhi), because the function that creates created will be just a local variable of the current script (at least in IE). Do not write VAR keywords, the scope of the object that is created is the Window we expect.</p> <p>For more information, please see the Ajax.Updater Reference and Options Reference.</p> <p>Enumerate ... Oh! Oh!</p> <p>You know, we all do this, build an Array, organize them with Elements, build a loop structure (for example, for, foreach, while) to access each Element through the index number, and use this ELEMENT to do some actions.</p> <p>When you think of this, you will find almost every time you write a loop code, you will use an Array sooner or later. So, can the Array object provide more features to use it? It is indeed this, in fact, many programming languages ​​provide some such features in their Array or other similar structures (such as Collections, Lists).</p> <p>Now, prototype.js gives us an Enumerable object that achieves a lot of tricks that interact with iterative data. Compared with the original JS object, Prototype.js is more upstairs, which extends all enumerations for all enumerations.</p> <p>Cycle, Ruby style</p> <p>In standard JavaScript, if you want to display all Elements in an Array, you can write it very well like this:</p> <p><script></p> <p>Function showlist () {</p> <p>Var simpsons = ['Homer', 'marge', 'lisa', 'bart', 'meg']; for (i = 0; i <simpsons.length; i ) {</p> <p>Alert (SIMPSONS [I]);</p> <p>}</p> <p>}</p> <p></ script></p> <p><Input Type = "Button" Value = "show list" οnclick = "showlist ();">>></p> <p>Using our new best friends, prototype.js, we can write it into this way</p> <p>Function showlist () {</p> <p>Var simpsons = ['Homer', 'marge', 'lisa', 'bart', 'meg'];</p> <p>SIMPSONS.EACH (Function (FamilyMember) {</p> <p>Alert (Familymember);</p> <p>});</p> <p>}</p> <p>You may want to "very strange way ... relatively old, this syntax is too weird." Oh, in the example, it doesn't have anything. In this simple to die, there is no change to too much, so, please continue to read.</p> <p>Before proceeding below, you noticed the function that is sent to the EACH function as a parameter? We understand it into an iterator function.</p> <p>Your arrays on steroids</p> <p>Just as mentioned above, use the same type of Elements in your array to use the same type of properties and functions (CommON, I don't know if this translation is universal or vulgar). Let us see how to take advantage of our new horsepower strong arrays.</p> <p>Find an Element in accordance with the standard.</p> <p><script></p> <p>Function FindemPloyeebyid (EMP_ID) {</p> <p>Var listbox = $ ('lstemployees')</p> <p>Var options = listbox.getElementsBytagname ('Option');</p> <p>Options = $ A (options);</p> <p>VAR OPT = Options.Find (function (employee) {</p> <p>Return (Employee.Value == EMP_ID);</p> <p>});</p> <p>Alert (Opt.innerHtml); // Displays the Employee Name</p> <p>}</p> <p></ script></p> <p><select id = "lstemployees" size = "10"></p> <p><option value = "5"> BUCHANAN, Steven </ option></p> <p><option value = "8"> Callahan, Laura </ option></p> <p><option value = "1"> DAVOLIO, NANCY </ OPTION></p> <p></ select></p> <p><Input Type = "Button" Value = "Find Laura" οnclick = "FindemPloyeebeid (8);"></p> <p>Now let's go down, see how to filter the elements in an Array, get the members we want from each element.</p> <p><script></p> <p>Function Showlocallinks (paragraph) {paragraph = $ (paragraph);</p> <p>Var links = $ a (paragraph.getlementsBytagname);</p> <p>// Find Links That Do Not Start with 'http'</p> <p>Var locallinks = links.findall (Function (LINK) {</p> <p>Var start = link.href.substring (0, 4);</p> <p>Return Start! = 'http';</p> <p>});</p> <p>// Now the link texts</p> <p>Var Texts = Locallinks.pluck ('InnerHtml');</p> <p>// Get Them in a Single String</p> <p>Var result = texts.inspect ();</p> <p>Alert (Result);</p> <p>}</p> <p></ script></p> <p><p id = "sylext"></p> <p>This <a href="http://o Porthersite.com/page.html"> Text </a> HAS</p> <p>A <a href="#localanchor"> lot </a> of</p> <p><a href="# otheranchor"> links </a>. Some Are</p> <p><a href="http://wherever.com/page.html"> External </A></p> <p>AND Some Are <a href="#someAnchor"> local </a></p> <p></ p></p> <p><Input Type = Button Value = "Find Local Links" οnclick = "οnclicks ('s polyxt')"></p> <p>The above code is just a little little practice that makes people fall in love with this grammar. Please see all functions of ENUMERABLE and ARRAY</p> <p>Prototype.js reference</p> <p>JavaScript class extension</p> <p>A way to achieve powerful features of Prototype.js libraries is to extend existing JavaScript classes.</p> <p>Expansion of Object</p> <p>MethodkindargumentsSDescribTIONExtend (Destination, Source)</p> <p>Static</p> <p>Destination: Any Object, Source: Any Object Provides a method for inheriting all sources to achieve inheritance of an attribute and function to a target function, anY Object Returns a text description for the readability of the target object, if the object The instance does not define an Inspect function, and the value of the toString function is returned by default.</p> <p>Expansion of Number</p> <p>Method</p> <p>Kind</p> <p>Argumentsdescriptiontocolorpart ()</p> <p>instance</p> <p>(NONE) Returns the number of hexadecimal representations. It is useful when converting an RGB number to an HTML expression. SUCC () instance (none) Returns the next number, which can be used to iterate calls in the scene. times (iterator) instanceiterator: a function object conforming to Function (index) Calls the iterator function repeatedly passing the current index in the index argument repeatedly calling iterator function and pass the index parameters of the current index to the iterator. The following example is displayed 0-9 with a prompt box.</p> <p><script></p> <p>Function demotimes () {</p> <p>VAR n = 10;</p> <p>n.times (function (index) {</p> <p>Alert (Index);</p> <p>});</p> <p>/ ***************************</p> <p>* You Could Have Also Used:</p> <p>* (10) .times (....);</p> <p>*********************************** /</p> <p>}</p> <p></ script></p> <p><Input Type = Button Value = "Test Number.Times ()" οnclick = "demotimes ()"></p> <p>Expand for Function</p> <p>MethodkindargumentsDescriptionBind (Object)</p> <p>instance</p> <p>Object: The Object That Owns The Method Returns the instance of Function, which is the same as the Source Function structure, but it has been bound to the Object provided in the parameter, that is, the THIS pointer in the function points to the parameter Object. BindaseventListener (Object) InstanceObject: The Object That Owns the Method is the same as the above, which is differentiated in binding events.</p> <p>Let us see how to use these extensions.</p> <p><input type = checkbox id = mychk value = 1> TEST?</p> <p><script></p> <p>// Declaring the class</p> <p>Var CheckBoxWatcher = Class.create ();</p> <p>// defining the rest of the class importation</p> <p>CheckBoxWatcher.Prototype = {</p> <p>Initialize: Function (chkbox, message) {</p> <p>THIS.CHKBOX = $ (chkbox);</p> <p>THIS.MESSAGE = Message;</p> <p>// Assigning Our Method to the Event</p> <p>THIS.CHKBOX.ONCLICK =</p> <p>This.ShowMessage.BindaseventListener (this);</p> <p>}</p> <p>ShowMessage: Function (evt) {</p> <p>Alert (this.Message ')');</p> <p>}</p> <p>}</p> <p>Var Watcher = New CheckBoxWatcher ('mychk', 'Changed');</p> <p></ script></p> <p>Extension of String</p> <p>MethodkindArgumentsDescriptionStripTags () Instance (NONE) Returns a string that removes all HTML or XML tags. Stripscripts () instance</p> <p>(NONE) Returns a string that removes all Script. Escapehtml () Instance (NONE) Returns a string that makes all HTML tagged escape. Unescapehtml () Instance (none) escapehtml () reversal. Extractscripts () Instance (NONE) Returns an array of all <script> found in String. Evalscripts () instance (none) Perform all <script> found in the String. TOQUERYPARAMS () Instance (None) divides QueryString to a joint Array with Parameter Name, more like a Hash. ParseQuery () instance (none) and TOQUERYPARAMS (). Toarray () instance (none) Converts string into a character array. Camelize () instance (none) Converts a character connected character string into a camel method String. For example, when this function is written, it is useful to use it as a style tool.</p> <p>ARRAY extension</p> <p>Because Array is extended to ENUMERABLE, all enumberable objects are functions, and Array is available, in addition, the following is already implemented.</p> <p>MethodkindargumentsDescribTIONClear ()</p> <p>instance</p> <p>(NONE) Clear. Compact () instance (none) Returns an Array that does not include null or undefined elements in the source arch, this method does not change the source Array. First () Instance (None) Returns the first object of Array. FLATTEN () Instance (NONE) returns a "flat" one-dimensional Array by recursively combining the child elements of the Array (if this element is also array). IndexOf (Value) InstanceValue: What You are looking for. Returns an element that gives a digital location (from 0), if an object is not found in this location, return -1. Inspect () Instance (None) Reserved Inspect (), returns a better format to reflect the character description of each element of Array. Last () instance (none) returns the last element. Reverse ([ApplyToSelf]) InstanceApplyToself: Indicates if The Array Itself Should Also Be Reversed. Reverse Array's order, if the parameters are given, or the parameter is TRUE, the order 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, Array's Length-1. WithOut (Value1 [, Value2 [, .. Valuen]]) InstanceValue1 ... VALUEN: VALUES TO BE Excluded if present in the array. Returns an Array that excludes the elements contained in the parameter list from the source array.</p> <p>Document DOM extension</p> <p>MethodkindargumentsDescribTIONGetElementsByclassName (classname [, parentelement])</p> <p>instance</p> <p>className: name of a CSS class associated with the elements, parentElement:. object or id of the element that contains the elements being retrieved attributes return all elements equal to the CSS className className parameter parentElement If no, then the search document body. (I don't think it's better to use Document, because sometimes there is no body extension.</p> <p>PropertyTypedScriptionKey_Backspace</p> <p>Number</p> <p>Number8: Constant Code for the Backspace key.KEY_TABNumber9:. Constant Code for the Tab key.KEY_RETURNNumber13:.. Constant Code for the Return key.KEY_ESCNumber27:. Constant Code for the Esc key.KEY_LEFTNumber37:. Constant Code for the Left arrow key .KEY_UPNumber38: Constant Code for the Up arrow key.KEY_RIGHTNumber39:.. Constant Code for the Right arrow key.KEY_DOWNNumber40: Constant Code for the Down arrow key.KEY_DELETENumber46:.. Constant Code for the Delete key.observers: ArrayList of cached observers . Part of the interface inpementation details.</p> <p>MethodkindargumentsDescribTIONElement (event) staticevent: an event object Returns the event source object. iSleftClick (Event) staticevent: an event object If you click the left mouse button, return True.PointerX (Event) staticEvent: An Event Object Returns the X coordinate of the mouse. Pointery (Event) staticEvent: An Event Object Returns the Y coordinate of the mouse. STOP (Event) staticEvent: An Event Object Use this function to interrupt the default behavior of the event and block pass (bubbling). findElement (event, tagName) staticevent: an Event object, tagName:. name of the desired tag beginning from the event source object search up the DOM tree until it finds the first matching element tagName observe (element, name, observer, useCapture) staticelement : 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 an object. stopObserving (element, name, observer, useCapture) staticelement: 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. In contrast to the above functions. _observeandcache (element, name, observer, usecapture) static private functions, don't worry it. Unloadcache () static</p> <p>(NONE) Private function, don't take it. Clear all OBServers cache from memory.</p> <p>The following code demonstrates how to add a LOAD event handler to Window.</p> <p><script></p> <p>Event.Observe (Window, 'Load', ShowMessage, False);</p> <p>Function showMessage () {</p> <p>Alert ('page loaded.');</p> <p>}</p> <p></ script></p> <p>Define new objects and classes in prototype.js</p> <p>Another version of this package helps you is to provide many objects that support both object-oriented design philosophy and common functions.</p> <p>The PeriodicalExecuter Object</p> <p>This object provides a logic of a method to repeat a method on a certain interval.</p> <p>MethodkindargumentssDescribTION [CTOR] (Callback, Interval)</p> <p>Constructor</p> <p>Callback: a parameterless function, interval: Number of seconds The instance of this object will repeat the given method.</p> <p>PropertyTypedScriptionCallback</p> <p>Function ()</p> <p>The method being called, the method cannot be passed to the parameter. FrequencyNumber interval in seconds. CurrentlyExecUsingBoolean means that this method is being executed. The Prototype Object</p> <p>Prototype doesn't work too important, just declares the version of the package.</p> <p>PropertyTypedScriptionVersionstring version. EMPTYFUNCTION</p> <p>Function ()</p> <p>Empty function. KFunction (OBJ) A function that is only backlite. ScriptFragmentString identifies the regularity of Script.</p> <p>The Enumerable Object</p> <p>EnumBLE objects can enumerate the structure of the list style in a more elegant manner.</p> <p>Many other objects are used to get these useful interfaces by extending from the EnumBeable object.</p> <p>MethodkindargumentsDescribTIONeach (Iterator)</p> <p>instance</p> <p>Iterator: a function Object Conforming to function (value, index) Make each Element as the first parameter, Element's index calls the Iterator function as the first parameter. All ([iTerator]) Instancerator: a Function Object Conforming To function (value, index) This function will be used to test the entire collection, if any of the elements in the collection returns false or null in the Iterator function test, then this function Return False, otherwise returns true. If there is no Iterator, then test all elements is not equal to False and Null. You can simply think it as "detecting that each element is non-empty." ANY (Iterator) Instanceiterator: a Function Object Conforming To Function (Value, Index), Optional. This function will use the given Iterator testing the entire collection, if any element is returned in the Iterator function test, then this function returns True, otherwise returns false. If there is no Iterator, then test all the elements is not equal to FALSE and NULL. You can simply think of it as a "detection element is not empty". Collect (iTerator) InstanceIterator: a Function Object Conforming To Function (Value, Index) Call the Iterator function returns a result according to the collection, and then follows an Array as follows in the order in the original collection. DETECT (Iterator) InstanceITerator: a Function Object Conforming To Function (Value, Index) Each element is called once, returns the first element that makes iterator returns True, and then returns NULL if it is not called for True. entries () instance (none) equals toArray () find (iterator) instanceiterator:. a function object conforming to Function (value, index) equals detect () findAll (iterator) instanceiterator:. a function object conforming to Function (value, index Each element is called in the collection, returns an array of elements that are equal to TRUE by all the elements returned by all calling items. Contrary to REJECT (). GREP (Pattern [, Iterator]) InstancePattern: a regexp Object Used to match the elements, itence: a function Object conforming to function (value, index) Route with the Pattern parameter Each element in the expression test collection, return a containment Match the array of the regular element, if ITerator is given, each result will pass the Iterator processing. INCLUDE (OBJ) InstanceObj: Any Object Judgment Collection Pack does not contain the specified object.</p> <p>Inject (InitialValue, Iterator) InstanceInitialValue: Any Object to be used as the initial value, iterator: a function Object Conforming to function (Accumulay, Value, INDEX) Use the Iterator to join all collections. Iterator transmits the result of the previous iteration as the first parameter to Accumulator when called. When it is iterated, the Accurmelator is equal to InitialValue and finally returns the value of the Accumulator. Invoke (MethodName [, Arg1 [, Arg2 [...]]]) InstancethodName: Name of the Method That Will Be Called in Each Element, Arg1..Agn: Arguments That Will BE Passed in The Method Invocation. Element calls the specified function (see the source code) When the specified function is called, the THIS pointer is transmitted into the current element), and the given parameter is passed, returns Array consisting of the calling result. map (iterator) instanceiterator:. a function object conforming to Function (value, index) with collect () max ([iterator]) instanceiterator: a function object conforming to Function (value, index) Returns the maximum element in the collection, or The maximum value of the return value after calling the Iterator (if itrator is given). Member (OBJ) InstanceObj: Any Object With include () .min ([iTerator]) InstanceEutIterator: a function object conforming to function (value, index), see max (). Partition ([Iterator]) Instancerator: a Function Object Conforming To Function (Value, Index) Returns an array containing two array, the first Array contains all the elements that call to TRUE, the second Array contains the remaining elements . If the iTerator is not given, then it is determined according to the element itself. PLUCK (PropertyName) InstancePropertyName Name of The Property That Will Be Read from Each Element. This can Also Contain The index of the element returns the value of the value of the specified property name of each element. reject (iterator) instanceiterator: a function object conforming to Function (value, index), and findAll () opposite (return all elements equal to false) select (iterator) instanceiterator:. a function object conforming to Function (value, index) with findAll (). Sortby (Iterator) Instancerator: a Function Object Conforming To Function (Value, INDEX) Returns an Array based on each element calls the value returned.</p> <p>Toarray () instance (none) Returns an Array consisting of a collection of all elements. zip (collection1 [, collection2 [, ... collectionN [, transform]]]) instancecollection1 .. collectionN: enumerations that will be merged, transform: a function object conforming to Function (value, index) of each combined set forth Go to the current collection. The merge operation returns a new Array, just like the number of elements of the array, the number of elements of the original collection, each element of this Array is a child array, which combines the elements of the same index in all collections. If the Transform function is specified, each element of Array also calls the Transform function to do process. 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</p> <p>The Hash object implements a Hash structure, that is, a collection of values.</p> <p>Every item in Hash is a Array with two elements, the former one is Key, the last one is Value, each Item has two properties, key and value that do not need to be explained.</p> <p>MethodkindArgumentsDescribTIONKeys () Instance (NONE) Returns an Array for all Item KEY. VALUES ()</p> <p>instance</p> <p>(NONE) Returns an Array for the collection of all Item Value. MERGE (Otherhash) Instance PortotherHash: Hash Object merges the Hash, returns a new Hash. TOQUERYSTANCE () Instance (NONE) Returns all Item in Hash in the style of querystring, for example: 'key1 = value1 & key2 = value2 & key3 = value3' Inspect () instance (none) Show the key: value: Value in Hash: Value Correct.</p> <p>The ObjectRange Class</p> <p>Inherit since ENUMERABLE</p> <p>Use the upper boundary to describe an object area.</p> <p>PropertyTypekindDescriptionStart (ANY)</p> <p>instance</p> <p>Range's lower boundary end (any) InstanceRange's upper boundary ExclusiveBooleanInstance determines that the border is not part of the RANGE.</p> <p>MethodKindArgumentsDescription [ctor] (start, end, exclusive) constructorstart: the lower bound, end: the upper bound, exclusive:? Include the bounds in the range create a range object that is generated from the start to the end, to note here is that, start And the end of the END is consistent, and this type must have a SUCC () method. Include (SearchedValue)</p> <p>instance</p> <p>SearchedValue: Value That We are loops for checking a value is in Range.</p> <p>The Class Object</p> <p>In this package, the Class object is used in declaring other classes. Use this object to declare the class to support the new class to support the initialize () method, and he serves as a constructor.</p> <p>See the example below</p> <p>// declaring the classvar MySampleClass = Class.create (); // defining the rest of the class implmentationMySampleClass.prototype = {initialize: function (message) {this.message = message;}, showMessage: function (ajaxResponse) {alert ( this.message);}}; // now, let's instantiate and use one objectvar myTalker = new MySampleClass ( 'hi there.'); myTalker.showMessage (); // displays alertMethodKindArgumentsDescriptioncreate (*)</p> <p>instance</p> <p>(any) Define the construction method of the new class.</p> <p>The Ajax Object</p> <p>This object is used as the root object that provides a class that provides an AJAX function.</p> <p>PropertyTypekindDescriptionActiveRPestCountNumBerInstance is the number of AJAX requests in processing.</p> <p>MethodkindargumentsDescriptiongetTransport ()</p> <p>instance</p> <p>(none) Returns a new XMLHttpRequest object.</p> <p>The ajax.responders Object</p> <p>Inherit since ENUMERABLE</p> <p>This object maintains a list of objects that will be called when the AJAX-related event occurs. For example, you have to set a global hook to handle the AJAX operation exception, then you can use this object.</p> <p>PropertyTypekindDescriptionRespondersArray</p> <p>instance</p> <p>The list of objects that are registered to the AJAX event notification.</p> <p>MethodkindargumentsDescriptionRptionRegister (ResponderToAdd) InstanceResponderToAdd: Object With methods That Will Be called. Objects to be included should include a series of methods such as Ajax events (such as oncreate, oncomplete, onexception). Communication events triggers a function of all the appropriate names of all registered objects being called. Unregister (ResponderToremove) InstanceResponderToremove: Object to Be Removed from the list. Remove from the list. dispatch (callback, request, transport, json) instancecallback: name of the AJAX event being reported, request: the Ajax.Request 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) traverses the registered object list to find the object with the function determined by the Callback parameter. These functions are then passed to these functions, and if the AJAX response contains an X-JSON HTTP header containing JSON content, then it will be hot and passed into the JSON parameter. If the event is onexception, the Transport parameter is replaced by an exception, and JSON will not pass.</p> <p>The ajax.base class</p> <p>This class is the base class of the class defined in the AJAX object.</p> <p>MethodkindargumentsDescriptionSetOptions (options) instance</p> <p>Options: Ajax Options Set the option you want. Responseissuccess () instance (none) Returns True If the AJAX operation is successful, otherwise false. Responseisfailure () Instance (NONE) is the opposite of Responseissuccess ().</p> <p>The Ajax.Request Class</p> <p>Inherit from Ajax.Base</p> <p>Package AJAX operation</p> <p>PropertyTypekindDescriptionEventSArrayStatic list of all possible reports in the AJAX operation. This list includes: 'uninitialized', 'loading', 'loaded', 'intective', and 'complete'. TransportXmlhttpRequestInstance carries the XMLHttpRequest object that is operated by Ajax. URL</p> <p>String</p> <p>instance</p> <p>The requested URL.</p> <p>MethodkindArgumentsDescription [CTOR] CONSTRUCTORURL: The Url To BE Fetched, Options: Ajax Options Creates an instance of this object, which will request URL under a given option. Oncreate event is excited in calling Constructor. Important: If the selected URL is subject to the security settings of the browser, he will not afford it. In many cases, the browser does not request a URL of different hosts (domain names) with the current page. You'd better use local URL to avoid restricting users to configure their browser (thank you Clay) Evaljson ()</p> <p>instance</p> <p>(none) This method is obviously not called outside. It is used to execute these contents when the X-JSON HTTP is included in the AJAX response. EvalReponse () Instance (NONE) This method is also obviously not called outside, and if the AJAX response contains a value of a value of Text / JavaScript, then this method is used to perform a responsive body. Header InstanceName: http header name references the head of the Ajax response, then calls this method after the Ajax Access is completed. OnStateChange () instance (none) This method is usually not called outside. This object is called by this object when the AJAX request status changes. Request (URL)</p> <p>instance</p> <p>URL: URL for the Ajax Call This method is usually not called outside. It has been called in the constructor. RespondToreadyState (ReadyState) InstanceReadyState: State Number (1 to 4) This method is usually not called outside. This object is called by this object when the AJAX request status changes. SetRequestHeaders () instance (none) This method is usually not called outside. Call themselves by this object to configure the HTTP header to send in HTTP request.</p> <p>The Options Argument Object</p> <p>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.</p> <p>PropertyTyPedefaultDescriptionMethodString'Post'HTTP request method. Parameterstring</p> <p>'' The list of values ​​in the URL format incoming in the HTTP request. AsynchronousBooleanTrue Specifies whether to do asynchronous AJAX requests. PostBodystringundefined In the case of HTTP POST, it is incorporated into the contents of the requested body. RequestHeadersArrayundefined and requests are incorporated together, this list must contain even items, any odd items are the name of the custom head, and the next even item makes the string value of this header project. Example: ['my-header1', 'this is the value', 'my-other-header', 'another value'] onxxxxxxxxfunction (xmlhttpRequest, Object) undefined In Ajax request, when the corresponding event / status is formed Calling custom method. For example, var myopts = {oncomplete: showResponse, onlineed: registerloaded} ;. This method will be incoming a parameter, which is the XMLHttpRequest object that carries the AJAX operation, and the other is included in the HTTP header that is executed. OnSuccessFunction (XMLHttpRequest, Object) undefined The custom method called when the AJAX request is successfully completed. This method will be introduced into a parameter, which is the XMLHttpRequest object that carries the AJAX operation, and the other is to include the X-JSON response HTTP header. OnfailureFunction (XmlhttpRequest, Object) undefined Customer Call when the AJAX request is completed but the error occurs. This method will be introduced into a parameter, which is the XMLHttpRequest object that carries the AJAX operation, and the other is to include the X-JSON response HTTP header. OnexceptionFunction (Ajax.Request, Exception)</p> <p>Undefined</p> <p>A custom function called when an Ajax executed in the client is like an exception such as an invalid response or an invalid parameter. It receives two parameters that contain an Ajax.Request object and an exception object that exception AJAX operation. INSERTIONAN INSERTION CLASSUNDEFINED A class that can insert new content, can INSERTION.BEFORE, INSERTION.TOP, INSERTION.BOTTOM, or INSERTION.AFTER. Only can only be applied to the Ajax.Updater object. EvalscriptsBooleanundefined, False decided time when the response arrived Whether to perform the script block, only in the Ajax.Updater object. DecayNumberundefined, 1 Decided that when the last response and the previous response at the same time in the Ajax.PeriodicalUpDater object, for example, if set to 2, the later refresh is the same as the previous result, this object will wait 2 settings. The timed interval is in the next refresh, and if it is the same again, then wait 4 times, and so on. Do not set this only, or set to 1, will avoid the accessed frequency slower. FREQUENCYNUMBERUNDEFINED, 2 The interval between the refreshes of the second represented, can only be applied to the Ajax.PeriodicalUpdater object.</p> <p>The ajax.Updater class</p> <p>Inherit from Ajax.Request</p> <p>When the requested URL returns a section of HTML and you want to place it directly into a specific element in the page. This object can also be used if the URL returns a block of <script> and wants to execute it when it is received. Use the EvalScripts option when you contain scripts.</p> <p>PropertyTypekindDescriptionContainersObjectInstance This object contains two properties: AJAX requests to use Containers.Success when performing successfully, otherwise use of Containers.Failure.</p> <p>MethodKindArgumentsDescription [ctor] (container, url, options) constructorcontainer: this can be the id of an element, the element object itself, or an object with two properties - object.success element (or id) that will be used when the AJAX call Succeeds, And Object.Failure Element (OR ID) That Will Be Used OtherWise. URL: The Url To BE Fetched, Options: Ajax Options Create an instance of a given URL with a given option. UpdateContent ()</p> <p>instance</p> <p>(none) This method is usually not called outside. When the response arrives, it is called by this object. It uses HTML to update the appropriate element or calls the method incorporated in the Insertion option - this method will be incorporated into two parameters, updated elements and response text.</p> <p>The ajax.periodicalupdater Class</p> <p>Inherit from Ajax.Base</p> <p>This class repeatedly generates and uses the Ajax.UpDater object to refresh one of the elements in the page. Or perform other tasks that Ajax.Updater can perform. More information References for Ajax.Updater.</p> <p>PropertyTypekindDescriptionContainerObject</p> <p>instance</p> <p>This value will pass directly into the construction method of the Ajax.Updater. UrlstringInstance This value will be directly incoming the construction method of the Ajax.Updater. FrequencyNumberInstance The interval between double refreshes (not frequency), in seconds. Default 2 seconds. This number will multiply the current decay when calling the Ajax.Updater object. DECAY</p> <p>Number</p> <p>The level of decline remaining when the installation of the task. Updaterajax.Updaterinstance The last time the Ajax.Updater object TimerObjectInstance notifies the next update JavaScript timer.</p> <p>MethodKindArgumentsDescription [ctor] (container, url, options) constructorcontainer: this can be the id of an element, the element object itself, or an object with two properties - object.success element (or id) that will be used when the AJAX call Succeeds, And Object.Failure Element (OR ID) That Will Be Used OtherWise. URL: The Url To BE Fetched, Options: Ajax Options Create an instance of a given URL with a given option. Start ()</p> <p>instance</p> <p>(none) This method is usually not called outside. The object is called when the task is initially performed. STOP () instance (none) causes the object to stop executing a cycle task. After stopping, if there is an oncomplete option, then trigger Callback. UpdateComplete () instance (none) This method is usually not called outside. Used by the current Ajax.Updater, when the request is over, it is used as the next request. OntimeRevent () instance (none) This method is usually not called outside. When it is updated to the next update, it is called internal. The element object</p> <p>This object provides a functional way to use when an element in the DOM is operated.</p> <p>MethodkindArgumentsDescribTIONAddClassName (Element, ClassName) InstanceElement: Element Object OR ID, ClassName: Name of a CSS Class The given className is added to the object's className property. ClassNames (Element)</p> <p>instance</p> <p>Element: Element Object OR ID Returns an Element.ClassName object indicates that CSS gives Class Names with an object. CleanWhitespace (Element) InstanceElement: Element Object OR ID Clears all blank text node in the object sub-element. EMPTY (ELEMENT) InstanceElement: Element Object OR ID Returns a Boolean value indicating that the object is empty or only blank characters. GetDimensions (Element) InstanceElement: Element Object OR ID Returns the size of the object, the return value has two properties, Height and Width. GetHeight (Element) InstanceElement: Element Object OR ID Returns OffsetHeight. getStyle (element, cssProperty) instanceelement: element object or id, returns null cssProperty name of a CSS property (either format 'prop-name' or 'propName' works) to return to the CSS property value of a given object or not specified cssProperty.. HasclassName (Element, ClassName) InstanceElement: Element Object OR ID, ClassName: Name of a CSS Class Returns True If the element's class name is a given class name Hide (Elem1 [, ELEM2 [, ELEM3 [...]]] The instanceelecn: Element Object OR ID hides each incoming element by setting Style.Display to 'None'. Makeclipping (Element) InstanceElement: Element Object OR ID Settings Conferencing Content overflow clips over setting Overflow. MakePositioned (Element) InstanceElement: Element Object OR ID Change the style.position for 'Relative'. Remove (Element) InstanceElement: Element Object OR ID Removes the specified element from the Document object. RemoveClassName (Element, ClassName) InstanceElement: Element Object OR ID, ClassName: Name of a CSS Class deletes a given class name from the class name. ScrollTo (Element) InstanceElement: Element Object OR ID scrolls Window to the location of the object. SetStyle (Element, CSSPropertyhash) InstanceElement: Element Object OR ID, CSSPropertyhash Hash Object with the styles to beapplied. Sets the CSS attribute value in accordance with the CSSPropertyhash parameter. Show (Elem1 [, ELEM2 [, ELEM3 [...]]) InstanceEleMn: Element Object OR ID Displays each incoming element with set its style.display to ''. Toggle (Elem1 [, ELEM2 [, ELEM3 [...]]]) InstanceEleMn: Element Object OR ID Switch Each incoming element is visible. undoclipping (Element) InstanceElement: Element Object OR IDStyle.overFlow value returns the previous set value.</p> <p>undoPositioned (element) instanceelement: element style.position object or id object to remove '' update (element, html) instanceelement: element object or id, html: html content HTML alternative parameters given object innerHTML, if the HTML parameter Include <script>, they will not be included, but will be executed. Visible (Element) InstanceElement: Element Object OR ID Returns a boolean value indicator object is invisible. The element.classnames class</p> <p>Inherit since ENUMERABLE</p> <p>A collection of CSS Class Names in an object.</p> <p>MethodkindargumentsDescribTION [CTOR] CONSTRUCTOREMENT: Any Dom Element Object OR ID Create an object, give the CSS Class Names of the object being expressed in this classNames object. Add (ClassName)</p> <p>instance</p> <p>ClassName: A CSS Class Name The CSS Class Name contains a list of Class Names into an object. Remove (ClassName) InstanceClassName: a CSS Class Name Removes ClassName Set (ClassName) InstanceClassName: A CSS Class Name Set Object CSS Class Name of ClassName from an object CSS Class Names.</p> <p>The Abstract Object</p> <p>This object is the root of other classes in this package. It doesn't have any properties and methods. The classes defined in this object can be considered a traditional abstraction class.</p> <p>The Abstract.Insertion Class</p> <p>This class is used as a base class that provides a class that provides dynamic content insertion functions, which is used like an abstraction class.</p> <p>MethodkindArgumentsDescription [CTOR] (Element, Content) ConstructOrElement: Element Object OR ID, Content: HTML to BE INSERTED Create a object that can help insert dynamic content. ContentFromanonymoustable ()</p> <p>instance</p> <p>(NONE) Turn into a Node array for Content through anonymous form.</p> <p>PropertyTypekindDescriptionAdjacency, parameter specifies the location of the content to be placed relative to a given element. Possible values ​​are: 'beforebegin', 'afterbegin', 'beforeend', and 'Afterend'.ElementObjectInstance and inserts do refer to the reference element object. ContentStringInstance is inserted HTML.</p> <p>The Insertion Object</p> <p>This object is the root of other similar functions. It doesn't have any properties and methods. The classes defined in this object can still be considered a traditional abstraction class.</p> <p>The insertion.before class</p> <p>Inherit from Abstract.Insertion</p> <p>Insert HTML in front of the given element starting mark.</p> <p>MethodkindargumentsDescribTION [CTOR] (Element, Content)</p> <p>Constructor</p> <p>ELEMENT: Element Object OR ID, Content: HTML to BE INSERTED Inherited from Abstract.Insertion. Create a object that can help insert dynamic content.</p> <p>The following code</p> <p><br> Hello, <span id = "" style = "color: red;"> wiggum. How's it going? </ span></p> <p><script> new insertion.before ('person', 'chief'); </ script></p> <p>The HTML will become</p> <p><br> Hello, Chief <span id = "words" style = "color: red;"> wiggum. How's it going? </ span></p> <p>The insertion.top class</p> <p>Inherit from Abstract.Insertion</p> <p>Insert HTML inserted in the first subtitle position of a given element. The content will be on the back surface of the start mark of the element.</p> <p>MethodkindargumentsDescribTION [CTOR] (Element, Content)</p> <p>Constructor</p> <p>ELEMENT: Element Object OR ID, Content: HTML to BE INSERTED Inherited from Abstract.Insertion. Create a object that can help insert dynamic content.</p> <p>The following code</p> <p><br> Hello, <span id = "" style = "color: red;"> wiggum. How's it going? </ span></p> <p><script> new insertion.top ('person', 'mr.'); </ script></p> <p>The HTML will become</p> <p><br> Hello, <span id = "Person" style = "color: red;"> mr. wiggum. How's it going? </ span></p> <p>The insertion.bottom class</p> <p>Inherits from abstract.insertion</p> <p>Insert HTML in the last child node position of a given element. The content will be on the tightening of the end tag of the element.</p> <p>MethodKindArgumentsDescription [ctor] (element, content) constructorelement: element object or id, content:. HTML to be insertedInherited from Abstract.Insertion Creates an object that will help with dynamic content insertion.</p> <p>The Following Code</p> <p><br> Hello, <span id = "" style = "color: red;"> wiggum. How's it going? </ span></p> <p><script> new INSERTION.BOTTOM ('Person', "What's Up?"); </ script></p> <p>Will Change the Html To</p> <p><br> Hello, <span id = "" style = "color: red;"> wiggum. How's it going? What's up? </ span></p> <p>The insertion.after Classinherits from abstract.insertion</p> <p>The HTML is inserted behind the end tag of a given element.</p> <p>MethodKindArgumentsDescription [ctor] (element, content) constructorelement: element object or id, content:. HTML to be insertedInherited from Abstract.Insertion Creates an object that will help with dynamic content insertion.</p> <p>The Following Code</p> <p><br> Hello, <span id = "" style = "color: red;"> wiggum. How's it going? </ span></p> <p><script> new insertion.af ('Person', 'Are you there?'); </ script></p> <p>Will Change the Html To</p> <p><br> Hello, <span id = "" style = "color: red;"> wiggum. How's it going? </ span> Are you there?</p> <p>The Field Object</p> <p>This object provides the functionality method of the input item in the operational form.</p> <p>MethodkindargumentsDesDescriptionClear (Field1 [, Field2 [, Field3 [...]]) Instancefieldn: Field Element Object OR ID Clears the value of the project element in the incoming form. Present (Field1 [, Field2 [, Field3 [...]]) Instancefieldn: Field Element Object OR ID Only Returns True when all form items are empty. Focus (Field)</p> <p>instance</p> <p>Field: Field Element Object OR ID Moves focus to a given form item. Select (Field) Instancefield: Field Element Object OR ID Select the value of the form item that supports the project value. Activate (Field) InstanceField: Field Element Object OR ID moves focus and selects the value of the form item that supports the item value.</p> <p>The form Object</p> <p>This object provides a functional method for operating a form and their input elements.</p> <p>MethodkindargumentsDescriptionSerialize (form) Instance: 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'. Findfirstlement (Form)</p> <p>instance</p> <p>The Form: Form Element Object OR ID Returns the object of the first Enable in Form. getElements (Form) InstanceForm: Form Element Object OR ID Returns Array Objects that contain all items in your form. GetInputs (Form [, TypeName [, Name]]) Instanceform: Form Element Object OR ID, TYPENAME: THE TYPE OF THE INPUT ELEMENT. Return to an array contains all <input> in the form element. In addition, this list can be filtered on the type or name property of the element. Disable (Form) InstanceForm: Form Element Object OR ID is invalidated by all input items in the form. Enable (form) InstanceForm: Form Element Object OR ID is valid for all input items in the form. FocusFirstlement (Form) InstanceForm: Form Element Object OR ID Activates the first form, valid input items. RESET (FORM) InstanceForm: Form Element Object OR ID Reset Form. Like the reset () method that calls the form object. The Form.element Object</p> <p>This object provides a functional method of visual and non-visual elements in a form object.</p> <p>MethodkindargumentsDescribTIONSerialize (Element)</p> <p>instance</p> <p>ELEMENT: Element Object OR ID Returns Name = Value Pair, such as 'ElementName = ElementValue'. GetValue (Element) InstanceElement: Element Object OR ID Returns the value of the element.</p> <p>The form.element.serializers Object.serializers object</p> <p>This object provides some useful ways to assist in assisting the current value of the form elements internally.</p> <p>MethodKindArgumentsDescriptioninputSelector (element) instanceelement: object or id of a form element that has the checked property, like a radio button or checkbox Array with the element name and returns the value, such as [ 'elementName', 'elementValue'] textarea (element).</p> <p>instance</p> <p>element: object or id of a form element that has the value property, like a textbox, button or password field with return Array element names and values, such as [ 'elementName', 'elementValue'] select (element) instanceelement.: Object of a <select> Element Returns the array with the element name and all selected options, such as ['ElementName', 'SELOPT1 SELOPT4 SELOPT9']</p> <p>The Abstract.timedobserver Class</p> <p>This class is the base class for the class that changes the value of the value (or attribute involved in any class), this class is used like an abstraction class.</p> <p>Subclasses can be created to listen to the number of input item values, or the number of lines, or the number of tables, or anything related to tracking changes. Subclasses must implement this method to determine what is the current value of the monitored element.</p> <p>MethodKindArgumentsDescription [ctor] (element, frequency, callback) constructorelement: element object or id, frequency: interval in seconds, callback: function to be called when the element changes create an object monitor elements. GetValue () Instance, Abstract (NONE) subclass must implement this method to set the current value of this element being monitored. Registercallback ()</p> <p>instance</p> <p>(none) This method is usually not called outside. Call it by this object to start listening to that element. OntimeRevent () instance (none) This method is usually not called outside. This object is called to periodically check that element.</p> <p>PropertyTyPedescriptionElementObject is listened to element objects. FREQUENCY</p> <p>Number</p> <p>Time interval in seconds in seconds per check. CallbackFunction (Object, String) As long as the element changes this method, it will be called. Element objects and new values ​​are received as parameters. The last value of the LastValueString element is verified.</p> <p>The form.element.observer Class</p> <p>Inherit from Abstract.timedobserver</p> <p>A change of the ABSTRACT.TIMEDOBSERVER is used to listen to changes in the form of the form. Use this class when you want to listen to an element without a report value change event. Otherwise, use the Form.element.EventobServer class instead.</p> <p>MethodKindArgumentsDescription [ctor] (element, frequency, callback) constructorelement: element object or id, frequency: interval in seconds, callback: function to be called when the element changes inherited from Abstract.TimedObserver create an object that listens element value of the property. GetValue ()</p> <p>instance</p> <p>(NONE) Returns the value of the element.</p> <p>The form.observer Class</p> <p>Inherit from Abstract.timedobserver</p> <p>A change of the value of the ABSTRACT.TIMEDOBSERVER is used to listen to the value of any data item in the form. Use this class when you want to listen to an element without a report value change event. Otherwise, use the class form.eventobserver instead.</p> <p>MethodKindArgumentsDescription [ctor] (form, frequency, callback) constructorform: form object or id, frequency: interval in seconds, callback function to be called when any data entry element in the form changes Inherited from Abstract.TimedObserver create a change in the form of listening. Object. GetValue ()</p> <p>instance</p> <p>(NONE) Returns a series of values ​​for all form data.</p> <p>The Abstract.EventobServer Class</p> <p>This class is used as a base class for other classes, which has functions such as a callback method when changing the value of an element.</p> <p>Multiple objects of class Abstract.EventobServer can be bound to an element, not a help of other erasing, but perform these callback methods in order to pay the elements. The trigger event of the radio button and the check box is OnClick, and the text box and drop-down list box / drop-down list box is onchange.</p> <p>MethodkindArgumentsDescribTION [CTOR] (Element, Callback) ConstructOrElement: Element Object OR ID, Callback: Function To Be Called When The Event Happens Creates an object of listening elements. GetValue ()</p> <p>Instance, Abstract</p> <p>(NONE) Subclasses must implement this method to set the current value of this element being monitored. RegisterCallback () instance (none) This method is usually not called outside. The object is called to bind yourself to the elements. RegisterformCallbacks () instance (none) This method is usually not called outside. The object is called to bind yourself to the event of each data item element in the form. OneElementevent () Instance (None) This method is usually not called outside. The event that will be bound to the element.</p> <p>PropertyTyPedescriptionElementObject is listened to element objects. CallbackFunction (Object, String) As long as the element changes, the method is called. Element objects and new values ​​are received as parameters. The last value of the LastValueString element is verified.</p> <p>The form.efficient.eventobserver Class</p> <p>Inherited from Abstract.Eventobserver</p> <p>A category of Abstract.EventobServer, which performs a callback method when monitoring the value of the value of the data item element in the form. If the element does not have any events that change changes, you can use the form.element.observer class instead.</p> <p>MethodkindargumentsDesDescribTION [CTOR] (Element, Callback) ConntructoreElement: Element Object OR ID, Callback: Function to Be Called When The Event Happens Inherited from Abstract.EventobServer. Create an object that listens element value attribute. GetValue ()</p> <p>instance</p> <p>(NONE) Returns the value of the element.</p> <p>The form.eventobserver Class</p> <p>Inherited from Abstract.Eventobserver</p> <p>A ITRACT.EVENTOBSERVER is an implementation class that listens to any change in any object contained in the form object, and changes in the event detection value of the element. If the element does not have any events that change changes, then you can use the form.observer class instead.</p> <p>MethodkindargumentsDesDescription [CTOR] (Form, Callback) Constructorform: Form Object OR ID, Callback: Function to Be Called When Any Data Entry Element in The form of Abstract.EventobServer. Create an object that listens element value attribute. GetValue ()</p> <p>instance</p> <p>(NONE) Returns a series of values ​​for all form data.</p> <p>Position object (preparatory document)</p> <p>This object provides many ways related to elemental location.</p> <p>MethodkindargumentsDescriptionPrepare ()</p> <p>instance</p> <p>(NONE) Adjusts the Deltax and Deltay properties to coordinate changes in the scroll position. Remember to call this method before any calling of the WITHINCLUDINGSCROLLLLLLLLLLLLLFSET after scrolling. Realoffset (Element) Instance</p> <p>ELEMENT: Object Returns the Array object of the correct scrolling deviation of this element, including all scroll deviations that affect the elements. Result Array Similar to [TOTAL_SCROLL_LEFT, TOTAL_SCROLL_TOP] CumulativeOffset (Element) InstanceElement: Object Retrieving the correct scrolling deviation of this element, containing any of the placed parent elements to impose a deviation. Result Array Similar to [Total_offset_LEFT, TOTAL_OFFSET_TOP] WITAL_OFFSET_TOP] WITALEMENT: OBJECT, X AND Y: COORDINATES OF A POINT Test Whether the coordinates of the given point are within the external rectangular range of a given element. WITHININCLUDINGSCROLLLOFSETS (Element, X, Y) InstanceElement: Object, x and y: COORDINATES OF A Point Tests if the coordinates of the given point (including scroll offsets) within the external rectangle of a given element. OVERLAP (Mode, Element)</p> <p>instance</p> <p>Mode: 'vertical' or 'Horizontal', Element: Object Requires call () () () before calling this method. This method returns a number between 0.0 to 1.0 to indicate the score of the coordinates overlap the elements. For example, if the element is a square side of the square of 100px, it is located (300, 300), then Withn (Divsquare, 330); Overlap ('Vertical', Divsquare); will return 0.10, meaning That point is located at a location of 10% (30px) below the DIV top frame. Clone (Source, Target) Instancesource: Element Object OR ID, TARGET: Element Object OR ID Changes the size of the target element to the same size and location as the source element.</p> <p>Repost</p> <p>Http://thinhunan.cnblogs.com/archive/2006/04/01/Developernotesforprototype.html</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-131959.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="131959" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: <b>0.053</b>, SQL: <b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = 'WUaXdefpYsdjoJypD9pdJCL3O0dBIH0XxwawUNAmkwhL9rkFWGpO2EJx4gjEnt_2BU68dNMQF1ldmNURM6mhDMxg_3D_3D'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>