- jQuery-Specific Selectors 8:22
- Working with jQuery-Specific Selectors 1 objective
- Changing Element Properties 4:46
- Changing Element Styles and Classes 3:20
- Adding/Removing Classes 2 objectives
- Stopping the Browser's Default Behavior 8:11
- Looping through a jQuery collection 6:15
- The .each() method 1 objective
- Conclusion 3:19
- Working with jQuery Collections Review 5 questions
Preview
Video Player
00:00
00:00
Changing Element Properties
4:46Get 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