Adds a css class to elements.
$().addClass("selected");
appframework object
Appends to the elements We boil everything down to an appframework object and then loop through that. If it's HTML, we create a dom element so we do not break event bindings. if it's a script tag, we evaluate it.
$().append("<div></div>"); //Creates the object from the string and appends it
$().append($("#foo")); //Append an object;
appframework object
Appends the current collection to the selector
$().appendTo("#foo"); //Append an object;
Gets or sets an attribute on an element If used as a getter, we return the first elements value. If nothing is in the collection, we return undefined
$().attr("foo"); //Gets the first elements 'foo' attribute
$().attr("foo","bar");//Sets the elements 'foo' attribute to 'bar'
$().attr("foo",{bar:'bar'}) //Adds the object to an internal cache
to act upon. If it's an object (hashmap), it will set the attributes based off the kvp.
any
If used as a getter, return the attribute value. If a setter, return an appframework object
Binds an event to each element in the collection and executes the callback
$().bind('click',function(){console.log('I clicked '+this.id);});
appframework object
custom events since people want to do $().blur instead of $().bind("blur")
custom events since people want to do $().change instead of $().bind("change")
Returns the child nodes of the elements based off the selector
$("#foo").children('.bar'); //Selector
$("#foo").children($('.bar')); //Objects
$("#foo").children($('.bar').get(0)); //Single element
appframework object with unique children
custom events since people want to do $().click instead of $().bind("click")
Clones the nodes in the collection.
$().clone();// Deep clone of all elements
$().clone(false); //Shallow clone
appframework object of cloned nodes
Returns the closest element based off the selector and optional context
$("#foo").closest('.bar'); //Selector
$("#foo").closest($('.bar')); //Objects
$("#foo").closest($('.bar').get(0)); //Single element
Returns an appframework object with the closest element based off the selector
Gets the computed style of CSS values
$("#main").computedStyle('display');
property
css vlaue
Gets or sets a css property for the collection If used as a get, the first elements css property is returned This will add px to properties that need it.
$().css("background"); // Gets the first elements background
$().css("background","red") //Sets the elements background to red
any
an appframework object
Gets or set data-* attribute parameters on elements (when a string) When used as a getter, it's only the first element
$().data("foo"); //Gets the data-foo attribute for the first element
$().data("foo","bar"); //Sets the data-foo attribute for all elements
$().data("foo",{bar:'bar'});//object as the data
any
returns the value or appframework object
Delegate an event based off the selector. The event will be registered at the parent level, but executes on the selector.
$("#div").delegate("p",'click',callback);
appframework object
Iterates through all elements and applys a callback function
$().each(function(){console.log(this.value)});
an appframework object
Sets the innerHTML of all elements to an empty string
$().empty();
an appframework object
Rolls back the appframework elements when filters were applied This can be used after .not(), .filter(), .children(), .parent()
$().filter(".panel").end(); //This will return the collection BEFORE filter is applied
returns the previous appframework object before filter was applied
Reduce the set of elements based off index
$().eq(index)
appframework object
custom events since people want to do $().error instead of $().bind("error")
Filters elements based off the selector
$("#foo").filter('.bar'); //Selector
$("#foo").filter($('.bar')); //Objects
$("#foo").filter($('.bar').get(0)); //Single element
Returns an appframework object after the filter was run
Searches through the collection and reduces them to elements that match the selector
$("#foo").find('.bar');
$("#foo").find($('.bar'));
$("#foo").find($('.bar').get(0));
an appframework object filtered
custom events since people want to do $().focus instead of $().bind("focus")
Returns the raw DOM element.
$().get(0); //returns the first element
$().get(2);// returns the third element
Array<HTMLElement>
raw DOM element
HTMLElement
Checks to see if an element has a class.
$().hasClass('foo');
$().hasClass('foo',element);
boolean
returns the height of the element, including padding on IE
$().height();
string
height
Sets the elements display property to "none". This will also store the old property into an attribute for hide
$().hide();
an appframework object
Gets or sets the innerHTML for the collection. If used as a get, the first elements innerHTML is returned
$("#foo").html(); //gets the first elements html
$("#foo").html('new html');//sets the html
$("#foo").html('new html',false); //Do not do memory management cleanup
string
an appframework object
Returns the index of the selected element in the collection
$().index(elem)
number
integer - index of selected element
number
number
Inserts collection after the target (adjacent)
$().insertAfter(af("#target"));
Inserts collection before the target (adjacent)
$().insertBefore(af("#target"));
Returns boolean if the object is a type of the selector
$().is(selector)
param {String|Object} selector to act upon
number
boolean
custom events since people want to do $().keydown instead of $().bind("keydown")
custom events since people want to do $().keypress instead of $().bind("keypress")
custom events since people want to do $().keyup instead of $().bind("keyup")
custom events since people want to do $().load instead of $().bind("load")
This is a wrapper to $.map on the selected elements
$().map(function(){this.value+=ind});
an appframework object
Basically the reverse of filter. Return all elements that do NOT match the selector
$("#foo").not('.bar'); //Selector
$("#foo").not($('.bar')); //Objects
$("#foo").not($('.bar').get(0)); //Single element
Returns an appframework object after the filter was run
Removes event listeners for .on() If selector is undefined or a function, we call unbind, otherwise it's undelegate
$().off("click","p",callback); //Remove callback function for click events
$().off("click","p") //Remove all click events
appframework object
Returns the offset of the element, including traversing up the tree
$().offset();
{ left: number; top: number; right: number; bottom: number; width: number; height: number; }
with left, top, width and height properties
Similar to delegate, but the function parameter order is easier to understand. If selector is undefined or a function, we just call .bind, otherwise we use .delegate
$("#div").on("click","p",callback);
appframework object
Binds an event to each element in the collection that will only execute once. When it executes, we remove the event listener then right away so it no longer happens
$().one('click',function(){console.log('I was clicked once');});
appframework object
Returns the parent nodes of the elements based off the selector
$("#foo").parent('.bar');
$("#foo").parent($('.bar'));
$("#foo").parent($('.bar').get(0));
appframework object with unique parents
Returns the parents of the elements based off the selector (traversing up until html document)
$("#foo").parents('.bar');
$("#foo").parents($('.bar'));
$("#foo").parents($('.bar').get(0));
appframework object with unique parents
Prepends to the elements This simply calls append and sets insert to true
$().prepend("<div></div>");//Creates the object from the string and appends it
$().prepend($("#foo")); //Prepends an object
appframework object
Prepends the current collection to the selector
$().prependTo("#foo"); //Prepend an object;
Gets or sets a property on an element If used as a getter, we return the first elements value. If nothing is in the collection, we return undefined
$().prop("foo"); //Gets the first elements 'foo' property
$().prop("foo","bar");//Sets the elements 'foo' property to 'bar'
$().prop("foo",{bar:'bar'}) //Adds the object to an internal cache
any
If used as a getter, return the property value. If a setter, return an appframework object
number
This is executed when DOMContentLoaded happens, or after if you've registered for it.
$(document).ready(function(){console.log('I'm ready');});
an appframework object
Removes elements based off a selector ``` $().remove(); //Remove all $().remove(".foo");//Remove off a string selector var element=$("#foo").get(0); $().remove(element); //Remove by an element $().remove($(".foo")); //Remove by a collection
```
appframework object
Removes an attribute on the elements
$().removeAttr("foo");
appframework object
Removes a css class from elements.
$().removeClass("foo"); //single class
$().removeClass("foo selected");//remove multiple classess
appframework object
Removes a property on the elements
$().removeProp("foo");
appframework object
Replaces a css class on elements.
$().replaceClass("on", "off");
appframework object
custom events since people want to do $().resize instead of $().bind("resize")
custom events since people want to do $().select instead of $().bind("select")
Serailizes a form into a query string
$().serialize();
string
Shows all the elements by setting the css display property We look to see if we were retaining an old style (like table-cell) and restore that, otherwise we set it to block
$().show();
an appframework object
Returns the siblings of the element based off the selector
$("#foo").siblings('.bar'); //Selector
$("#foo").siblings($('.bar')); //Objects
$("#foo").siblings($('.bar').get(0)); //Single element
appframework object with unique siblings
Returns the number of elements in the collection
$().size();
number
custom events since people want to do $().submit instead of $().bind("submit")
Gets or sets the innerText for the collection. If used as a get, the first elements innerText is returned
$("#foo").text(); //gets the first elements text;
$("#foo").text('new text'); //sets the text
string
an appframework object
Toggle the visibility of a div
$().toggle();
$().toggle(true); //force showing
an appframework object
Adds or removes a css class to elements.
$().toggleClass("selected");
appframework object
This triggers an event to be dispatched. Usefull for emulating events, etc.
$().trigger("click",{foo:'bar'});//Trigger the click event and pass in data
appframework object
Unbinds an event to each element in the collection. If a callback is passed in, we remove just that one, otherwise we remove all callbacks for those events
$().unbind('click'); //Unbinds all click events
$().unbind('click',myFunc); //Unbinds myFunc
appframework object
Unbinds events that were registered through delegate. It acts upon the selector and event. If a callback is specified, it will remove that one, otherwise it removes all of them.
$("#div").undelegate("p",'click',callback);//Undelegates callback for the click event
$("#div").undelegate("p",'click');//Undelegates all click events
appframework object
Gets or sets an elements value If used as a getter, we return the first elements value. If nothing is in the collection, we return undefined
$().value; //Gets the first elements value;
$().value="bar"; //Sets all elements value to bar
string
A string as a getter, appframework object as a setter
Performs a css vendor specific transform:translate operation on the collection.
$("#main").cssTranslate('200px,0,0');
an appframework object
returns the width of the element, including padding on IE
$().width();
string
width