Changing Element Properties4:46 with Treasure Porth
Get and set HTML attributes with the attr() method.
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 up