Beginning ASP.NET 4.5 in CSharp and VB Opsylum

404 x CHAPTER 11 JQUERY
MODIFYING THE DOM WITH JQUERY
Once you have a matched set, you want to do something with it. For example, you may want to apply
a CSS class or style to the items in it. Or you may want to append some behavior to them, like
adding a click handler that fires some code when the items get clicked. You’ve already seen some
examples of this using the css and bind methods, but jQuery has a lot more to offer. In the next two
sections, you see how to work with the various CSS methods and learn how to set up event handlers.
CSS Methods
CSS is supported in jQuery in a few different ways. First, there’s the css method that enables you to
retrieve a specific CSS value (like the color of an item), and to set one or more CSS properties on a set of
elements. Secondly, methods like addClass, removeClass, toggleClass, and hasClass enable you to
alter or inspect the CSS classes that are applied to elements. Furthermore, a couple of methods enable
you to work with the dimensions and position of an element. I discuss only the most common ones, but
you can look up the entire list at the jQuery website. The examples once again use the same HTML
fragment you saw before, so it’s easy to follow along if you want to try them out in your browser.
css(name, value)
This method enables you to set a specific CSS property on a matched element. The name argument
refers to a CSS property (such as border, color, and so on) and the value defines the style you
want to apply. The following example changes the background color of the h1 element:
css(name)
$('h1').css('background-color', 'green');
This method retrieves a specific CSS value based on the property you pass to it. The following example
alerts 'italic' because that’s the font-style of the element in the heading level 2:
alert($('h2 span').css('font-style'));
You can use this value in your jQuery scripts; for example, you can use it to toggle the font-style
between italic and normal or to set multiple elements to the same style.
css(properties)
This is quite a powerful method because it enables you to set multiple properties on the matched
elements in one fell swoop. The following example changes the color of all cells in the table to red,
changes the font to Verdana and sets their padding to 10px. You pass the data in what is called an
anonymous object where you wrap the entire set of properties in a pair of curly braces ({}), separate
each property and value by a colon (:) and each pair by a comma:
$('#DemoTable td').css({'color' : 'red', 'font-family' : 'Verdana',
'padding' : '10px'});
addClass, removeClass, and toggleClass
The addClass and removeClass methods enable you to add and remove classes from elements,
respectively. Just as with plain CSS, you’re better off using these methods than assigning inline CSS