1
00:00:09,130 --> 00:00:16,240
Hey, everybody, continuing with Jay Quarrie in this lesson, we are going to learn its syntax, so

2
00:00:16,240 --> 00:00:20,930
almost everything we do with Jan is going to start with a dollar sign.

3
00:00:21,310 --> 00:00:31,840
So the basic syntax of January is the dollar sign, then a selecter dot and action, open and close

4
00:00:31,840 --> 00:00:32,810
parentheses.

5
00:00:33,070 --> 00:00:35,710
So let's look at this with more detail.

6
00:00:35,740 --> 00:00:38,650
So first, let's talk about The Selecter.

7
00:00:38,890 --> 00:00:46,430
So to select elements using J query, we use pretty much the same selectors we use with success.

8
00:00:46,750 --> 00:00:51,190
So if you want to select all elements, we have a class of example.

9
00:00:51,490 --> 00:00:53,110
You can just do it like this.

10
00:00:53,140 --> 00:00:56,440
So dot example, same thing as success.

11
00:00:57,160 --> 00:01:01,390
If you want to select all P elements, you can just use B.

12
00:01:01,390 --> 00:01:08,350
If you want to select an element with the idea of Hamberger icon, you can use the hashtag.

13
00:01:08,350 --> 00:01:16,480
So just like to do it with success and the actions mentioned above are query methods.

14
00:01:16,780 --> 00:01:24,850
So let's start learning a few of these methods and in this first example, we are going to hide all

15
00:01:24,850 --> 00:01:25,990
these elements.

16
00:01:26,230 --> 00:01:28,270
So let's go to the inspector.

17
00:01:29,670 --> 00:01:35,470
And see what they have in common, so they all have this class of example.

18
00:01:35,610 --> 00:01:39,530
We also have this button with an idea of height.

19
00:01:39,540 --> 00:01:45,420
So when we click this button, we are going to hide all elements of a class of example.

20
00:01:45,630 --> 00:01:50,540
So let's go to Visual Studio Code to see how can we do this with Jake Querrey.

21
00:01:50,910 --> 00:01:56,350
So let's remember that in the previous lesson, we made the link to Jay Quarrie.

22
00:01:56,580 --> 00:02:02,450
So now we have it loaded in our page so we can start using its methods.

23
00:02:02,790 --> 00:02:05,960
So let's start with a dollar sign.

24
00:02:05,970 --> 00:02:11,760
As I have mentioned, pretty much everything we do with Jake, where he is going to start with a dollar

25
00:02:11,760 --> 00:02:12,300
sign.

26
00:02:12,720 --> 00:02:16,350
So how do we select elements with Jay Querrey?

27
00:02:16,710 --> 00:02:25,020
Well, the first thing we want to do is selecting that button with an idea of height so we can do it

28
00:02:25,020 --> 00:02:25,660
like this.

29
00:02:25,680 --> 00:02:34,230
So using the same selector as we would do in success and now to set the unclick event, it's a bit different

30
00:02:34,230 --> 00:02:36,480
in January than in JavaScript.

31
00:02:36,660 --> 00:02:40,890
So in JavaScript, the name of this event is on unclick.

32
00:02:41,250 --> 00:02:45,390
But in January, the name of the event is Just Click.

33
00:02:45,660 --> 00:02:51,400
We are going to talk about events with more details in the next lessons.

34
00:02:51,420 --> 00:02:57,090
So the name of the event is Just Click and the way we do it is also a bit different.

35
00:02:57,120 --> 00:03:02,760
So in JavaScript we would use the equals sign and then create a function.

36
00:03:03,030 --> 00:03:05,700
But with J query, this is a bit different.

37
00:03:06,300 --> 00:03:12,930
The click is actually a method, so we should just open and close parentheses like this.

38
00:03:14,920 --> 00:03:23,740
And inside this method, we need to pass the function that we want to be executed when this click event

39
00:03:23,740 --> 00:03:24,690
is detected.

40
00:03:25,000 --> 00:03:29,140
So the way we do it, it's just creating a function inside here.

41
00:03:29,140 --> 00:03:30,370
So function.

42
00:03:31,440 --> 00:03:37,380
Open and close parentheses, open and close, curly braces.

43
00:03:38,300 --> 00:03:45,830
And then let's press enter so we can get started here, so every time you see Jake where we code, you

44
00:03:45,830 --> 00:03:52,660
will see that normally it ends with this curly braces, parentheses and semicolon.

45
00:03:52,670 --> 00:03:58,550
So it may be a bit complicated, but if we do it like we just did so.

