Welcome back.
In this video we're going to pick up where we left off and keep talking about some of these important
methods that I want to showcase the next one we're going to discuss is after eight.
And it's short for attribute so I'm going to go to the docs and just look for attributes.
It's going to be up top here ETR.
There we go.
And what we use it for is to retrieve the value of an attribute.
So according to the docs it gets the value of an attribute for the first element in a set of matched
elements or set one or more attributes for every matched element.
So we can retrieve an attribute or we can set an attribute.
Hopefully you're noticing a pattern by now where with these methods we can either get information retrieve
an attribute or retrieve styling or retrieve the text or enraged him out.
And then we can also set them by passing it an argument to the method.
So one method behaves in two different ways.
And this paradigm is called the getter and setter paradigm where we have a getter to retrieve information
and a setter to set a new value.
Let's take a look at some of the examples here.
The G-code docs always have excellent examples and documentation and tutorial style writing.
So let's take a look here.
We have an image and it has an I.D. a source and an alt text so we can select that so we can select
the image with great photo ID great photo dot H.
And we pass in what we're trying to change which is Alt.
And then we can pass it in a new value and you can also see down here we can use TTR to set multiple
values at once or multiple attributes.
So we can set the text and the title attribute by passing in an object just like the CSSA method.
OK.
So let's play around with this.
Here's our page we've been working with.
I'm going to add in a little bit more of each team I'll content.
So at the bottom here I'm going to add an image tag and the source is going to be my favorite pine martin
.
So adorable.
And what we're going to do is use J query and the TTR method to change that image source to the terrifying
pine martin.
OK.
So Will refresh our page.
Here is our image and what would be a good first exercise is to select the image and make it a little
bit more manageable so smaller.
So we'll select image see us and we can start by just looking at what the width currently is which is
1133 pixels and let's make it a lot smaller.
So we'll change with 2 500 pixels just like that.
OK that looks a lot better.
And actually that's a little smaller and months even to 200.
There we go.
There's our adorable pine martin.
So we'll use TTR to go ahead and change the image source.
So we need to select the image again like that dot 8.
And we can get the value of source first just retrieve it.
This is the image source and then we can also set it by passing in our second argument which is the
URL that I copied and have on my clipboard and there we go.
It updates automatically.
And there's our terrifying pine martin.
So that's one example.
Another thing that we could do here is select this input which is type equals text and we could change
the value of the type attribute.
So we'll do that here input and then let's look at the attribute.
Well let's start by just looking at input.
It's the only one on the page.
And then we'll do that attribute type and we see type is text and now we can play around with it and
change that to be type is colored.
And watch this input here as I hit enter.
It now changes to a color input and we can do the same thing.
Change it this time to be a checkbox.
There we go.
OK.
Let's go back to text because we are going to use this later in the video as a text input.
The last thing that I want to demonstrate is the behavior of the TR method on multiple elements so let's
add in a few image tags.
So we'll do one two three images and I am going to need to refresh to get those.
And there those gigantic images.
So I'm going to resize again and that will be Image dot see SS with Khama 200 acts and because of the
magic of J Query that will make all of them 200 pixels.
OK let's suppose I want to only change the first one here to be the scary pine marten photo with the
teeth.
What I did earlier won't work if I try and just select the image that is actually all images and so
it will change all three of their image sources.
So if I only want the first one I can use image colon and remember there is first of type like that
for the built in J queery first which is shorter but actually slightly slower because it's not using
a built in CSSA selector.
So I'll go back to first of type and then we can change source to be our scary image you know.
And if I hit enter it only impacts that first image.
And if I wanted to update the last image to have the same image source this terrifying pine martin I
have a few options and the first one that I'll show is to select all images like this and then use the
dot last method which is something you haven't seen yet and this will return the last element from a
given selector.
So this selects all three images and then we're asking for the last one and then we can do that ATSDR
source and then we can paste in our image source and hit enter.
And you can see that the last image is changed as well.
And then lastly I'll demonstrate changing all three of them together so I have a new image you are.
I'll copy over here and will change the source attribute on all of them by just selecting all images
like this and then running that attribute source comma and pasting in our New You are all and all three
images change simultaneously.
So to summarize TTR if we just give it one argument like source.
But we don't pass in a second argument.
It will just return the value of source.
So that's the getter.
And then if we provide a second argument like a new you r l like we did here that will actually update
the value of source on every single element that we selected previously.
So the next thing that I want to demonstrate is the Vau method.
So VHDL what Val does is that it helps us extract the value from an input.
So if you can think back to when you made that scorekeeper with plain javascript and we had that number
input and that input you could specify the winning score for playing to 5 or to 10 and we needed to
extract the value out of there.
We use a property called value.
Well Vau is J queries wrapper for value just like each tim.
It's a wrapper for enraged Jamail and text is the wrapper for text content.
You can take a look at a few examples as you can see here.
If we don't pass in any arguments it will return the value of a particular element that we select.
So in this case we are grabbing the dropdown menu at the select element with class of foo and then we're
doing Val on it which will tell us which element or which part of the dropdown is selected and then
we can also use the same syntax but we pass in an argument and that will change the value of an input
.
So let's go to our text input here and I'm going to clear the console and we'll go ahead and select
this text input.
So a dollar sign input just like that and then we'll run Val with no arguments.
And right now it would give us an empty string because the value in here is an empty string.
There's nothing inside there.
So if we type something now like my name and then we ask for the value it tells us cold steel.
So whatever is in here is grabbed when we run up though and then like all the other methods we've seen
it will also act as a setter method.
So if I pass in something like rusty steel and I hit enter I can see that it updates the input to now
say resti still.
You might be wondering when we would actually write code to update an input.
Usually we let a user update the input.
The one common use case that I can think of is if we wanted to clear the value.
So if this was a To Do list and we wanted the user to be able to add new Candie's or something I could
type in jelly beans which are way overrated by the way and we get hit enter and we want to add a new
ally and then we want to delete what's inside of here.
We would use dot.
So I'll show you.
Just looks like this.
And then we're going to set it to an empty string and that erases the content inside of there so we
will be doing that actually when we make our own to do list.
We'll use Vau with an empty string to reset it text and put.
Last thing I'll mention is that Darvell works on all elements that have a value attribute.
So it's not just inputs with type calls text it's things like checkboxes and color for color inputs
but it also includes dropdown menus which I can go ahead and write will make a new dropdown menu which
is a select element and then inside this select we add in options and each option represents one choice
.
So our options will contain some of the most popular pets in the country like ostrich and turtle and
Toad.
OK and we'll save and refresh the page and you can see that we now have a dropdown menu with three choices
and if I want to know which choice the user has selected I could go over here and I don't just select
input any more.
I would need to select either select which will give me that dropdown menu and then I just run Vau on
that and it tells me that the user has selected toad All right.
So to wrap up 80 TR is used to access any specific attribute that we want or to set an attribute and
then fülle is used to retrieve the value or set the value of any sort of input or dropdown menu.
All right