All language subtitles for 181 Manipulating Attributes with jQuery.en_US

Now in the last lesson we looked at how we can use jQuery to manipulate text in our web page.

But in this lesson we're going to look at how we can also use it to manipulate attributes.

Now attributes are things such as, for example, if you had an image then it would have a source, right?

So, for example, drum.png.

And if you had a anchor tag, then that might be the href, right?

https://www.google.com.

So if we wanted to be able to get and set these attributes on the fly using Javascript and jQuery,

then we have a really simple method that we can tap into.

So we can select our image and we can use attr for the attribute method.

Then inside the parentheses, we're going to give the name of the attribute that we want.

So, for example, for our image that will be the src or the source.

And now I can console.log this result.

And if I hit save and go to our web site and refresh, you'll see that we failed to load our resource

because in our project we currently don't actually have an image.

But if we wanted to diagnose this then we could have simply used .attr to get our source printed

out, and we can see that it's a file called drum.png which we clearly do not have

in the current project folder.

Now in addition to getting the value of the attribute you could also set the value of the attribute.

So for example, let's select our anchor tag this time, and we're going to use the attr method, attribute method,

again, and this time we're going to get the value of the href attribute,

but we're also going to set it,

so that's the second input of this method.

If there is a second input then we're going to set it to that,

and if there isn't one then we're going to get the value of the attribute.

So let's say that we've decided that we want to look after the under dogs and we're going to direct

people towards yahoo.com instead of Google.

I'm not sure if anybody uses Yahoo anymore but let's give that a go .

So this code will select all of the anchor tags on our web site and change the href attribute to

yahoo.com,

whereas previously it was google.com, and I’ll give that anchor tag a value of Search.

So now if we hit refresh and we click on our anchor tag then it should take us to Yahoo,

whereas without this line of code then it'll take us to the original destination which was

google.com.

Now remember that a class is also an HTML attribute.

So that means that if we had our h1. Let’s just apply those awful styles again, big-title and margin-50.

So class = big-title and margin-50.

Then if we refresh our web site and go into our console and we select our h1 to get its class attribute,

then you can see that it'll print out all of the classes that are currently applied to the h1.