46
00:03:59,720 --> 00:04:06,500
Like this, then it's not complicated anymore because we can see that the function is actually an argument

47
00:04:06,830 --> 00:04:09,080
inside this claque method.

48
00:04:09,470 --> 00:04:16,490
So this is the argument of the function and then we just break line so we can write the code for this

49
00:04:16,490 --> 00:04:17,720
function inside.

50
00:04:17,990 --> 00:04:24,920
So this is what's going to happen every time it detects the click event in this button.

51
00:04:24,950 --> 00:04:27,170
So what do we want to do?

52
00:04:27,380 --> 00:04:31,050
We just want to hide all elements with a class of example.

53
00:04:31,340 --> 00:04:33,800
So this is pretty simple to do with J queries.

54
00:04:33,800 --> 00:04:35,720
So, again, dollar sign.

55
00:04:36,830 --> 00:04:44,150
Open and close parentheses to select all elements of that class, we just use the CSF selector.

56
00:04:44,150 --> 00:04:54,860
So that example and again, this is a bit different in JavaScript, we would use the style property.

57
00:04:55,130 --> 00:04:59,240
But with Jay Query, the name of the property is access.

58
00:04:59,420 --> 00:05:01,870
And then this is also a method.

59
00:05:02,030 --> 00:05:06,110
So the way this method works is the following.

60
00:05:06,110 --> 00:05:08,630
We are going to pass two arguments.

61
00:05:08,960 --> 00:05:13,340
The first argument is going to be the name of the property.

62
00:05:13,760 --> 00:05:16,990
So the name of the property is the display.

63
00:05:17,450 --> 00:05:20,140
And the second argument is the value.

64
00:05:20,480 --> 00:05:22,900
So the value is going to be none.

65
00:05:23,210 --> 00:05:27,250
So by doing this, it is just going to set display none.

66
00:05:27,410 --> 00:05:28,940
Let's see if this is working.

67
00:05:28,940 --> 00:05:30,110
Let's save this.

68
00:05:32,250 --> 00:05:39,790
Refresh the page, so now when we click hide, we can see that all those elements are now gone.

69
00:05:40,140 --> 00:05:45,180
So in this example, we can see that with Jake where we can simplify things.

70
00:05:45,420 --> 00:05:52,740
Of course, in the beginning, it's a bit more complicated because the syntax is a bit different than

71
00:05:52,740 --> 00:05:55,290
what we are used to in JavaScript.

72
00:05:55,290 --> 00:05:59,680
But we are using way less lines of code to do this.

73
00:05:59,700 --> 00:06:05,490
Let's remember that to do this in JavaScript, we would need to start a loop and this was going to be

74
00:06:05,490 --> 00:06:07,190
much more complicated.

75
00:06:07,890 --> 00:06:14,940
So with J query, this is way easier to do, but actually we can even simplify it a bit more.

76
00:06:15,120 --> 00:06:17,010
And this is because J.

77
00:06:17,010 --> 00:06:27,120
Querrey already has a hyd method, so we don't even need to set C SAS display non because J Query has

78
00:06:27,120 --> 00:06:32,640
a hyd method that is going to do exactly the same thing.

79
00:06:32,880 --> 00:06:40,800
So going back to our code instead of setting success display none, we can just call the hide method

80
00:06:41,010 --> 00:06:44,190
that is going to do exactly the same thing.

81
00:06:44,670 --> 00:06:45,780
So let's save this.

82
00:06:47,360 --> 00:06:54,920
Let's refresh the page and try it again so as you can see, we have the same result with just this very

83
00:06:54,920 --> 00:06:56,360
short code.

84
00:06:56,490 --> 00:07:04,010
If you want to learn more ways of selecting elements of jury, I've just included this table where you

85
00:07:04,010 --> 00:07:07,080
can see a few more ways of selecting elements.

86
00:07:07,460 --> 00:07:14,930
So if you want to be more specific, like instead of selecting all elements of a class of example,

87
00:07:15,050 --> 00:07:20,160
if you just want to select all div elements with that class, you can do like this.

88
00:07:20,180 --> 00:07:23,120
So this is pretty much what we do in class.

89
00:07:23,690 --> 00:07:24,890
So same thing.

90
00:07:24,890 --> 00:07:32,440
If you want to select the first ALLAI element inside every UL element, this is how you do it.

91
00:07:32,810 --> 00:07:41,720
So if you use a space, this means that the elai here is the child of the UL and then we're just using

