1
00:00:00,320 --> 00:00:03,740
The attribute method is handy for
checking for, adding, or

2
00:00:03,740 --> 00:00:06,540
changing an element's attributes.

3
00:00:06,540 --> 00:00:10,180
Just like the text and HTML methods we
learned about in the first part of this

4
00:00:10,180 --> 00:00:15,670
course, attribute changing methods
act as both getters and setters.

5
00:00:15,670 --> 00:00:19,533
The attribute method gets the value
of an element's attribute, or

6
00:00:19,533 --> 00:00:22,052
sets the value of an element's attribute.

7
00:00:22,052 --> 00:00:24,891
Remember that an attribute
is basically any

8
00:00:24,891 --> 00:00:28,656
piece of additional information
included on an HTML tag.

9
00:00:28,656 --> 00:00:33,391
So an image's source is an attribute,
as is its alt text, class and

10
00:00:33,391 --> 00:00:35,978
ID names are attributes, and so on.

11
00:00:35,978 --> 00:00:38,957
Go ahead and
open the work space with this video,

12
00:00:38,957 --> 00:00:43,896
let's use the attribute method to add an
attribute to all of the secure links, so

13
00:00:43,896 --> 00:00:47,694
that they open up in a new tab or
window when they're clicked.

14
00:00:51,119 --> 00:00:55,893
Anchor elements with the target attribute
set to blank tell the browser to

15
00:00:55,893 --> 00:00:58,203
open the link in a new tab or window,

16
00:00:58,203 --> 00:01:02,529
to do this we'll first call
the attribute method on secureLinks.

17
00:01:07,359 --> 00:01:11,346
To use the attribute method,
you pass in two arguments,

18
00:01:11,346 --> 00:01:15,498
the first is the attribute that
you want to get or change, so

19
00:01:15,498 --> 00:01:20,500
the source, the alt, or in our case
it's an attribute called target.

20
00:01:20,500 --> 00:01:24,765
The second argument sets
the value of the attribute,

21
00:01:24,765 --> 00:01:27,511
you do that by passing it a string,

22
00:01:27,511 --> 00:01:32,657
we'll pass it the string _blank,
let's save, and preview.

23
00:01:34,363 --> 00:01:37,385
When we inspect one of the list items,

24
00:01:37,385 --> 00:01:42,484
we see now that it has a target
attribute with the value of blank,

25
00:01:42,484 --> 00:01:47,220
and when we click on the link
it opens in a new tab, awesome.

26
00:01:48,570 --> 00:01:52,955
I do want to mention here that in many
cases you would just add attributes like

27
00:01:52,955 --> 00:01:55,778
these when you're writing
your HTML like this.

28
00:02:04,613 --> 00:02:09,484
A reason we might want to have jQuery add
an attribute in a real life scenario is,

29
00:02:09,484 --> 00:02:13,338
say we're working on an existing
website and our client says,

30
00:02:13,338 --> 00:02:19,120
my site has 25, or 50, or 100 links and
I want them all to open in a new tab.

31
00:02:19,120 --> 00:02:20,050
Rather than finding and

32
00:02:20,050 --> 00:02:24,000
changing each link manually, you could
write some jQuery to help you out.

33
00:02:24,000 --> 00:02:27,100
Another reason might be,
if we wanted to change an attribute

34
00:02:27,100 --> 00:02:31,710
based on a certain condition,
like removing the disabled attribute

35
00:02:31,710 --> 00:02:36,190
from a submit button once a user is
completely finished filling out a form.

36
00:02:36,190 --> 00:02:41,270
Another case might be if we were using
jQuery to create new elements dynamically,

37
00:02:41,270 --> 00:02:45,400
like the spoiler buttons we created in
the previous section of this course, and

38
00:02:45,400 --> 00:02:49,930
then we wanted to add certain attributes
to them after we created them.

39
00:02:49,930 --> 00:02:52,830
I'm going to delete this target blank for
now and

40
00:02:52,830 --> 00:02:56,240
let's move on to modify
the PDF links in this list.

41
00:02:57,630 --> 00:03:01,680
Anchor tags can have
an attribute tag named download,

42
00:03:01,680 --> 00:03:07,630
if I click on this PDF at the moment,
you can see that it opens in the browser.

43
00:03:07,630 --> 00:03:11,070
The download attribute triggers
the download of the PDF,

44
00:03:11,070 --> 00:03:14,110
rather than navigating to
the PDF within the browser.

45
00:03:14,110 --> 00:03:18,650
A quick note here, some older browsers
don't support the download attribute, and

46
00:03:18,650 --> 00:03:19,990
if you're using Firefox,

47
00:03:19,990 --> 00:03:24,620
the download attribute won't trigger if
the PDF points to an external website.

48
00:03:24,620 --> 00:03:25,820
Why don't you pause the video,

49
00:03:25,820 --> 00:03:30,530
and see if you can add the download
attribute to PDF links on your own?

50
00:03:30,530 --> 00:03:35,056
Write some jQuery to get the download
attribute, and set it to true,

51
00:03:35,056 --> 00:03:38,112
then unpause, and
I'll show you a solution.

52
00:03:38,112 --> 00:03:42,112
What I'm going to do is
use this pds variable and

53
00:03:42,112 --> 00:03:44,916
call the attribute method on it.

54
00:03:47,029 --> 00:03:52,393
Then I'll pass in download and true.

55
00:03:55,945 --> 00:04:02,510
Now I can save,
go back to my PDF link, And

56
00:04:02,510 --> 00:04:05,700
the file downloads instead
of opening in the browser.

57
00:04:05,700 --> 00:04:08,740
It's worth mentioning here that
the download property is a bit tricky,

58
00:04:08,740 --> 00:04:14,300
because it doesn't actually need a value,
it can be added to an HTML element

59
00:04:14,300 --> 00:04:20,210
without a value like this.

60
00:04:20,210 --> 00:04:24,550
So for it and properties like it,
any value passed as a second argument to

61
00:04:24,550 --> 00:04:28,580
the attribute method will trigger
the appropriate behavior,

62
00:04:28,580 --> 00:04:32,260
because all the browser requires is for
the attribute to be present.

63
00:04:33,260 --> 00:04:36,950
We'll see the attribute method
again later on in this course, for

64
00:04:36,950 --> 00:04:41,390
now let's look at how to add secure and
locked flags to our URLs,

65
00:04:41,390 --> 00:04:45,500
by using jQuery to dynamically
add CSS classes to an element.