Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed jQuery Basics!
You have completed jQuery Basics!
Preview
Get and set HTML attributes with the attr() method.
References
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
The attribute method is handy for
checking for, adding, or
0:00
changing an element's attributes.
0:03
Just like the text and HTML methods we
learned about in the first part of this
0:06
course, attribute changing methods
act as both getters and setters.
0:10
The attribute method gets the value
of an element's attribute, or
0:15
sets the value of an element's attribute.
0:19
Remember that an attribute
is basically any
0:22
piece of additional information
included on an HTML tag.
0:24
So an image's source is an attribute,
as is its alt text, class and
0:28
ID names are attributes, and so on.
0:33
Go ahead and
open the work space with this video,
0:35
let's use the attribute method to add an
attribute to all of the secure links, so
0:38
that they open up in a new tab or
window when they're clicked.
0:43
Anchor elements with the target attribute
set to blank tell the browser to
0:51
open the link in a new tab or window,
0:55
to do this we'll first call
the attribute method on secureLinks.
0:58
To use the attribute method,
you pass in two arguments,
1:07
the first is the attribute that
you want to get or change, so
1:11
the source, the alt, or in our case
it's an attribute called target.
1:15
The second argument sets
the value of the attribute,
1:20
you do that by passing it a string,
1:24
we'll pass it the string _blank,
let's save, and preview.
1:27
When we inspect one of the list items,
1:34
we see now that it has a target
attribute with the value of blank,
1:37
and when we click on the link
it opens in a new tab, awesome.
1:42
I do want to mention here that in many
cases you would just add attributes like
1:48
these when you're writing
your HTML like this.
1:52
A reason we might want to have jQuery add
an attribute in a real life scenario is,
2:04
say we're working on an existing
website and our client says,
2:09
my site has 25, or 50, or 100 links and
I want them all to open in a new tab.
2:13
Rather than finding and
2:19
changing each link manually, you could
write some jQuery to help you out.
2:20
Another reason might be,
if we wanted to change an attribute
2:24
based on a certain condition,
like removing the disabled attribute
2:27
from a submit button once a user is
completely finished filling out a form.
2:31
Another case might be if we were using
jQuery to create new elements dynamically,
2:36
like the spoiler buttons we created in
the previous section of this course, and
2:41
then we wanted to add certain attributes
to them after we created them.
2:45
I'm going to delete this target blank for
now and
2:49
let's move on to modify
the PDF links in this list.
2:52
Anchor tags can have
an attribute tag named download,
2:57
if I click on this PDF at the moment,
you can see that it opens in the browser.
3:01
The download attribute triggers
the download of the PDF,
3:07
rather than navigating to
the PDF within the browser.
3:11
A quick note here, some older browsers
don't support the download attribute, and
3:14
if you're using Firefox,
3:18
the download attribute won't trigger if
the PDF points to an external website.
3:19
Why don't you pause the video,
3:24
and see if you can add the download
attribute to PDF links on your own?
3:25
Write some jQuery to get the download
attribute, and set it to true,
3:30
then unpause, and
I'll show you a solution.
3:35
What I'm going to do is
use this pds variable and
3:38
call the attribute method on it.
3:42
Then I'll pass in download and true.
3:47
Now I can save,
go back to my PDF link, And
3:55
the file downloads instead
of opening in the browser.
4:02
It's worth mentioning here that
the download property is a bit tricky,
4:05
because it doesn't actually need a value,
it can be added to an HTML element
4:08
without a value like this.
4:14
So for it and properties like it,
any value passed as a second argument to
4:20
the attribute method will trigger
the appropriate behavior,
4:24
because all the browser requires is for
the attribute to be present.
4:28
We'll see the attribute method
again later on in this course, for
4:33
now let's look at how to add secure and
locked flags to our URLs,
4:36
by using jQuery to dynamically
add CSS classes to an element.
4:41
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up