Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed jQuery Basics!
You have completed jQuery Basics!
Preview
Use jQuery methods like css(), addClass() and removeClass() to change the look of DOM elements.
A list of helpful methods for getting and setting CSS-related properties of elements.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up