jQuery Tutorial - 54 - attr Video Lecture | Importance of jQuery in Website Development - IT & Software

hi this is Alex from PHP academy' no org
with a video tutorial for the new Boston
in this tutorial we're going to look at
the jQuery at function the way I say
it's a bit odd I guess but it looks like
this
it's short for attribute I guess it's
not really a function it's an attribute
part of jQuery however it is used to
take specific parts of an element
attributes of an element and actually
relay them or store them okay so what
we're going to do is we're going to
create a link and with this link we're
going to retrieve the href and the
target so if we were to go ahead and
just create some paragraph tags I'm
going to create a link inside here
now remember href is an attribute of
this a element and as well target is
also an attribute so we can use jQuery
to return the values of attributes as
they're currently set so in this example
we're looking at taking the attribute
href and target which might seem pretty
pointless but obviously you can make use
with this on any attribute so I'm gonna
create a link just in here and then I'm
going to create a target as well which
will be underscore blank which
essentially means to open in a new
window and then gonna give the link text
as a link so let's go over to our
browser and take a look you can see that
we've just got a link here when we click
on it we'll be taken to the URL we
specified okay so now what I'm gonna do
is just below this create another
paragraph area and I'm going to call
this I'm gonna give this an ID of ATRA
just so we Semmy know what we're doing
we also need to give the ID to href we
could just we could just refer when we
actually take the value as a we don't
need to supply an ID however I'm just
gonna supply an ID so we take it
specifically from this link okay so I'm
gonna just call this link so now that
we've got link we want to take the
attribute href and then later on we're
gonna take the attribute target and
we're gonna place it inside this
paragraph area
here so we need to create an external
javascript file so let's go ahead and
open up a new file we're gonna save this
inside our j/s directory as atrophy is
i'm gonna come over to index dot PHP and
i'm going to come down and include this
file into my page so the type is text
forward slash JavaScript the source is
js4 slash etre j/s okay so now that
we've done that we need to go over to
action is and actually take this H ref
and place it inside this paragraph tag
so let's go ahead and simply reference
our link so link dot atre so we using
the etre attribute in jQuery and we want
to supply what attribute we want to take
from this link so I'm gonna call that H
ref or reference H ref so we take the H
ref so now we need to save this inside
of a value so we can relay it back to
the page so I'm gonna create a variable
and I'm gonna call this atra so now
what's happened is this variable here
contains this value in here so now what
we can simply do is come down to the
next line we can reference the paragraph
which I have called ACTRA and I'm gonna
say dot text etre so I'm replacing this
variable inside are inside this text
function which is going to take take
this value here and actually place it
inside of this paragraph so let's go
over and refresh the page and you'll see
that the link has been displayed from
this link here so we've successfully
taken the attribute we can then go ahead
and perhaps change this to target save
that out refresh our browser
and you can see that we've got blank so
I guess this example could be useful if
you had for example a collection of
links on a page and you wanted to
display the URL next to them I guess
this isn't a good example with the
method or the example I've given in the
tutorial but obviously using atra you
can actually take attribute
of almost any HTML element so we can go
ahead and take attributes of divs
attributes or form fields to get their
value even so there's you know a sort of
an endless supply of ways you could
actually use this however for now that's
the ATRA attribute in jQuery