Handling Data

JQuery Handling Data

The following are the JQuery library functions to handle data for your DOM elements.

1. Basic
2. Copy
3. Replace
4. Inserting data inside an element

Add Class: .$(selector).addClass(class)

The .addClass() method is used to add or insert a CSS class to a specified element.

Has Class: $(selector).hasClass(class)

The .hasClass() method is used to check the existence of a specified css class in the selected element.

Remove Class: $(selector).removeClass(classname)

The .removeClass() method is used to remove CSS class from the selected element.

Clone: $(selector).clone(includeEvents)

The .clone() method is used to make duplicate copies of the selected elements.

Replaceall: $(content).replaceAll(selector)

The .replaceAll() method is used to replace the selected elements with the specified content.

Replacewith: $(content).replaceAll(selector)

The .replaceWith() method is used to replace the selected elements with the specified content.

Append: .append()

The .append() method allows to insert or append content to the end of the specified element.

Append To: .appendTo()

The .appendTo() is more or less similar to “append” function which allows to insert or append content to the end of the specified element.

Prepend: .prepend()

The .prepend() method allows to insert or append content at the beginning of the specified element.

Prepend To: .prependTo()

The .prependTo() is more or less similar to “prepend” function which allows to insert or append content to the beginning of the specified element.

HTML: .html()

The .html() method allows to insert html style to the matched element. You can change the HTML style of the text in a particular element.

Text: .text()

The .text() method allows to insert text to the matched element. You can combine the text of elements or even replace the text in a particular element.

Following are the properties of the inserting data around an element:

Wrap .wrap()

The wrap() method is used to wrap a specified HTML element around each of the selected element.

Unwrap: .unwrap()

The unwrap() method is contrary to the wrap method and removes the parent element which is around the selected element.

Wrapall: .wrapAll()

The wrapAll() method is used to wrap all the specified HTML elements into a single wrapper element.

Wrapinner: .wrapInner()

The wrapinner method is used to wrap the specified elements of HTML around the content of each element that is selected.

After: .after()

The .after() method allows to insert or append content after the specified element.

Before: .before()

The .before() method allows to insert or append content before the specified element.

Insert After: .insertAfter()

The .insertAfter() is more or less similar to “after” which performs the same task of allowing to insert the content after the specified element.

Insert Before: .insertBefore()

The .insertBefore() is more or less similar to “before” which performs the same task task of allowing to insert the content before the specified element.

CSS: .css()

The CSS style property is used to return the property value of an element. The .css() allows to change the style property of an element.

Height: .height()

The height style property is used to return the height of a particular element.

Inner Height: .innerHeight()

The innerHeight style property is used to return the height of a particular element with padding value.

Outer Height: .outerHeight()

The outerHeight style property can be used to return the height of a particular element with padding, border and margin values.

Width: .width()

The width() style property is used to get the width of an element.

Inner Width: .innerWidth()

The innerWidth style property is used to return the width of an element with padding value.

Outer Width: .outerWidth()

The outerWidth style property is used to return the width of a particular element with padding, border and margin.

Offset: .offset()

The offset style property is used to return the left and top position value of a particular element in pixels.

Position: .position()

The .position style property is used to find out the position of the current element in the document.

Scroll top: .scrolltop()

The scrolltop() style property is used to get the vertical position of the scrollbar in an element.

Scroll left: scrollleft()

The scrollleft() style property is used to get the horizontal position of the scrollbar in an element.