jQuery Tutorial - 21 - Attribute selectors Video Lecture | Importance of jQuery in Website Development - IT & Software

hi this is Alex from PHP academy' dorg
with a video tutorial for the new Boston
in this video we're going to be looking
at the attribute selector an attribute
that belongs to a particular element we
can use as a selector and as an example
I've chosen to create a very short but
useful application which will apply
functionality to all email fields now
this is an email field on my page I've
not I've actually got a normal field
here as well just to demonstrate
obviously the difference I've used a
selector to select all email fields or
all input fields that have a type email
because I'm using html5 you can see that
I can use the type email which has some
benefits over over text have some
front-end validation but what we're
doing is we're looking for all fields
with the type email and then we're
applying this functionality and this
functionality is a default message when
we click on it this message disappears
when we navigate away this message comes
back if nothing's been typed this is
something that's found on like the
majority of places you have to enter
your email address it might be a
subscription to a newsletter at the
bottom of your page or something when I
go ahead and type an email address in
and then navigate away from this or tab
away from this we have the value
remaining if we leave this empty we get
this enter your email address back again
so as well as going over this particular
selector which has a wide variety of
matches so you can go ahead and look at
that in the jQuery documentation but
we're going to look at how we can
practically use this on our page
so I'm going to go ahead and open my
text editor with no code at all and
we'll start to write this out okay so
I'm on to my index.php page I'm not
going to waste time writing this out but
essentially all I have got is a name
field here with the input type text an
email with an input type email because
we've just got these little labels on
here and that will produce something
like
on your page so we've got a field here
and a field here I've also given this
email field slightly larger lengths just
so we can see the text inside of it by
default so now that we've done this we
need to go ahead and include this
selectors je s external file and at the
moment there's nothing in that we're not
going to be using style dot CSS so I can
go ahead and get rid of that
so once we've included this we can write
start to write some external JavaScript
inside this selector CAS file and that's
going to be selecting all input fields
with the type email so I'm going to show
you how to do this and then we're going
to go on to look at creating this short
other extremely useful application ok so
the first thing I want to do is wait for
my document to be ready so I'm going to
use document dot ready and inside here
we're going to have a function which
will just bring down and we can start
writing our code in here
now the first thing I want to do is I
want to go ahead and set a variable with
a default message that's going to be
placed inside of this box so we'll do
that before we talk about selectors I'm
just going to call this email default
and that's going to be please or let's
just say enter your email address into
your email address and it's worth
bearing in mind that the way we're doing
this we'll apply it to every email field
that you ever create as long as you have
this selectors jeaious file on your page
so we're selecting you know if you were
to go ahead and include this
functionality on your page as you go and
perhaps create more email fields
elsewhere this functionality will still
remain due to the way that we're
selecting it so now we're going to go
ahead and use our selector to set a
value to this field and we initially
want to set this to the default text
that we've defined inside this variable
so here's the selector part we want to
go ahead and select all input types this
just on its own here we'll actually go
ahead and select all input types anyway
but we want to define which email type
we want so we can say M input type
equals and then in
quotation marks I'm going to say email
so now what we've done with this is
we've successfully selected any input
fields with the type email now it's
worth noting that we could do absolutely
anything we wanted with this and we
could write it out with other elements
as well for example if you had links and
you wanted to select only links that had
a particular a particular href so
particular link you could go ahead and
say a where the href is equal to let's
just say google code at UK I'm not sure
why you'd want to do this but you might
do you never know you might want to turn
the link into an image for example or
something but essentially we can use
this with any really any element I'm not
sure which elements are included and not
or rather which are not but we can go
ahead and use this with anything so
that's the essence of the you know
selector the attribute selector so we
can select any attribute from any
different element that we want obviously
in this tutorial we're looking at all
input fields with the type of email
again if you wanted to you could change
this to all input fields with the type
of text or we'll input fields with the
type of password etc etc etc so in our
case it's email now the first thing that
we want to do is use the attribute
function or whatever you want to call it
to set the value of this to our email
default so this will take two parameters
the first is the value that you want to
change all the attribute that you want
to change and the attribute I want to
change is value and this changes what's
what you can see inside of the box or
inside of the input field and I want to
change this to email default so we've
selected all types or all input types of
email and appended or given this an
attribute value with the email default
so now when we refresh that text goes
straight in there and notice it doesn't
do it for name if we were for example to
leave this as input this will apply to
all input fields on the page you can see
it's been placed into both of them but
we're using this selector for the reason
we only want emails to work