1
00:00:00,680 --> 00:00:05,090
With Jake Query we can add class attribute to different elements.

2
00:00:05,090 --> 00:00:11,310
We can select single or multiple elements to apply the class to in this example.

3
00:00:11,330 --> 00:00:18,780
We have a couple of headings in three lines of text by clicking the add class button we trigger an event

4
00:00:19,020 --> 00:00:30,340
that changes all the text to read text line three also increases in size.

5
00:00:30,370 --> 00:00:35,880
Let's take a look at the code to see how it works.

6
00:00:35,900 --> 00:00:43,340
First we can see in our body that we have two heading tags H1 and H2.

7
00:00:43,360 --> 00:00:51,240
We also have a two paragraph tags each containing a line of text the div element contains a third line

8
00:00:51,240 --> 00:00:53,200
of text.

9
00:00:53,200 --> 00:00:55,600
Lastly we have our button element

10
00:00:59,690 --> 00:01:05,290
our style sheet has two classes one named big and the other red

11
00:01:08,130 --> 00:01:16,930
the big class will change the font weight to bold in size to extra large the red class will change the

12
00:01:16,930 --> 00:01:22,100
text color to red neither of these classes have been used yet

13
00:01:25,190 --> 00:01:26,560
in our script tags.

14
00:01:26,660 --> 00:01:34,880
We've created a quick event on the button the Click event triggers our add class method which adds the

15
00:01:34,880 --> 00:01:48,330
class red to any H1 H2 and P elements on the page a second add class method is created to add multiple

16
00:01:48,330 --> 00:01:53,940
classes both big and red to any div elements on the page

17
00:01:57,550 --> 00:01:59,270
and that's how this script works.

18
00:01:59,290 --> 00:02:05,290
So if we refresh the page and just go through it once more when we click the Add class button we can

19
00:02:05,290 --> 00:02:15,880
see all the text color changes to red and text line three becomes bold and font size of extra large.