Search within TutorialsPark

Jquery DOM Manipulation Reference


Learn to use jQuery events that are triggered by Form Event


jQuery Events: Form Events

jQuery has a set of methods to use and handle Form related events.

Table : Predefined Methods

Methods Description
.attr(key) To get the attribute named key.
.attr(key, value) To set the attribute named key to value.
.attr(key, fn) To set the attribute named key to the result of fn.
.attr(obj) To set the attribute values given as key-value pairs.
.removeAttr(key) To remove the attribute named key
.prop(key) To get the property named key
.prop(key, value) To set the property named key to value.
.prop(key, fn) To set the property named key to the result of fn
.prop(obj) To set property values given as key-value pairs.
.removeProp(key) To removes the property named key.
.addClass(class) To adds the given class to each matched element.
.removeClass(class) To remove the given class from each matched element.
.toggleClass(class) To remove the given class if present, and adds it if not; for each matched element
.hasClass(class) To return true of any of the matched element has the given class.
.val() To get the value attribute of the first matched element.
.val(value) To set the value attribute of each element to value.

Table : Content Manipulation Methods

Method Description
.html() To get the HTML content of the first matched element.
.html(value) To set the HTML content of each matched element to value.
.text() To get the textual content of each matched element.
.text(value) To set the textual content of each matched element to value.

Table : CSS Manipulation

Manipulation Method Description
.css(key) To get the CSS attribute named key.
.css(key, value) To set the CSS attribute named key to value.
.css(obj) To set CSS attribute values given as key-value pairs.

Table : Dimensions Methods

Methods Description
.offset() To get the top and left pixel co-ordination of the first matched element, relative to the viewport.
.position() To get the top and left pixel co-ordinates of the first matched element, relative to the element returned by .offsetParent().
.scrollTop() To get the vertical scroll position of all matched element to value.
.scrollTop(value) To set the vertical scroll position of all matched elements to values.
.scrollLeft() To get the horizontal scroll position of the first matched element
.scrollLeft(value) To set the horizontal scroll position of all matched element to value.
.height() To get the height of the first matched element
.height(value) To set the height of all matched element to value
.width() To get the width of the first matched element
.width(value) To set the width of all matched element to value
.innerHeight() To get the height of the first matched element including padding, but not border.
.innerWidth() To get the width of the first matched element including padding, but not border.
.outerHeight(includeMargin) To get the height of the first matched element, including padding, border and optional margin.
.outerWidth(includeMargin) To get the width of the first matched element, including padding, border , and optional margin

Table : Insertion Methods

Methods Description
.append(content) To insert content at the end of the interior of each matched element
.appendTo(selector) To insert the matched element at the end of the interior of the element matched by selector.
.prepend(content) To insert content at the beginning of the interior of each matched element.
.prependTo(selector) To insert the matched element at the beginning of the interior of the element matched by selector.
.after(content) To insert content after each matched element
.insertAfter(selector) To insert the matched element after each of the element matched by selector.
.before(content) To insert content before each matched element
.insertBefore(selector) To insert the matched element before each of the element matched by selector
.wrap(content) To wrap each of the matched element within content
.wrapAll(content) To wrap all of the matche elements as a single unit within content
.wrapInner(content) To wrap the interior contents of each of the matched element within content.

Table : Replacement Methods

Methods Description
.replaceWith(content) To replace the matched element with content
.replaceAll(selector) To replace the elements matched by selector with the matched element

Table : Removal Methods

Methods Description
.empty() To removes the child nodes of each matched element
.remove([selector]) To remove the matched nodes{optionally filtered by selector} form the DOM
.detach([selector]) To remove the matched nodes(optionally filtered by selector) from the DOM, preserving jQuery data attached to them.
.unwrap() To removes the element's parent

Table : Data Methods

Methods Description
.data(key) To get the data item named key associated with the first matched element
.data(key, value) To set the data item named key associated with each matched element to value
.removeData(key) To remove the data item named key associated with each matched element.

Table : Copying Methods

Methods Description
.clone([withHandlers], [deepWithHandlers]) To make a copy of all matched element optionally also copying event handlers