Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
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 so, that's an overview of how to manipulate classes using jQuery and some reasons why you might want to do it.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.