Manipulation

Selecting and traversing elements in the DOM is only part of what jQuery offers, one other major part is what is possible with those elements once found. One possibility is to manipulate these elements, by either reading, adding, or changing attributes or styles. Additionally, elements may be altered in the DOM, changing their placement, removing them, adding new elements, and so forth. Overall the options to manipulate elements are fairly vast.

Getting & Setting

The manipulation methods to follow are most commonly used in one of two directives, that being getting or setting information. Getting information revolves around using a selector in addition with a method to determine what piece of information is to be retrieved. Additionally, the same selector and method may also be used to set a piece of information.

// Gets the value of the alt attribute
$('img').attr('alt');
// Sets the value of the alt attribute
$('img').attr('alt', 'Wild kangaroo');

In the examples and snippets to follow methods will primarily be used in a setting mode, however they may also be able to be used in a getting mode as well.

Attribute Manipulation

One part of elements able to be inspected and manipulated are attributes. A few options include the ability to add, remove, or change an attribute or its value. In the examples below the .addClass() method is used to add a class to all even list items, the .removeClass() method is used to remove all classes from any paragraphs, and lastly the .attr() method is used to find the value of the title attribute of any abbr element and set it to Hello World.

$('li:even').addClass('even-item');
$('p').removeClass();
$('abbr').attr('title', 'Hello World');
Attribute Manipulation Methods
.addClass()
.attr()
.hasClass()
.prop()
.removeAttr()
.removeClass()
.removeProp()
.toggleClass()
.val()

Style Manipulation

On top of manipulating attributes, the style of an element may also be manipulated using a variety of methods. When reading or setting the height, width, or position of an element there are a handful of special methods available, and for all other style manipulations the .css() method can handle any CSS alterations.

The .css() method in particular may be used to set one property, or many, and the syntax for each varies. To set one property, the property name and value should each be in quotations and comma separated. To set multiple properties, the properties should be nested inside of curly brackets with the property name in camel case, removing any hyphens where necessary, followed by a colon and then the quoted value. Each of the property and value pairs need to be comma separated.

The height, width, or position methods all default to using pixel values, however other units of measurement may be used. As seen below, to change the unit of measurement identify the value then use a plus sign followed by the quoted unit of measurement.

$('h1 span').css('font-size', 'normal');
$('div').css({
  fontSize: '13px',
  background: '#f60'
});
$('header').height(200);
$('.extend').height(30 + 'em');
Style Manipulation Methods
.css()
.height()
.innerHeight()
.innerWidth()
.offset()
.outerHeight()
.outerWidth()
.position()
.scrollLeft()
.scrollTop()
.width()

comments powered by Disqus