Using classes to find what you're looking for

show more Using classes to find what you're looking for provides you with in-depth training on Web. Taught by Joe Chellman as part of the jQuery for Web Designers show less
please wait ...

Using classes to find what you're looking for

And now I want to show you a more sophisticated example of switching classes and making visual changes only in your CSS. So here we are on build a bouquet on Hansel and Petal. And what I want to show you is the selection of these flowers. So we have a lot going on here. Size changes, we seemed to add a check mark but this is all done only in CSS just switching the class using jQuery. So let me show in the web inspector. Just going to inspect this first one. So you can see, here's the selected class on this item, and if I click it, the class goes away.

So I'm toggling this class. And this is all done with CSS the only thing I need JavaScript for and I'm using jQuery for in this case or I should say the person who built this site is using jQuery for is to toggle by class. Now let's take a look at the CSS so I just want you to see this so believe me that we're adding this selected class. And then all these changes are made. So you can see that clearly the ability to switch classes might on its face seem like not a big deal but it allows you a great deal of power. So make use of those J query methods to manipulate those classes and you'll be able to do a lot.

Now let's take a look at ways that jQuery can manipulate classes in your files. So, here I have a series of four boxes rendered with CSS, and one of them is clearly different from the others. This is the one that we're considering selected. And I've done this with a CSS class here that changes the background and the color. And here's my markup, and I move around this class, the selected box changes. So we like to do things this way, despite the fact that jQuery can actually manipulate CSS directly. Because that way you only have one place to look at, that is your CSS to manage your visual changes.

So if I want to change the way that a selected item looks, all I have to do is go to my CSS. It's the same principle that applies when we're avoiding inline styles in our HTML. So, if I want to indicate that something is selected using jQuery, I can select it. So let's go inside the boxes id and then find, a list item which one let's go for the nth child, and now I can use the add class method to add a selected class. Reload and voila the second box is selected now.

jQuery has a complete set of methods for dealing with classes, there's add class, I can also remove a class so as you can see when we first load the page, number 3 starts out selected so let's change that. Instead of selecting the second one, let's get the third one and remove its selected class, using remove class. Reload, and now I've undone this, so my second one looks selected, but my third one does not. There's another method that's really good, especially for situations like this, where we might want to select something and then unselect it, maybe based on whether someone clicks on it, or something like that.

And that is called Toggle Class. So first I'm adding a class to the second one and then I'm removing it from the third. If I don't want to keep track and I just want to do the reverse of whatever is currently true, I can use Toggle Class, reload and now the second one stays selected. Third one started out selected, then I removed it, then I immediately toggle that back on and there's one more thing that I want to mention with respect to classes. As you can see, we have a warning that says that this example uses JavaScript. If you are building that relies on JavaScript, especially if you are going start changing the appearance, or what have you.

I think it's a good idea to add a class somewhere in the document to help it indicate to your CSS that JavaScript is available. And so in this case, jump up here, I've an ID called js-warning, which defaults to showing this warning. But if JavaScript is turned on, via the addition of a js class, it'll go away, because we'll know in that case the JavaScript is available. So, what we can do, is select the body tag and add a class directly to it, we use that js class and save this and reload the page over here. So now I've added context to my CSS so I know when JavaScript is available and I can hide that warning so nobody has to see it.

And so, that's an overview of how to manipulate classes using jQuery and some reasons why you might want to do it.

Using classes to find what you're looking for
Video duration: 3m 52s 1h 42m Intermediate


Using classes to find what you're looking for provides you with in-depth training on Web. Taught by Joe Chellman as part of the jQuery for Web Designers

please wait ...