What is prototype. js?
In case you haven't used the famous prototype. js, let me tell you that prototype. js is a javascript class library written by Sam Stephen enson. This fantastic idea and compatible with standard class libraries can help you easily build rich client pages with highly interactive web features.
If you try to use it recently, you probably know that the document is not the author's strength. Like many developers who used this class library before, at the beginning, I had to read prototype. js source code and experiment with its functions. I think it is good to share what I learned with you after I finish learning it.
At the same time, in this article, I will also provide an unofficial reference for the objects, classes, functions, and extensions provided by this class library.
When reading this document, developers familiar with Ruby will notice that some of Ruby's built-in classes are very similar to the extension implementation of this class library.
Related Articles
Advanced JavaScript guide.
Some practical functions
This class library has many predefined objects and practical functions. These classes are clearly designed to free you from repeated typing.
Use the $ () method
$ () Is a document that is used too frequently in the DOM. A convenient shorthand for the getElementById () method. Like this DOM method, this method returns the element of the id passed in by the parameter.
This is better than the DOM method. You can input multiple IDS as parameters and then $ () returns an Array object with all the required elements.Copy to ClipboardReference: [www.bkjia.com] <HTML>
<HEAD>
<TITLE> Test Page </TITLE>
<Script src = "prototype-1.3.1.js"> </script>
<Script>
Function test1 ()
{
Var d = $ ('mydiv ');
Alert (d. innerHTML );
}
Function test2 ()
{
Var divs = $ ('mydiv ', 'mytherdiv ');
For (I = 0; I <divs. length; I ++)
{
Alert (divs [I]. innerHTML );
}
}
</Script>
</HEAD>
<BODY>
<Div id = "myDiv">
<P> This is a paragraph </p>
</Div>
<Div id = "myOtherDiv">
<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 benefit is that this function can pass in the ID of the object represented by string or the object itself. In this way, it is useful when creating other functions that can pass two types of parameters.
Use the $ F () function
The $ F () function is another popular shortcut that can be used to return the value of any form input control, such as text box and drop-down list. This method can also use the element id or element itself as the parameter.Copy to ClipboardReference content: [www.bkjia.com] <script>
Function test3 ()
{
Alert ($ F ('username '));
}
</Script>
<Input type = "text" id = "userName" value = "Joe Doe"> <br>
<Input type = "button" value = Test3 onclick = "test3 ();"> <br> use the $ A () function
The $ A () function converts A single parameter it receives into an Array object.
This method, combined with the Array class extended by this class library, can easily convert any enumerated list into or copy to an Array object. A recommended method is to convert DOM Node Lists into a common Array object for more efficient traversal. See the following example.Copy to ClipboardReference content: [www.bkjia.com] <script>
Function showOptions (){
Var someNodeList = $ ('lstemployees'). getElementsByTagName ('option ');
Var nodes = $ A (someNodeList );
Nodes. each (function (node ){
Alert (node. nodeName + ':' + node. innerHTML );
});
}
</Script>
<Select id = "lstEmployees" 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 the $ H () function
The $ H () function converts some objects into an enumerated Hash object similar to the Union array.Copy to ClipboardReference content: [www.bkjia.com] <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 ();
Alert (h. toQueryString (); // displays: first = 10 & second = 20 & third = 30
}
</Script> use the $ R () function
$ R () is the abbreviation of new ObjectRange (lowBound, upperBound, excludeBounds.
Jump to the ObjectRange class document to see a complete description of this class. At this time, let's take a look at an example to show which methods can be replaced by this abbreviation. Other related knowledge can be found in the Enumerable object document.Copy to ClipboardReference content: [www.bkjia.com] <script>
Function demoDollar_R (){
Var range = $ R (10, 20, false );
Range. each (function (value, index ){
Alert (value );
});
}
</Script>
<Input type = "button" value = "Sample Count" onclick = "demoDollar_R ();"> use the Try. these () function
Try. the these () method makes it easy to implement this requirement when you want to call different methods until one of them is successful and normal, he uses a series of methods as parameters and executes these methods one by one in sequence until one of them is successfully executed, and returns the return value of the method that is successfully executed.
In the following example, xmlNode. text is useful 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 that works normally.
Copy to ClipboardReference content: [www.bkjia.com] <script>
Function getXmlNodeValue (xmlNode ){
Return Try. these (
Function ()
Unknown macro: {return xmlNode. text ;}
,
Function () {return xmlNode. textContent
);
}
</Script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
