jQuery Tutorial - 55 - addClass Video Lecture | Importance of jQuery in Website Development - IT & Software

hi this is Alex from PHP academy' de org
and this is a video tutorial for the new
Boston in this tutorial we're going to
look at adding classes to elements with
JA jQuery sorry classes as you might
know it for example in style dot CSS
we've included this in our index dot PHP
page just up here so we have a style
sheet applied to the page a class would
be something like docked bold and then
you could create inside of this
font-weight:bold so bold is now a class
and we can apply this to particular
elements for example if we were to come
down and create a paragraph here and
type some text and in here we could say
class equals bold now when we refresh
our page the text is automatically bold
so in HTML we can use the class
attribute to apply classes to a
particular element however in jQuery we
can also do this using add class so
let's go ahead and keep this paragraph
and just type this is some text I'm
going to give an ID to this paragraph so
that's just going to be some text and
we're going to create a button which
will actually apply the a particular
class to this paragraph so we're going
to apply a class to this some text
paragraph so let's go ahead and create
another paragraph up here with an input
button inside this is going to be a
button sorry the value we could say
apply
class and we're also gonna give the this
button an ID so we can check for when it
has been pressed so I'm just gonna call
this button so when we press this button
let's just preview it in our browser we
want to apply the bold class to this
text here so let's go ahead and create
an external javascript file that will
allow us to do this so I'm going to
create a file inside of j/s folder and
I'm gonna call this class J s because
the next few tutorials will also be on
classes so we're gonna be using this
same class file okay so now we are
inside class J s we can actually apply
this bold class to this paragraph here
to make the text bold so the first thing
we want to do is listen out for a button
click so the button is called button we
reference this with a hash we say dot
click this is a this is the click event
handler and then inside we create a
function we bring that down and we can
start writing our code in there okay so
now that we've done that we can use the
add class functionality to actually add
this class found in style dot CSS to our
paragraph so our paragraph is called
some text so we can go ahead and
reference that as some text then we want
to say dot add class remember the
capital C and then in brackets the name
of the class so the name of our class in
this case is bold you won't need the
dart so you just need bold ok so when we
press the button will apply the class
bold to this some text paragraph and
once we've checked out in the browser
I'm going to go ahead and tell you why
you might actually need to do this so
when we click apply class nothing
happens
ok that's because we haven't actually
included this class dot J's file in our
page so let's go ahead and type that out
now script type source
and end the script and the type is text
forward slash JavaScript and the source
is je s forward slash class dot J ass
okay so let's go back to our browser and
preview this press the button and that
clap that particular class is applied to
this text okay so why might you need to
do this well let's just say you are
validating a form and you had a
particular element for example a and
input text box or just you know some
text next to it or a label you might
want to apply a class through validation
for example when we click on the submit
button or register button whatever your
form is doing we might want to make the
text bold for fields that have perhaps
an error so instead of replacing the
text itself and making everything look
messy we can just simply apply a
predefined class to an element on our
page so form validation is one way this
can be used however there are obviously
a variety of ways that you can use the
add class functionality