- jQuery-Specific Selectors 8:22
- Working with jQuery-Specific Selectors 1 objective
- Changing Element Properties 4:46
- Changing Element Styles and Classes 3:20
- Adding/Removing Classes 2 objectives
- Stopping the Browser's Default Behavior 8:11
- Looping through a jQuery collection 6:15
- The .each() method 1 objective
- Conclusion 3:19
- Working with jQuery Collections Review 5 questions
Preview
Video Player
00:00
00:00
Changing Element Styles and Classes
3:20Use jQuery methods like css(), addClass() and removeClass() to change the look of DOM elements.
There are two ways to affect the style
of an element on a webpage with jQuery.
0:00
Manipulating the CSS directly, or adding,
or removing the class of an element.
0:04
We've already seen a bit
of the CSS method.
0:09
It works like the other manipulation
methods as a getter and a setter.
0:13
The first parameter this method takes
is a CSS rule you wanna get or change.
0:17
If the second parameter is present,
0:22
the CSS method will set the value of
the CSS rule to whatever you pass in.
0:24
jQuery gives you a few options for adding
or removing classes from an element.
0:29
To add a class to an element, use the
addClass method with the name of the class
0:34
you want to apply to the element.
0:38
The removeClass method does the opposite.
0:40
While the toggle class method
toggles between adding and
0:43
removing the class on an element.
0:46
Let's see this in action
using our list of links.
0:48
In the app.js file,
0:51
we'll apply a background color of
light gray to every odd element.
0:52
We can do this by calling the CSS
method on the odd elements.
0:57
Remember that this odd variable refers
to this jQuery selection we made in
1:01
the previous video,
which selects all the odd elements.
1:06
Then we can pass in the name of the style
property that we want to affect,
1:12
which is background color.
1:16
Notice here, because this will trip you up
at some point, if you were to write this
1:18
rule directly into CSS, you'd write it
with a hyphen, which is called kabob case.
1:23
But when you're using JavaScript, you'll
use camel case, which means to lowercase
1:29
the first word, and
then capitalize each new word after that.
1:34
The second parameter is the value you
want to set or change the property to.
1:39
In our case let's change
it to 'lightgrey'.
1:44
Let's save and preview the file,
1:48
and now you can see that every
other link has a grey background.
1:50
It's worth mentioning here that setting
CSS is normally something you would just
1:55
do in your CSS file.
1:59
You may rarely encounter a good reason
to use jQuery CSS method, however,
2:01
it's still helpful to know that it exists,
and how to use it.
2:06
Next, in app.js,
let's add some classes to our links.
2:08
I'll delete this line because
it was just for demonstration.
2:13
For the secure links let's
add a class of secure.
2:17
This will add a little
tag next to each link.
2:25
I'll show you that in the CSS.
2:28
I have a class called secure.
2:35
Let's save and preview,
and as you can see,
2:40
the Safe flag appears next
to every secure link.
2:43
Now let's add the class
of PDF to the PDF links.
2:47
To do that we'll use our
PDFs variable up here.
2:51
Call addClass, And
2:59
we'll add the class of pdf which
you can see here in our CSS.
3:03
Save and preview.
3:13
And the Locked flag will
appear next to every PDF link
3:16