Hey, everybody, continuing with Jay Quarrie in this lesson, we are going to learn its syntax, so
almost everything we do with Jan is going to start with a dollar sign.
So the basic syntax of January is the dollar sign, then a selecter dot and action, open and close
parentheses.
So let's look at this with more detail.
So first, let's talk about The Selecter.
So to select elements using J query, we use pretty much the same selectors we use with success.
So if you want to select all elements, we have a class of example.
You can just do it like this.
So dot example, same thing as success.
If you want to select all P elements, you can just use B.
If you want to select an element with the idea of Hamberger icon, you can use the hashtag.
So just like to do it with success and the actions mentioned above are query methods.
So let's start learning a few of these methods and in this first example, we are going to hide all
these elements.
So let's go to the inspector.
And see what they have in common, so they all have this class of example.
We also have this button with an idea of height.
So when we click this button, we are going to hide all elements of a class of example.
So let's go to Visual Studio Code to see how can we do this with Jake Querrey.
So let's remember that in the previous lesson, we made the link to Jay Quarrie.
So now we have it loaded in our page so we can start using its methods.
So let's start with a dollar sign.
As I have mentioned, pretty much everything we do with Jake, where he is going to start with a dollar
sign.
So how do we select elements with Jay Querrey?
Well, the first thing we want to do is selecting that button with an idea of height so we can do it
like this.
So using the same selector as we would do in success and now to set the unclick event, it's a bit different
in January than in JavaScript.
So in JavaScript, the name of this event is on unclick.
But in January, the name of the event is Just Click.
We are going to talk about events with more details in the next lessons.
So the name of the event is Just Click and the way we do it is also a bit different.
So in JavaScript we would use the equals sign and then create a function.
But with J query, this is a bit different.
The click is actually a method, so we should just open and close parentheses like this.
And inside this method, we need to pass the function that we want to be executed when this click event
is detected.
So the way we do it, it's just creating a function inside here.
So function.
Open and close parentheses, open and close, curly braces.
And then let's press enter so we can get started here, so every time you see Jake where we code, you
will see that normally it ends with this curly braces, parentheses and semicolon.
So it may be a bit complicated, but if we do it like we just did so.
Like this, then it's not complicated anymore because we can see that the function is actually an argument
inside this claque method.
So this is the argument of the function and then we just break line so we can write the code for this
function inside.
So this is what's going to happen every time it detects the click event in this button.
So what do we want to do?
We just want to hide all elements with a class of example.
So this is pretty simple to do with J queries.
So, again, dollar sign.
Open and close parentheses to select all elements of that class, we just use the CSF selector.
So that example and again, this is a bit different in JavaScript, we would use the style property.
But with Jay Query, the name of the property is access.
And then this is also a method.
So the way this method works is the following.
We are going to pass two arguments.
The first argument is going to be the name of the property.
So the name of the property is the display.
And the second argument is the value.
So the value is going to be none.
So by doing this, it is just going to set display none.
Let's see if this is working.
Let's save this.
Refresh the page, so now when we click hide, we can see that all those elements are now gone.
So in this example, we can see that with Jake where we can simplify things.
Of course, in the beginning, it's a bit more complicated because the syntax is a bit different than
what we are used to in JavaScript.
But we are using way less lines of code to do this.
Let's remember that to do this in JavaScript, we would need to start a loop and this was going to be
much more complicated.
So with J query, this is way easier to do, but actually we can even simplify it a bit more.
And this is because J.
Querrey already has a hyd method, so we don't even need to set C SAS display non because J Query has
a hyd method that is going to do exactly the same thing.
So going back to our code instead of setting success display none, we can just call the hide method
that is going to do exactly the same thing.
So let's save this.
Let's refresh the page and try it again so as you can see, we have the same result with just this very
short code.
If you want to learn more ways of selecting elements of jury, I've just included this table where you
can see a few more ways of selecting elements.
So if you want to be more specific, like instead of selecting all elements of a class of example,
if you just want to select all div elements with that class, you can do like this.
So this is pretty much what we do in class.
So same thing.
If you want to select the first ALLAI element inside every UL element, this is how you do it.
So if you use a space, this means that the elai here is the child of the UL and then we're just using
this pseudo first child class.
So here we have a few more interesting examples.
So if we want to do something with just the even elements or the odd elements, so let's say we have
this table, let's inspect the stable just to check it out, we have these table roles, which are the
TR element.
If we want to do something just with the even one so zero two four six, we could select it like this
with J.
Quarrie.
We could also do the same thing with the odd roles.
So again, this is just CSF selecter.
So pretty much everything you can do with CSS says you can also do with J.
Quarrie to select elements.
So this was all I wanted to show you.
For now, we are going to have more opportunities to practice using J.
Quarrie to do a lot of cool stuff.
Now, just one last note that I wanted to leave here before we finish this lesson.
Being a bit confused at this point is normal.
So we've been working with pure JavaScript or vanilla JavaScript in the past few lessons.
We've done many exercises and examples.
We've done a project using JavaScript and now we're just changing the way we write code.
So I know it can be a bit confusing.
Like, let's see these examples here in JavaScript.
If we want to set the unclick event, we just do unclick equals and then the function.
And with Jake, where it's a bit different, the name of the event is not unclick but click and the
function goes inside the parentheses.
And the same thing for changing the success with JavaScript, with just use the element that style,
that property and then the value after the equal sign.
But with J queried the name of the method is success.
And inside it we passed two arguments, one for the property and one for the valley.
So this is slightly different.
I know it can be a bit confusing, but don't worry too much because in a short period of time, Junqueira
Syntex is going to become natural to you.
From this moment on, we are going to use much more Junqueira than pure JavaScript.
So while Giguere syntax does not become natural to you, don't forget that Google is always there for
us any time we have any doubts.
So if you are unsure about how to use the UNCLICK event in January, you can just go to Google and type
J query.
On Click event, and then you can just click in the first search result, or even better.
We have a result for W three schools, which we are familiar with.
We know the explanations are great.
So as you can see, this is right here.
There's no need to worry.
You can just copy this, paste it in your code and use the click event.
So that was all I wanted to say for now, in the next video, we are going to start learning how to
do dumb manipulation with Jake.
I'll see you then.