jQuery methods: addClass()
The jQuery
addClass()
method gives developers a way to change elements in a more global way. As the method name suggests, we can add a class attribute to a selected element. Why would we want to do this?
Let’s take an example of a web page that has some existing elements such as a title, a paragraph, and a button to click that does something. Along with this page is a stylesheet that uses these elements’ class name to style them. Upon clicking the button, existing content can change style, or appearance.
We could use the
addClass()
method to insert a new style attribute for the existing content after the button is clicked, which makes it possible to change the styling of existing content using only a line of code. Doing so allows the developer to think about manipulating elements in a styled fashion.
Find Your Bootcamp Match
- Career Karma matches you with top tech bootcamps
- Access exclusive scholarships and prep courses
By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.
Let’s dive deeper into the example and look at how we might code it.
How jQuery addClass() Works
In our example, we are changing an object’s class attribute when our button is clicked. Before we get into this example code, let’s take a look at how
addClass()
works. Suppose we have this HTML:
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: blue;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
We are using <style> to include some basic styling for our <p> tag in the <head>. We’ve also included our jQuery API link. In the <body>, we have the words “Hello,” “and,” “Goodbye,” wrapped in three separate <p> tags. For us to see how
addClass()
works, let’s refer back to <style>.
There are two classes inside <style>. One is “selected,” which renders an attribute of color to the color blue. The other class is “highlight.” This class renders a background attribute as the color yellow. Right now, we can see none of these styles are rendering:
The styles aren’t rendering because there aren’t any classes associated with our <p> tags. Rather than going into our HTML and manually writing classes to <p>, we can use
addClass()
to insert any or all class attributes on any or all <p> element.
<script>
$(document).ready(() => {
$('p').addClass('selected')
})
</script>
Here, we are simply selecting all <p> elements and adding to them a class attribute of ‘selected.’ We expect all instances of our <p> elements to now render in the color blue.
Just as we expected! The jQuery
addClass()
method is able to accept more than one class attribute as a single argument. For example:
<script>
$(document).ready(() => {
$('p').addClass('selected highlight')
})
</script>
Notice the syntax of including both classes wrapped in one set of parentheses. This renders our <p> elements in both blue and with a background of the color yellow.
Now that we’ve seen how
addClass()
can add class attributes to elements, let’s return to our original example with a button.
Using jQuery addClass()
Here we’ve added a button to our first example:
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: blue;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>
<strong>jQuery addClass Example</strong>
</p>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<button>
Click to add class
</button>
The above code now renders a button, but it doesn’t do anything yet. In the previous example, we changed all of the <p> tags at the same time. Now let’s change only one element when the button is clicked. We could do this by incorporating the jQuery
click()
method.
"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"
Venus, Software Engineer at Rockbot
As a quick review of the
click()
method, we call it on the object selector we want to attach an event listener to. Then we pass
click()
a callback function as an argument. Remember that a callback function is just a function we pass as an argument to execute later. In this example, the callback function will execute once the button is clicked.
Let’s see it in action!
<script>
$('button').click(() => {
$('p').last().addClass('selected')
})
</script>
In the callback function, we are selecting the <p> elements and calling
last()
to find the last instance of <p>. From here, we add the class attribute of ‘selected.’ We expect the last <p> element which refers to the word “Goodbye” to change color to blue once the button is clicked.
Let’s click the button and find out.
Exactly what we expected to see! We’ve seen how jQuery
addClass()
can be used generally through changing all <p> elements to the styled classes as soon as the page loads. We’ve also seen how
addClass()
can be used with other jQuery methods such as
click()
to specifically change the class attributes of one <p> element once the selected button is clicked.
Conclusion
Today, we’ve learned what jQuery
addClass()
is and how it works. We’ve also learned that
addClass()
is extremely flexible in scope and can change multiple class attributes at once. The above examples are meant to be basic illustrations of possible uses for jQuery
addClass()
. To go further, experiment on your own and find ways
addClass()
is useful to your web app.
