DOM Manipulation

Adding and removing classes

As we've already seen, jQuery leans on CSS syntax for quite a bit of functionality. Keeping with this theme, jQuery also makes it very easy to manipulate the classes an element is currently using. In fact, you'll notice most libraries that use jQuery to manipulate the UI will also come with a stylesheet that defines the set of classes their code will use to enable the functionality.

Adding a class

Adding a class to an element is just as easy as calling addClass.

currentElement.addClass('class-name');

Removing a class

Removing a class from an element is just as easy as calling removeClass. If the element in question was not already decorated with the class you're trying to remove, the method will simply return.

currentElement.removeClass('class-name');

Working with attributes

As we've discussed, HTML allows you to both work with existing attributes, as well as add your own attributes as needed. This allows you to decorate elements with various flags and notes that you can use to enable the functionality you desire.

Retrieving an attribute value

To retrieve an attribute value, simply use the attr method with one parameter, the name of the attribute you wish to retrieve.

alert($('selector').attr('attribute-name'));

Modifying an attribute value

To update an attribute value, use the attr method with two parameters, the first being the name of the attribute and the second the new value you wish to use.

$('selector').attr('attribute-name', 'new value');

Modifying contents

Beyond just working with classes and attributes, jQuery allows you to modify the content of an element as welll.

Updating text and HTML

jQuery offers you the ability to update the text inside of an element by using the text method, and the HTML inside of an element by using the html method. Both methods will replace all of the content of an element.

The main difference between the two methods is html will update (and parse) the HTML that's passed into the method, while text will be text only. If you pass markup into the text method, it will be HTML encoded, meaning all tags will be converted into the appropriate syntax to just display text, rather than markup. In other words, < will become &lt; and just display as < in the browser. By using text when you're only expecting text, you can mitigate cross-site scripting attacks.

Examples

// update the text
$(item).text('Hello, world!!');

// update the HTML
$(item).html('

Hello, world!!

');

Basic event handlers

Earlier we saw how to register an event handler for document.ready. jQuery allows you to access almost any other event that is raised via the JavaScript DOM, as well as several others. While a deeper discussion of event handlers will begin in Module 2, let's take a look at a few to get us one step closer to creating real applications using jQuery.

Registering event handlers

To register an event handler, you will call the jQuery method that matches the event handler you're looking for. For example, if you wanted the click event, you'd use the click method. Methods for wiring up event handlers allow you to pass either an existing function, or create an anonymous method. Most developers prefer to use an anonymous method, as it makes it easier to keep the namespace clean and not have to name another item.

Inside of the event handler code, you can access the object that raised the event by using this. One important note about this is it is not a jQuery object but rather a DOM object; you can convert it by using the jQuery constructor as we've seen before: $(this).

Examples

// click event
// raised when the item is clicked
$(item).click(function() {
    alert('clicked!!');
});

// hover event
// raised when the user moves their mouse over the item
$(item).hover(function() {
    alert('hover!!');
});

// mouseout
// raised when the user moves their mouse away from an item
$(item).mouseout(function() {
    alert('mouse out');
});