jQuery Tutorial - 16 - Text selector 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 in this video we're going to be
talking about the text selector in
jQuery now the text selector will select
all input types with the VAT with the
type text so for example input type
equals text if we were to use the text
selector this would be the field that
would be the current element so we've
got this input type of text let's go
over to our browser and refresh and
preview this you can see that we've just
got a text element now if we wanted to
create a global styling system I guess
where every time we were to click onto
an element or a focus in on an element
and then focus back out we created a
background color of yellow for example
or in actual fact we could create a
border or apply any CSS rules to this so
let's go ahead and test this out we're
going to go over to selectors jeaious
which we have included in our page and
inside selectors jas we need to first of
all reference when we click this or when
we click or focus into this particular
element so the element is text and we
use a colon and then text to reference
this so now we can say focus in and we
can create a function inside of here so
we're creating a an event handler for
all type all input fields with the type
text so now when we focus in on
something we can just alert hello to
test this out so when we focus in that's
not worked so I think we need to create
that small eye
okay so now that we've focused in to our
text area we get this message hello yeah
obviously that's going to keep coming up
now because we're constantly focused in
however what we can now do is we can
reference our our text area by using
this and then we can say dot CSS and we
can apply some basic CSS to this so I'm
going to say background color yellow
yellow so now when we focus in on this
the background color should have changed
to yellow ah so let's go ahead sorry
that's er that's my fault though we need
to supply two arguments the first one is
the property itself and then the value
of this property so let's go ahead and
refresh when we click on here we see
that the box turns yellow when we come
away nothing happens because we haven't
set the the focus out to this as well
but for times sake let's just go ahead
and copy and paste this down and then
change that to focus out and change the
background color to white okay so now
when we click in here we get yellow when
we focus away should be on oh sorry it
would be below when we focus in and then
out it should change but it doesn't
let's just try and amend that there
should okay yeah so I forgot the hash
okay so now when we click in so we when
we focus into a text box and we focus
out this now changes the background
color so we have the effect here but now
what happens when we add other elements
such as the text area now text area does
not belong to the type text input field
set so when we click on this we don't
get the same effect so we can set
specific effects to input fields by
using this text selector we could for
example change this to
you I think it would be text area I'm
unsure let's have a look no it's not so
yeah so just as another example let's go
ahead and change this to button and
button and now you'll see that we can't
click when we click on here the
background color doesn't change so we're
specifically selecting this text area
and changing all this text form field
and changing the background color when
we focus in and then removing it and
change back to white when we focus out
so this it's selector is extremely
useful for when you have form fields and
you want to apply styling to all of
these particular fields text fields but
you don't actually want to apply it to
things like the buttons and anything
else like that so obviously we can use
the input selector as well and what the
input selector will do will will change
everything with the value input so it
still works on here it doesn't work on
it well it does work on the text area
okay so now it's also worked on the text
area so just by using input we have any
input fields it applies to all of them
however we can select specific form
fields as well with specific values for
example we can also choose password
we'll be looking at that in another part
of the tutorial