jQuery Tutorial - 17 - A selector example with CSS Video Lecture | Importance of jQuery in Website Development - IT & Software

hi this is Alex from PHP academy' dog
with a video tutorial for the new boston
now we've already looked at quite a few
selectors in jQuery but now we're going
to take a look at an example using CSS
and the CSS manipulator
now the CSS manipulator is essentially
something that will change a value of a
particular element by feeding it the
element the the style name if you like
and then the value so let's go ahead and
take a look at a quick example let's go
ahead and create a paragraph and we are
not going to give this an ID because
we're going to be selecting it by the
fact it is a paragraph and let's just
type some text inside of here
okay so we've already includes the
included selectors yes and we have that
open in our text editor now what we want
to do is we want to go ahead and create
a button just up here and I'm going to
go ahead and and I'm not going to give
this a and ID because we're going to
reference it by the fact is a button I'm
going to give the value click so over in
our browser you'll see that we have a
click and then we have some text now
we're going to use some jQuery selectors
to first of all select the fact this
button has been clicked and then we're
going to highlight this text here by
giving it a background color in CSS okay
so over to selectors is we want to first
of all use the button selector so I'm
going to use the button selector here
and when that button is clicked or when
any button on the page is clicked we
want to carry out a function inside of
here so we're using this event handler
to perform a particular function so we
have the button selector we have the
click event handler and then we have a
function inside here inside this block
of code which will just bring down
slightly we are going to change the
color of the background of this
paragraph okay so now what we need to do
is we need to reference this the well
every paragraph on a page so we're going
to use the
P selector here which will select them
every paragraph on a page at the moment
because this is just an example if you
had more paragraphs on a page it would
highlight every single paragraph so
please be aware that I'm just selecting
all paragraph elements on the page now
we're then going to use the CSS
manipulator to change all of the
properties of the P the first parameter
we give it is the style name so this is
background color or the reference to the
style and then we give it a value so I'm
going to give this a value of yellow
what we could also actually do is change
this to black for example and then we
could use CSS again to then change the
color of the text to white so you can
use hex codes in here so for example you
could use hash 0 0 0 and for this you
could use hash FFF so what now what's
now going to happen is when we press a
button on a page the paragraphs are
going to turn with the background color
black and the foreground color white so
let's go and test this out when we click
here you can see that the background
color of this paragraph has been changed
to black and the text color has been
changed to white