Already Welcome Back in this video we're going to talk about some of the other common J Querrey methods
that we'll want to use.
So here are the seven methods that I want to discuss and the way that I'm going to do this here is I'll
make an HTML file which already have.
I call that method study Timo.
And then I'll add in my basic age L and I'll just call it J.
Queery methods in the title.
And I'm going to just steal the CD and script that I added from the last exercise just so I don't have
to go through that whole process so I'll just use the Cdn.
And then I'm going to add some HTL here that we're going to work with and I'm going to use this H.T.
mouth to demonstrate how all of these methods work.
And as always I encourage you to follow along.
So the first thing that I'm going to do is add some H to him all in have an H1 and it will just say
J Query methods demo page and then we'll add in a text input and put type equals text and we'll give
it a placeholder that just says your name just like that.
Make this a little bit bigger and then we'll add in a well again with some allies and these allies will
be different types of candy.
So we'll have skittles and starburst and twix.
OK so three types of candies instead of Elyse instead of a single.
Well we'll just start with this and let's open it up in the browser see what we're working with.
All right.
And we'll open up the console to double check that we have.
Jay Querrey So there's a lot of ways we can do that.
We can type Jake where we can do dollar sign and select H-1 and make sure we get the right each one
which we do.
So now we know that J query is correctly added to our page.
All right.
So the first method that I want to talk about is called text.
I'm going to go to the J CT documentation and show you how you can find specific methods.
So what I like to do is just go to the API documentation home page and this actually contains every
single method here.
So we're looking for text.
I would usually do a command f just to search the page for text.
So when to show you how many there are and as you can see there's quite a few.
And we'll get to text down here right here.
TEXT And I'll open that up and what it tells us is that it gets the combined text contents of each element
in the set of matched elements including their descendants.
Or we can use it to set the text content of the matched elements.
Think of it as the J Querrey version of text content.
So the J Querrey docs always have good examples.
You can see here they have some h tim else that up and they're selecting the div with the class of demo
container which is this div and running dot text on it and they say that it could produce this result
here.
So all the text demonstration box list item one list item 2.
It works just like text content in vanilla.
Yes.
So I'll demonstrate that.
Let's zoom in a little bit and we can do something like this on H-1 that text and that just tells us
the text of the H-1 is Jay Querrey methods demo page.
I could do the same thing by selecting the UL
dot text and that gives me all of the text content instead of the UL.
So it strips out all the elements and only gives me the text.
Another thing we could do is try to do it on ally.
So I'm going to select all the allies and remember that will give me a list of three allies and then
I'll run that text on that.
What this will do is give me all of the text for all the allies and it will return one string.
The other thing we can do with text that will make it really useful is we can pass in a value and that
value will actually update what the text is.
So I can do something like H-1 that text and change it to new text with some exclamation points and
hit enter.
And that changes the one that was selected so that it's text content is new text.
So now if I ran one text with no argument it tells me it's now new text.
And what's really cool about a query as we saw with C Ss is we can apply something to a collection and
we don't have to loop through manually.
So if I wanted to get all of the lies text and change it to the string rusty cold's dog is adorable
which is true.
And I hit enter.
This will change all three allys text to be rusty cold's dog is adorable.
So that's definitely really useful.
What we would have to do with vanilla yes is select all three allies loop through with a for loop and
for each one set the text content to be rusty cardstock is adorable.
All right.
So that's the text method.
The next one I want to talk about is HMO so you can probably gather that h tim l works just like inner
aged.
And I'll just do a search on here for HMO.
There it is.
And read it here says that it gets the HMO contents of the first element in the set of matched elements
or set the HMO contents of every matched element.
So let's go back to our code here and I'm going to refresh.
So we reset our code and I'm going to ask for the h m l of this ul.
So I select UL dot aged humo and that will just retrieve the inner h him out of the UL.
So the text method corresponds to the text content property and M L corresponds to inner aged him out
just like before I can actually provide an argument to that HMO and that will update the H.T. malcontent
.
So I'll update the out of the UIL to be a new ally inside of there that says I hacked your UL just like
that and those the to allies.
So I'm going to duplicate this
and paste that back.
And this other ally will say Rusty is still adorable.
So we have one ally two allies instead of a string and we're updating the UL.
Hit enter.
And you can see that it updates the enraged him.
And if we had multiple Juelz on this page it would update both of them.
So for instance if I select both allies with Dollar Sign ally and I change the age mail to be an anchor
tag and just like that anchor tag and we'll have a Tref equals Google dot com and then click me to go
to Google.
We're updating the HD mail content inside of this.
And if I hit enter you can see that it updates both allies to now reflect that new content.
One quick side note.
You might think that we could use text to do the same thing but we actually can't and that's because
text is considered Tomales safe which means that it's not going to treat what you pass it as HMO.
It's going to treat it as text.
So I'll show you what I mean.
If I try and change the text of both ALWIS to be this what will actually do is just give me the text
so it won't treat it like aged him well which is a good thing actually.
If we wanted a user to type something into the text box and when he or she hit Enter we wanted to add
a new ally with whatever I typed here the user could potentially write their own h team out here and
mess up our site or even worse he or she could write some javascript and run that.
So if we're letting our user types something in.
We don't want to just treat it as HVM Well we usually want to treat it as text