92
00:07:41,720 --> 00:07:45,380
this pseudo first child class.

93
00:07:45,590 --> 00:07:48,730
So here we have a few more interesting examples.

94
00:07:48,740 --> 00:07:56,300
So if we want to do something with just the even elements or the odd elements, so let's say we have

95
00:07:56,300 --> 00:08:03,080
this table, let's inspect the stable just to check it out, we have these table roles, which are the

96
00:08:03,080 --> 00:08:04,730
TR element.

97
00:08:05,060 --> 00:08:13,730
If we want to do something just with the even one so zero two four six, we could select it like this

98
00:08:13,730 --> 00:08:14,390
with J.

99
00:08:14,390 --> 00:08:15,020
Quarrie.

100
00:08:15,050 --> 00:08:18,880
We could also do the same thing with the odd roles.

101
00:08:19,130 --> 00:08:22,730
So again, this is just CSF selecter.

102
00:08:22,730 --> 00:08:27,650
So pretty much everything you can do with CSS says you can also do with J.

103
00:08:27,650 --> 00:08:29,670
Quarrie to select elements.

104
00:08:30,170 --> 00:08:32,120
So this was all I wanted to show you.

105
00:08:32,120 --> 00:08:37,040
For now, we are going to have more opportunities to practice using J.

106
00:08:37,040 --> 00:08:39,710
Quarrie to do a lot of cool stuff.

107
00:08:39,740 --> 00:08:45,470
Now, just one last note that I wanted to leave here before we finish this lesson.

108
00:08:45,710 --> 00:08:48,590
Being a bit confused at this point is normal.

109
00:08:48,740 --> 00:08:55,730
So we've been working with pure JavaScript or vanilla JavaScript in the past few lessons.

110
00:08:55,760 --> 00:08:59,090
We've done many exercises and examples.

111
00:08:59,090 --> 00:09:05,960
We've done a project using JavaScript and now we're just changing the way we write code.

112
00:09:06,140 --> 00:09:08,450
So I know it can be a bit confusing.

113
00:09:08,840 --> 00:09:12,590
Like, let's see these examples here in JavaScript.

114
00:09:12,590 --> 00:09:20,120
If we want to set the unclick event, we just do unclick equals and then the function.

115
00:09:20,270 --> 00:09:26,720
And with Jake, where it's a bit different, the name of the event is not unclick but click and the

116
00:09:26,720 --> 00:09:29,960
function goes inside the parentheses.

117
00:09:30,080 --> 00:09:36,290
And the same thing for changing the success with JavaScript, with just use the element that style,

118
00:09:36,290 --> 00:09:40,610
that property and then the value after the equal sign.

119
00:09:40,910 --> 00:09:44,960
But with J queried the name of the method is success.

120
00:09:45,170 --> 00:09:50,480
And inside it we passed two arguments, one for the property and one for the valley.

121
00:09:50,690 --> 00:09:52,250
So this is slightly different.

122
00:09:52,430 --> 00:10:00,020
I know it can be a bit confusing, but don't worry too much because in a short period of time, Junqueira

123
00:10:00,040 --> 00:10:03,140
Syntex is going to become natural to you.

124
00:10:03,560 --> 00:10:09,670
From this moment on, we are going to use much more Junqueira than pure JavaScript.

125
00:10:09,980 --> 00:10:17,420
So while Giguere syntax does not become natural to you, don't forget that Google is always there for

126
00:10:17,420 --> 00:10:19,540
us any time we have any doubts.

127
00:10:19,820 --> 00:10:27,260
So if you are unsure about how to use the UNCLICK event in January, you can just go to Google and type

128
00:10:27,680 --> 00:10:28,700
J query.

129
00:10:29,740 --> 00:10:36,380
On Click event, and then you can just click in the first search result, or even better.

130
00:10:36,400 --> 00:10:41,150
We have a result for W three schools, which we are familiar with.

131
00:10:41,170 --> 00:10:43,200
We know the explanations are great.

132
00:10:43,480 --> 00:10:46,450
So as you can see, this is right here.

133
00:10:47,020 --> 00:10:48,450
There's no need to worry.

134
00:10:48,460 --> 00:10:54,280
You can just copy this, paste it in your code and use the click event.

135
00:10:55,550 --> 00:11:01,550
So that was all I wanted to say for now, in the next video, we are going to start learning how to

136
00:11:01,550 --> 00:11:04,140
do dumb manipulation with Jake.

137
00:11:04,820 --> 00:11:05,660
I'll see you then.