Utility Methods:
$(id | element) -> HTMLElement
$((id | element)...) -> [HTMLElement...]
If provided with a string, returns the element in the document with matching ID;
otherwise returns the passed element. Takes in an arbitrary number of arguments.
All elements returned by the function are extended with Prototype DOM
extensions.
$$(cssRule...) -> [HTMLElement...]
Takes an arbitrary number of CSS selectors (strings) and returns a
document-order array of extended DOM elements that match any of them.
$A(iterable) -> actualArray
Accepts an array-like collection (anything with numeric indices) and returns its
equivalent as an actual Array object. This method is a convenience alias of
Array.from, but is the preferred way of casting to an Array.
$F(element) -> value
Returns the value of a form control. This is a convenience alias of
Form.Element.getValue. Refer to it for full details.
$H([obj]) -> Hash
Creates a Hash (which is synonymous to “map” or “associative array” for
our purposes). A convenience wrapper around the Hash constructor, with a
safeguard that lets you pass an existing Hash object and get it back untouched
(instead of uselessly cloning it).
$R(start, end[, exclusive = false]) -> ObjectRange
Creates a new ObjectRange object. This method is a convenience wrapper around
the ObjectRange constructor, but $R is the preferred alias.
$w(String) -> Array
Splits a string into an Array, treating all whitespace as delimiters. Equivalent
to Ruby's %w{foo bar} or Perl's qw(foo bar).
Element
new Element(tagName[, attributes])
var a = new Element('a', { 'class': 'foo', href: '/foo.html' }).update("Next
page");
Constructor creates new element.
absolutize(element) -> HTMLElement
Turns element into an absolutely-positioned element without changing its
position in the page layout.
addClassName(element, className) -> HTMLElement
Adds a CSS class to element.
addMethods([methods])
addMethods(tagName, methods)
Takes a hash of methods and makes them available as methods of extended elements
and of the Element object. The second usage form is for targeting a specific
HTML element.
Element.adjacent(element[, selectors...]) -> [HTMLElement...]
someElement.adjacent([selectors...]) -> [HTMLElement...]
Finds all siblings of the current element that match the given selector(s).
ancestors(element) -> [HTMLElement...]
Collects all of element’s ancestors and returns them as an array of extended
elements.
childElements(element) -> [HTMLElement...]
Collects all of the element's children and returns them as an array of extended
elements.
cleanWhitespace(element) -> HTMLElement
Removes all of element's text nodes which contain only whitespace. Returns
element.
clonePosition(element, source[, options]) -> HTMLElement
Clones the position and/or dimensions of source onto element as defined by the
optional argument options.
cumulativeOffset(element) -> [Number, Number] also accessible as { left: Number,
top: Number }
Returns the offsets of element from the top left corner of the document.
cumulativeScrollOffset(element) -> [Number, Number] also accessible as { left:
Number, top: Number }
Calculates the cumulative scroll offset of an element in nested scrolling
containers.
descendantOf(element, ancestor) -> Boolean
Checks if element is a descendant of ancestor.
descendants(element) -> [HTMLElement...]
Collects all of element’s descendants and returns them as an array of extended
elements.
down(element[, cssRule][, index = 0]) -> HTMLElement | undefined
Returns element’s first descendant (or the n-th descendant if index is
specified) that matches cssRule. If no cssRule is provided, all descendants are
considered. If no descendant matches these criteria, undefined is returned.
empty(element) -> Boolean
Tests whether element is empty (i.e. contains only whitespace).
extend(element)
Extends element with all of the methods contained in Element.Methods and
Element.Methods.Simulated. If element is an input, textarea or select tag, it
will also be extended with the methods from Form.Element.Methods. If it is a
form tag, it will also be extended with Form.Methods.
fire(eventName[, memo]) -> Event
Fires a custom event with the current element as its target.
firstDescendant(element) -> HTMLElement
Returns the first child that is an element. This is opposed to firstChild DOM
property which will return any node (whitespace in most usual cases).
getDimensions(element) -> {height: Number, width: Number}
Finds the computed width and height of element and returns them as key/value
pairs of an object.
getHeight(element) -> Number
Finds and returns the computed height of element.
getOffsetParent(element) -> HTMLElement
Returns element’s closest positioned ancestor. If none is found, the body
element is returned.
getStyle(element, property) -> String | null
Returns the given CSS property value of element. property can be specified in
either of its CSS or camelized form.
getWidth(element) -> Number
Finds and returns the computed width of element.
hasClassName(element, className) -> Boolean
Checks whether element has the given CSS className.
hide(element) -> HTMLElement
Hides and returns element.
identify(element) -> id
returns element’s id attribute if it exists, or sets and returns a unique,
auto-generated id.
insert(element, { position: content }) -> HTMLElement
insert(element, content) -> HTMLElement
Inserts content before, after, at the top of, or at the bottom of element, as
specified by the position property of the second argument. If the second
argument is the content itself, insert will append it to element.
inspect
inspect(element) -> String
Returns the debug-oriented string representation of element.
makeClipping(element) -> HTMLElement
Simulates the poorly supported CSS clip property by setting element's overflow
value to 'hidden'. Returns element.
makePositioned(element) -> HTMLElement
Allows for the easy creation of CSS containing block by setting element's CSS
position to 'relative' if its initial position is either 'static' or undefined.
Returns element.
match(element, selector) -> Boolean
Checks if element matches the given CSS selector.
next(element[, cssRule][, index = 0]) -> HTMLElement | undefined
Returns element’s following sibling (or the index’th one, if index is
specified) that matches cssRule. If no cssRule is provided, all following
siblings are considered. If no following sibling matches these criteria,
undefined is returned.
nextSiblings(element) -> [HTMLElement...]
Collects all of element’s next siblings and returns them as an array of
extended elements.
Element.observe(element, eventName, handler) -> HTMLElement
someElement.observe(eventName, handler) -> HTMLElement
Registers an event handler on element and returns element.
positionedOffset(element) -> [Number, Number] also accessible as { left: Number,
top: Number }
Returns element’s offset relative to its closest positioned ancestor (the
element that would be returned by Element#getOffsetParent).
previous(element[, cssRule][, index = 0]) -> HTMLElement | undefined
Returns element's previous sibling (or the index'th one, if index is specified)
that matches cssRule. If no cssRule is provided, all previous siblings are
considered. If no previous sibling matches these criteria, undefined is
returned.
previousSiblings(element) -> [HTMLElement...]
Collects all of element’s previous siblings and returns them as an array of
extended elements.
readAttribute(element, attribute) -> String | null
Returns the value of element's attribute or null if attribute has not been
specified.
recursivelyCollect(element, property) -> [HTMLElement...]
Recursively collects elements whose relationship is specified by property.
property has to be a property (a method won’t do!) of element that points to a
single DOM node. Returns an array of extended elements.
relativize(element) -> HTMLElement
Turns element into an relatively-positioned element without changing its
position in the page layout.
remove(element) -> HTMLElement
Completely removes element from the document and returns it.
removeClassName(element, className) -> HTMLElement
Removes element’s CSS className and returns element.
replace(element[, html]) -> HTMLElement
Replaces element by the content of the html argument and returns the removed
element.
scrollTo(element) -> HTMLElement
Scrolls the window so that element appears at the top of the viewport. Returns
element.
select(element, selector...) -> [HTMLElement...]
Takes an arbitrary number of CSS selectors (strings) and returns an array of
extended descendants of element that match any of them.
Element.setOpacity(element, opacity) -> [HTMLElement...]
someElement.setOpacity(opacity) -> [HTMLElement...]
Sets the visual opacity of an element while working around inconsistencies in
various browsers. The opacity argument should be a floating point number, where
the value of 0 is fully transparent and 1 is fully opaque.
setStyle(element, styles) -> HTMLElement
Modifies element’s CSS style properties. Styles are passed as a hash of
property-value pairs in which the properties are specified in their camelized
form.
show(element) -> HTMLElement
Displays and returns element.
siblings(element) -> [HTMLElement...]
Collects all of element’s siblings and returns them as an array of extended
elements.
stopObserving(element, eventName, handler) -> HTMLElement
Unregisters handler and returns element.
toggle(element) -> HTMLElement
Toggles the visibility of element.
toggleClassName(element, className) -> HTMLElement
Toggles element’s CSS className and returns element.
undoClipping(element) -> HTMLElement
Sets element’s CSS overflow property back to the value it had before
Element.makeClipping() was applied. Returns element.
undoPositioned(element) -> HTMLElement
Sets element back to the state it was before Element.makePositioned was applied
to it. Returns element.
up(element, [cssRule][, index = 0]) -> HTMLElement | undefined
Returns element’s first ancestor (or the index’th ancestor, if index is
specified) that matches cssRule. If no cssRule is provided, all ancestors are
considered. If no ancestor matches these criteria, undefined is returned.
update(element[, newContent]) -> HTMLElement
Replaces the content of element with the provided newContent argument and
returns element.
viewportOffset(element) -> [Number, Number] also accessible as { left: Number,
top: Number }
Returns the X/Y coordinates of element relative to the viewport.
visible(element) -> Boolean
Returns a Boolean indicating whether or not element is visible (i.e. whether its
inline style property is set to "display: none;").
Element.wrap(element, wrapper[, attributes]) -> HTMLElement
someElement.wrap(wrapper[, attributes]) -> HTMLElement
Wraps an element inside another, then returns the wrapper.
writeAttribute(element, attribute[, value = true]) -> HTMLElement
writeAttribute(element, attributes) -> HTMLElement
Adds, specifies or removes attributes passed as either a hash or a name/value
pair.
Form Functions
$F(fieldname);
Return the value of the form element, whether it is a text input, textarea,
select box or checkbox. If it is a checkbox, it will return undefined if
unchecked. Radio groups dont work.
Form.getElements(formID);
Returns an array of all the form elements for form formID
Form.serialize(formID);
Returns a formatted URL containing all the elements in the form, similar to
&field=value&field2=othervalue
Form.focusFirstElement(formID);
Will set focus on the first form element.
Exception Handling
Try.these(
function(){
// errors
},
function(){
// other stuff
}
);
Allows you to execute the second function if the first one fails.
Kinda like try/catch, except it doesn't make any sense.
Ajax
function ajaxMe( theUrl, data ){
var ajaxRequest = new Ajax.Request(
theUrl,{method: post, parameters: data, onComplete: theResponse});
}
function theResponse(origRequest){
alert(origRequest.responseText);
}
Classes
var Butter = Class.create({
initialize: function(brand) {
this.brand = brand;
this.melted = false;
},
melt: function() {
this.melted = true;
}
})
var parkay = new Butter('Parkay');
Prototype gives you a way to create classes. If you want, you
can define an initialize function that will be called when
instances of the class are created.
