JQuery_ Novice to Ninja - Earle Castledine [16]
);
The object literal is wrapped in curly braces, with each key separated from its corresponding value by a colon, and each key/value pair separated by a comma. It’s passed as a single parameter to the css function. Using this method you can specify as many key/value pairs as you like—just separate them with commas. It’s a good idea to lay out your key/value pairs in a readable manner so you can easily see what’s going on when you come back to your code later. This is especially helpful if you need to set a larger number of properties. As an example:
chapter_02/09_multiple_properties_3/script.js (excerpt)
$('#celebs tbody tr:even').css({
'background-color': '#dddddd',
'color': '#666666',
'font-size': '11pt',
'line-height': '2.5em'
});
Note: To Quote or Not to Quote
In general, when dealing with JavaScript objects, it’s unnecessary for the keys to be in quotes. However, for jQuery to work properly, any key that contains a hyphen (as our background-color and font-size examples do) must be placed in quotes, or written in camel case (like backgroundColor).
Additionally, any key that’s already a keyword in the JavaScript language (such as float and class) must also be written in quotes.
It can be confusing trying to remember which keys need to be quoted and which don’t, so it’s to be recommended that you just put all object keys in quotes each time.
Classes
Excellent! We’ve already struck two tasks off the client’s list, and we have some funky jQuery happening. But if you stop and have a look at our last solution, you might notice something a little fishy. If you were to inspect the zebra-striped rows in a development tool such as Firebug, you’d notice that the CSS properties have been added to the paragraphs inline, as illustrated in Figure 2.3.
Figure 2.3. Inline styles viewed with Firebug
Tip: Firebug
Firebug is a particularly useful tool for examining the DOM in your browser, as well as monitoring and editing CSS, HTML, and JavaScript (including jQuery). A debugger’s Swiss Army knife for the Web, it will save you hours by helping you see exactly what your browser thinks is going on. It’s available as a Mozilla Firefox extension, or as a stand-alone JavaScript file that you can include in your projects if you develop using another browser.
Inline styles are a big no-no in HTML/CSS best practice, right? That’s quite true, and this also applies in jQuery: to keep your code clear and maintainable, it makes more sense for all the styling information to be in the same place, in your CSS files. Then, as we’ll soon see, you can simply toggle those styles by attaching or removing class attributes to your HTML tags.
There are times when it is a good idea to use the css jQuery method in the way we’ve just seen. The most common application is when quickly debugging code: if you just want to outline an element in red to make sure you’ve selected it correctly, switching to your CSS file to add a new rule seems like a waste of time.
Adding and Removing Classes
If we need to remove the CSS from inline style rules, where should we put it? In a separate style sheet, of course! We can put the styles we want in a rule in our CSS that’s targeted to a given class, and use jQuery to add or remove that class from targeted elements in the HTML. Perhaps unsurprisingly, jQuery provides some handy methods for manipulating the class attributes of DOM elements. We’ll use the most common of these, addClass, to move our zebra stripe styles into the CSS file where they belong.
The addClass function accepts a string containing a class name as a parameter. You can also add multiple classes at the same time by separating the class names with a space, just as you do when writing HTML:
$('div').addClass('class_name');
$('div').addClass('class_name1 class_name2 class_name3');
We only want to add one class name, though, which we’ll call zebra. First, we’ll add the rule to a new CSS file (including it with a link tag in our HTML page):
chapter_02/10_adding_classes/zebra.css
.zebra {
background-color: #dddddd;