Alright, when we're talking about JQuery syntax,
it's a lot like JavaScript syntax.
It is actually, it's just all written in JavaScript is
just a certain way to write our JavaScript.
And so in our last lesson,
we wrote this weird document.ready function things.
So let's break this down a little bit.
So that's where we're going to be putting all of our code in
every lesson moving forward when we're talking about jQuery.
But the syntax here,
the style in which it's written, looks a lot like this.
So we've got a dollar sign with parenthesis,
and this is our selector.
And so if you come from JavaScript,
this is a lot like the document dot query selector method.
The only difference is we don't have to write this anymore.
We can simply write a dot div in here and that's going to select it for us.
And so it's a nice little shortcut.
So in here we have a selector, a selector.
Then we have some sort of function or event or method or,
or something happens with this selector.
And so we see up here, we see ready.
So we've selected document and we're gonna say when it's ready or when we have a button,
we can say onclick or we can do something.
So there's some sort of event that happens here.
And this by itself is just a method or a function.
And then it takes this thing called a callback function.
And most things in jQuery take a callback function.
So it's going to do a thing.
So it's going to select something in your page.
It's going to then execute or,
or register some sort of event.
And then when that's when that event is happening, what do we do?
And this is where we wrap it in a function.
So this is just an anonymous function and this
just makes sure that everything stays scoped in here.
So it's a nice way to make sure that
your variables don't leak out of this particular area.
Now, in our body up here,
let's say we have one dot custom class name
with an ID of custom ID.
And so you can actually see how I wrote that.
If I just undo that,
you can see I wrote one dot custom class name id, customer ID.
And this is exactly like writing CSS.
So if you know CSS already,
this is going to be incredibly easy for you.
This is regular CSS and it just happens to be that
VS Code has this thing called an Emmett abbreviations.
So you can write your CSS and just simply hit
tab and it will create your element for you.
So we can say in here, Hello world.
And now with our selector,
and let's go ahead and create a new example here.
In the last lesson, we did the document.ready function, yada, yada.
We can use semi-colons.
We don't have to use semi-colons, its regular JavaScript.
So regular JavaScript rules still apply.
And we can use a selector in here,
so we can select this one like this.
And we can do a thing here.
And that's going to select this one.
We can also say custom class name,
and that's going to select this AS this H1
along with any other element that has this class name.
Or if we wanted to get something completely unique,
we could do ID, custom ID.
And again, this is just regular CSS.
And so when we're writing CSS,
CSS, this is exactly how we write it anyways.
This is how we create a custom declaration using a CSS selector.
And so in jQuery, we do the exact same thing,
and in modern JavaScript we do the exact same thing.
So we have several different ways.
We could even get really specific and say grab all H 1s with a custom class name.
And let's say text is going to be changed me and we're jumping the gun here a little bit.
And we're going to learn about text down the road.
But I wanted to show you that this is an example.
So what this is going to do is select this element up here.
And then it's going to take that tax and change it from helloworld,
which we know what's going to render hello world in big letters.
And it's going to say changed me or let's change it to This was changed via jQuery.
Let's save that. Refresh our page.
And it says this was changed via jQuery is.
But if I refresh fast enough,
you can see that it flickers.
And so if I right-click and view my source,
let's make that just a wee bit.
We can see that it actually says hello world.
So when the page renders it saying hello world in here.
But once jQuery is loaded,
it changes it to.
This was changed via jQuery.
Now that is pretty much
all the syntax we need to know right now
there's a little bit more when it comes to event listeners,
but we'll tackle that when we get to event listeners so
that I don't overwhelm you with a lot of information at this moment.
But the thing you need to know right now is this and that.
Now what I would like you to do is this exact example.
Go ahead and create an H1, select that one somehow
using either class ID or an element selector.
And then change the text with dot text and put some sort of
new text in their viewed on your page if it changes properly.
While I, you have now written some jQuery,
it is as easy as that.
When you're done, let's head on over to the next lesson.
We'll talk a little bit more about selectors, specifically.