Okay, welcome back. Let's talk about selectors.
So a selector is largely what jQuery is built around.
And the reason for that is because when you're working with JavaScript,
you're usually working with your document object model,
which is all of your HTML in here.
And the way that it's structured,
that's your document object model in a nutshell.
And so we can have an H1 in here,
and this could be our custom title.
And let's just set up an example here.
We can have a button in here,
and this is, this is a custom button.
Let's go ahead and select Paragraph.
And let's go ahead and put some lorem in there.
Let's change from a Django templates to a standard HTML template.
So if I type Lorem, hit tab,
I get lorem ipsum p. Hit tab,
I get a paragraph, Lorem hit tab I get another lorem ipsum paragraph.
And let's just add some unique things in here.
So we've got a paragraph and let's go ahead and make sure
the paragraph and the button and all I did there was I
selected one area and then on a Mac,
I hit Command click.
On Windows, it's likely to be altered or control-click.
So I can type in two places at once.
Class, custom, class.
And so let's go ahead and work with some of these selectors now.
And I'll just make that a touch smaller here so we can see it all on one screen.
So let's go ahead and select R one and change this.
And actually in fact, before we do that,
this is what our page looks like.
We've got two paragraphs and I'll make this a little smaller there.
We've got a title, We've had a button that does absolutely nothing,
and we've got two paragraphs.
This paragraph in this button share a class name
and the H1 and the paragraph are by themselves.
In fact, let's do one extra one.
I'm just going to throw this in here.
This wasn't planned, but let's throw it in here anyways,
let's add an ID to this paragraph.
It's called Customer ID.
And select, let's select each of these.
Let's select our H1.
So we could say selector.
And maybe I will make that bigger selector.
One dot text changed via jQuery.
Now that's only going to select this one H1,
but if there's multiple, each one's is going to change them both. So let's do this.
Our custom title one, our custom title to.
Let's go ahead and refresh our page.
And it says, you can actually see that
it flickers there when I refresh over and over and over again.
And when I view the source code here,
we see our custom title one,
our custom title too.
And we change them both to change via jQuery with a single line of code.
How nice is that?
So we selected all the H 1s on the page and we change it to change via jQuery.
Now in regular JavaScript and vanilla JavaScript,
we have to loop through all of those and change them one-by-one.
Jquery does that automatically for us.
And let's go ahead and select all of our paragraph so we can do
dollar sign, parentheses, paragraph, dot
Html instead of text.
And let's do a bold tag in here.
This is bolded and replaced.
And so we know what this is going to do.
We just saw this example is an H1 is going to select this paragraph and this paragraph,
he doesn't care about the class name
or the idea at the moment, we're not selecting those.
We're just going to select both paragraphs.
And let's go ahead.
And when we refresh our page,
you can see that it flickers again quickly.
If I refresh fast enough and over and over and over again.
And it says, this is bolded and replace it selected both of them.
Now what's nice is you can select multiple things.
So let's say we didn't want to do that.
We wanted to select all the H 1s and all the paragraphs,
but we did not want to select our button.
And we wanted to change the inner texts you changed via jQuery.
Let's go ahead and execute this.
So it's going to select this one,
this one, this one, and this one.
And it's going to change that text to change via jQuery.
Let's just make sure that it's working at say, number two.
And it selected all of them.
And all we did, there was another regular CSS selector,
we said h one comma p.
So select the H1, also select all paragraphs.
Now because this is still JavaScript under the hood,
we can select a paragraph that's like a paragraph by
its customer ID and not ID its class.
Let's do dot custom class.
And where I'm getting that from is rate here,
dot custom class and dot custom class.
But this time I'm selecting just a paragraph with dot custom class on it.
I'm not selecting the button yet.
If i wanted to select both of them,
I would get rid of the p. But I want just p with a custom class.
And then I can say dot text changed again.
And let's add a number three here.
And when I go back to my browser here and
refresh what this is actually doing, believe it or not,
is it selecting this, this, this,
and this and changing it to change view jQuery number two, which we see here.
And then because again,
it's JavaScript under the hood,
it's going to execute one line at a time.
So it executes that line,
then it's going to execute this line,
and it selects our paragraph and changes it to change view jQuery number two.
But then it also select P dot custom class.
That's this one, and overwrites it a second time.
Now we can select by an ID as well.
So let's go ahead and select an ID and we don't need to use P custom ID,
although we could, if we wanted to,
we don't actually need that element selector.
And there we could just use ID. Same with our class.
But because an idea as opposed to be completely unique in your page or on your page,
there should never ever be more than one customer ID.
Where's there can be more than one class name of the exact same name.
There should only ever be one customer ID or one particular id per element.
And so we can select this without having to select or specify a paragraph.
Because our browser knows that if we're following the rules,
there's only ever going to be one customer ID in here.
And we can say this dot text changed again,
and let's do a number four in there.
And so this is what the code currently looks like.
So it's going to select all over h 1s and our paragraphs.
Change it to the one that ends in number to select
the paragraph with a custom class change out to the one that ends in number three.
And then select just happens to be a paragraph which is already selected up here.
But we're going to select the customer ID, which is the paragraph.
And we're going to change this one to change it again, number four.
And when we refresh our page,
changed again number four.
And so now our pages are immediately more interactive.
We can overwrite whatever HTML has been given.
So if someone gives you a boring HTML page and you want to change a bunch of stuff,
but you're not allowed to touch the HTML, which actually happens.
Sometimes you can use JavaScript and jQuery to change it.
Now, I'm not gonna talk too much more about selectors at this point
just because it really is just a CSS selector and that's more of a CSS thing.
Lin, It is a JavaScript or jQuery thing.
So whenever you want to select something very specific,
you could select your body.
You can select some element,
maybe a paragraph, and then you can select all strong tags inside of it.
This is just regular CSS selector.
So you're selecting your body, selecting all paragraphs inside the body,
selecting all strong elements inside of a paragraph.
And then we would be changing it.
We don't have that example setup,
but if you'd like to, that would be a,
a fun little thing to set up for your project or not your project,
but your homework for this particular lesson is to create a very specific selector,
do dot text, and then change the text on it.
Go ahead and give that a shot.
When we are done, we are going to look at changing some HTML on the page dynamically.