Prototype Element Learning notes (article II) _prototype

Source: Internet
Author: User
Tags wrapper
The first argument for all functions is: element, which represents the reference of the element to be manipulated, in order to add these methods to the DOM object when Element.extend, using the Methodize function. You do not need to enter the first argument when you call, for example:
var b=$ (' Div1 '). visible ();
In addition, almost all functions return themselves, noting that the extended element is of the type: HtmlElement, the reason for doing so, has one advantage, is to facilitate ligatures code, such as:
$ (' Div1 '). Update (). Insert (' This is the newly inserted content ');
This writing code has a good readability and is easy to write.
Here is a description of the function:
Visible (Element): Boolean
Whether the element is visible (depends on Element.style.display)
Toggle (Element): HtmlElement
The element is visible so that it is invisible and invisible. The reference to the element itself is then returned. (depending on element.style.display)
Hide (Element): HtmlElement
Hidden elements. (depending on element.style.display)
Show (Element): HtmlElement
Displays the element. (depending on element.style.display)
Remove (Element): HtmlElement
Deletes the element itself (the deleted element is returned after deletion).
Update (element, content): HtmlElement
Similar to element.innerhtml, you have added functions such as processing scripts and so on. It inserts the contents before executing the script in the content.
Replace (element, content): HtmlElement
Replaces the current element. and returns the element that was replaced.
Insert (element, insertions): HtmlElement
Inserts the content at the specified location of the element, and the insertions value is as follows:
String/number/element, for example: ' This is the string to insert!! ', by default inserted into the bottom position of the element.
{TOP:XXXXX,BOTTOM:YYYY,BEFORE:ZZZZZ,AFTER:AAAA}, for example: {top: ' This content is insert! '}.
The return value is element.
Wrap (element, wrapper, attributes): HtmlElement
Cover an element outside of the elements. Usually used as a mask.
Wrapper:elementid, Element, TagName, attrbutes (you can omit the label setting when you create a hood as a div)
Attributes: A JSON object that sets the style of the element, such as: {color: "Red", BackgroundImage: "url (header.gif)"}
$ (' win1 '). Wrap (' Div1 ', {color: "#666"});
$ (' win1 '). Wrap (' span ', {font-size:12});
$ (' win1 '). Wrap ({color: "#666"});
Returns a reference to the mask that was created.
Inspect (Element): string
Generates a string representing the current element, for example: <div id= ' xxx ' class= ' xxx ', which has only two properties, not equal to tohtml ().
Recursivelycollect (element, property): htmlelement[]
Bad description, for example: $ (' Div1 '). Recursivelycollect (' FirstChild '), which returns all elements of the identity of the firstborn in Div1.
Ancestors (Element): htmlelement[]
Returns all the direct ancestors of this element, for example: if there is an element div1, its father is Div2,div2, the father is Div3, and that is the way to keep calling.
Descendants (Element): htmlelement[]
Returns an array of all descendant element nodes. equals Element.select (' * ').
Firstdescendant (Element): HtmlElement
Return to the first son. All sons (excluding grandchildren, great-grandchildren ...). OH).
Immediatedescendants (Element): htmlelement[]
Return all sons (excluding grandchildren, great-grandchildren ...). OH).
Previoussiblings (Element): htmlelement[]
Return to all brothers.
Nextsiblings (Element): htmlelement[]
Return to all the younger brothers.
Siblings (Element): htmlelement[]
Returns all siblings, sorted by the order of "big to small" (in the order in which they appear in HTML).
Match (element, selector): Boolean
Whether the element satisfies the specified selector
Up (element, expression, index): HtmlElement
In Element.ancestors (), the index element in the array that satisfies the expression expression, as follows:
$ (' Div1 '). Up (' div ', 1) returns a reference to the element in the direct ancestor, labeled Div, with ordinal 1.
Down (element, expression, index): HtmlElement
Return to descendants, index is the element that satisfies the expression of the selector.
Previous (element, expression, index): HtmlElement
Previous (element, expression, index): HtmlElement
The two are not suspense, return to the previous one, the latter one, the first n, after N.
Select (Element,selector1,selector2,......) : htmlelement[]
Returns an array of elements that satisfy the selector, with a set relationship between multiple selectors.
Adjacent (Element,selector): htmlelement[]
Returns all brothers that satisfy the selector, excluding themselves.
Identify (Element): string
An ID is returned with an ID, and an ID is not taken. and returns.
Readattribute (element, name): string
Read properties
WriteAttribute (element, name, value): HtmlElement
Write properties
  
=============================================
The functions above are used for querying, chores, the following functions are generally used to get, set various coordinates, in the Web page, an element of the common coordinates of several kinds, but the following:
One, relative to the upper-left corner of the document
Second, relative to the upper left corner of the viewport
Three, relative to an element of
Looking at the code in each frame, the coordinates are no more than these three kinds. The following is outlined in one or two.
GetHeight (Element), getwidth (Element), the equivalent of ClientHeight, clientwidth.
Classnames (Element): Element.classnames
Hasclassname (element, className): Boolean
Addclassname (element, className): HtmlElement
Removeclassname (element, className): HtmlElement
Toggleclassname (element, className): HtmlElement
Cleanwhitespace (Element): htmlelement, deleting a blank text node
Empty (Element): Boolean, element whether the content is blank
Descendantof (element, ancestor): Boolean, determining whether an element is a descendant of an element, ancestor as an ID or an element reference.
Scrollto (Element): HtmlElement, scrolls to this element, and returns a reference to this element.
GetStyle (element, style): An indeterminate type that returns the value of a style of an element.
Getopacity (Element): Float, return transparency.
SetStyle (element, styles): HtmlElement, set the style of the element, styles is a JSON object.
SetOpacity (element, value): HtmlElement, sets the transparency of the element.
Getdimensions (Element): {width:x,height:y}. Return to Clientwidth,clientheight.
makepositioned (Element): HtmlElement, set position to relative. Does not set the position to the current position.
undopositioned (Element): HtmlElement, set the position of the element to the default value.
Makeclipping (Element): HtmlElement, setting the overflow of the element.
Undoclipping (Element): HtmlElement, clear overflow.
Cumulativeoffset (Element): Element._returnoffset, gets offset from the entire page.
Positionedoffset (Element): Element._returnoffset, to get offset, which is not static relative to the first position. If all is static, it is relative to the page.
Absolutize (Element): HtmlElement, set position to absolute, and place the position to its current position.
Relativize (Element): HtmlElement, set the position to Ralative, and set the position to the current position.
Cumulativescrolloffset (Element): Element._returnoffset, compared to the scrolloffset of the top-level container, is not necessarily a document oh, because there is no IFRAME in the page.
Getoffsetparent (Element): HtmlElement, has studied the CSS to say, does not have to speak more.
Viewportoffset (Element): Element._returnoffset, to find the offset relative to the upper-left corner of the viewport.
  Cloneposition (element, source): HtmlElement from the source clone location attribute to itself.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.