1
00:00:00,000 --> 00:00:03,290
Alright, when we're talking about JQuery syntax,

2
00:00:03,285 --> 00:00:05,105
it's a lot like JavaScript syntax.

3
00:00:05,100 --> 00:00:06,960
It is actually, it's just all written in JavaScript is

4
00:00:06,960 --> 00:00:09,290
just a certain way to write our JavaScript.

5
00:00:09,285 --> 00:00:10,805
And so in our last lesson,

6
00:00:10,800 --> 00:00:14,160
we wrote this weird document.ready function things.

7
00:00:14,160 --> 00:00:16,160
So let's break this down a little bit.

8
00:00:16,155 --> 00:00:19,055
So that's where we're going to be putting all of our code in

9
00:00:19,050 --> 00:00:22,080
every lesson moving forward when we're talking about jQuery.

10
00:00:22,080 --> 00:00:23,700
But the syntax here,

11
00:00:23,700 --> 00:00:26,610
the style in which it's written, looks a lot like this.

12
00:00:26,610 --> 00:00:28,410
So we've got a dollar sign with parenthesis,

13
00:00:28,410 --> 00:00:29,970
and this is our selector.

14
00:00:29,969 --> 00:00:31,789
And so if you come from JavaScript,

15
00:00:31,785 --> 00:00:38,955
this is a lot like the document dot query selector method.

16
00:00:38,950 --> 00:00:42,160
The only difference is we don't have to write this anymore.

17
00:00:42,155 --> 00:00:47,845
We can simply write a dot div in here and that's going to select it for us.

18
00:00:47,840 --> 00:00:49,400
And so it's a nice little shortcut.

19
00:00:49,400 --> 00:00:54,490
So in here we have a selector, a selector.

20
00:00:54,485 --> 00:00:59,065
Then we have some sort of function or event or method or,

21
00:00:59,060 --> 00:01:01,700
or something happens with this selector.

22
00:01:01,700 --> 00:01:03,590
And so we see up here, we see ready.

23
00:01:03,590 --> 00:01:08,750
So we've selected document and we're gonna say when it's ready or when we have a button,

24
00:01:08,750 --> 00:01:12,590
we can say onclick or we can do something.

25
00:01:12,590 --> 00:01:15,770
So there's some sort of event that happens here.

26
00:01:15,770 --> 00:01:21,690
And this by itself is just a method or a function.

27
00:01:21,850 --> 00:01:25,420
And then it takes this thing called a callback function.

28
00:01:25,415 --> 00:01:28,645
And most things in jQuery take a callback function.

29
00:01:28,640 --> 00:01:29,770
So it's going to do a thing.

30
00:01:29,765 --> 00:01:33,565
So it's going to select something in your page.

31
00:01:33,560 --> 00:01:36,280
It's going to then execute or,

32
00:01:36,275 --> 00:01:38,495
or register some sort of event.

33
00:01:38,495 --> 00:01:43,585
And then when that's when that event is happening, what do we do?

34
00:01:43,580 --> 00:01:45,590
And this is where we wrap it in a function.

35
00:01:45,590 --> 00:01:47,660
So this is just an anonymous function and this

36
00:01:47,660 --> 00:01:50,080
just makes sure that everything stays scoped in here.

37
00:01:50,075 --> 00:01:52,195
So it's a nice way to make sure that

38
00:01:52,190 --> 00:01:56,480
your variables don't leak out of this particular area.

39
00:01:56,480 --> 00:01:58,640
Now, in our body up here,

40
00:01:58,640 --> 00:02:06,530
let's say we have one dot custom class name

41
00:02:06,530 --> 00:02:09,280
with an ID of custom ID.

42
00:02:09,275 --> 00:02:12,175
And so you can actually see how I wrote that.

43
00:02:12,170 --> 00:02:13,490
If I just undo that,

44
00:02:13,490 --> 00:02:18,020
you can see I wrote one dot custom class name id, customer ID.

45
00:02:18,020 --> 00:02:20,240
And this is exactly like writing CSS.

46
00:02:20,240 --> 00:02:21,560
So if you know CSS already,

47
00:02:21,560 --> 00:02:23,570
this is going to be incredibly easy for you.

48
00:02:23,570 --> 00:02:26,660
This is regular CSS and it just happens to be that

49
00:02:26,660 --> 00:02:29,930
VS Code has this thing called an Emmett abbreviations.

50
00:02:29,930 --> 00:02:32,000
So you can write your CSS and just simply hit

51
00:02:32,000 --> 00:02:34,580
tab and it will create your element for you.

52
00:02:34,580 --> 00:02:38,630
So we can say in here, Hello world.

53
00:02:38,630 --> 00:02:40,910
And now with our selector,

54
00:02:40,910 --> 00:02:44,510
and let's go ahead and create a new example here.

55
00:02:44,510 --> 00:02:48,880
In the last lesson, we did the document.ready function, yada, yada.

56
00:02:48,875 --> 00:02:49,975
We can use semi-colons.

57
00:02:49,970 --> 00:02:52,250
We don't have to use semi-colons, its regular JavaScript.

58
00:02:52,250 --> 00:02:54,590
So regular JavaScript rules still apply.

59
00:02:54,590 --> 00:02:56,810
And we can use a selector in here,

60
00:02:56,810 --> 00:02:59,080
so we can select this one like this.

61
00:02:59,075 --> 00:03:03,635
And we can do a thing here.

62
00:03:03,635 --> 00:03:06,095
And that's going to select this one.

63
00:03:06,090 --> 00:03:11,130
We can also say custom class name,

64
00:03:11,125 --> 00:03:13,345
and that's going to select this AS this H1

65
00:03:13,345 --> 00:03:16,485
along with any other element that has this class name.

66
00:03:16,480 --> 00:03:19,900
Or if we wanted to get something completely unique,

67
00:03:19,900 --> 00:03:22,270
we could do ID, custom ID.

68
00:03:22,270 --> 00:03:25,010
And again, this is just regular CSS.

69
00:03:25,014 --> 00:03:26,694
And so when we're writing CSS,

70
00:03:26,695 --> 00:03:29,605
CSS, this is exactly how we write it anyways.

71
00:03:29,605 --> 00:03:34,485
This is how we create a custom declaration using a CSS selector.

72
00:03:34,480 --> 00:03:36,640
And so in jQuery, we do the exact same thing,

73
00:03:36,640 --> 00:03:39,070
and in modern JavaScript we do the exact same thing.

74
00:03:39,070 --> 00:03:41,080
So we have several different ways.

75
00:03:41,080 --> 00:03:49,190
We could even get really specific and say grab all H 1s with a custom class name.

76
00:03:49,530 --> 00:03:56,050
And let's say text is going to be changed me and we're jumping the gun here a little bit.

77
00:03:56,050 --> 00:03:57,910
And we're going to learn about text down the road.

78
00:03:57,910 --> 00:03:59,770
But I wanted to show you that this is an example.

79
00:03:59,770 --> 00:04:03,570
So what this is going to do is select this element up here.

80
00:04:03,565 --> 00:04:06,285
And then it's going to take that tax and change it from helloworld,

81
00:04:06,280 --> 00:04:08,770
which we know what's going to render hello world in big letters.

82
00:04:08,770 --> 00:04:16,410
And it's going to say changed me or let's change it to This was changed via jQuery.

83
00:04:16,405 --> 00:04:19,785
Let's save that. Refresh our page.

84
00:04:19,780 --> 00:04:21,970
And it says this was changed via jQuery is.

85
00:04:21,970 --> 00:04:23,430
But if I refresh fast enough,

86
00:04:23,425 --> 00:04:25,245
you can see that it flickers.

87
00:04:25,240 --> 00:04:29,200
And so if I right-click and view my source,

88
00:04:29,200 --> 00:04:31,580
let's make that just a wee bit.

89
00:04:31,575 --> 00:04:33,625
We can see that it actually says hello world.

90
00:04:33,620 --> 00:04:38,570
So when the page renders it saying hello world in here.

91
00:04:38,570 --> 00:04:41,660
But once jQuery is loaded,

92
00:04:41,660 --> 00:04:42,920
it changes it to.

93
00:04:42,920 --> 00:04:46,050
This was changed via jQuery.

94
00:04:46,510 --> 00:04:50,180
Now that is pretty much

95
00:04:50,180 --> 00:04:52,370
all the syntax we need to know right now

96
00:04:52,370 --> 00:04:54,770
there's a little bit more when it comes to event listeners,

97
00:04:54,770 --> 00:04:57,650
but we'll tackle that when we get to event listeners so

98
00:04:57,650 --> 00:05:00,650
that I don't overwhelm you with a lot of information at this moment.

99
00:05:00,650 --> 00:05:05,240
But the thing you need to know right now is this and that.

100
00:05:05,240 --> 00:05:07,960
Now what I would like you to do is this exact example.

101
00:05:07,955 --> 00:05:10,465
Go ahead and create an H1, select that one somehow

102
00:05:10,460 --> 00:05:13,480
using either class ID or an element selector.

103
00:05:13,475 --> 00:05:17,275
And then change the text with dot text and put some sort of

104
00:05:17,270 --> 00:05:21,310
new text in their viewed on your page if it changes properly.

105
00:05:21,305 --> 00:05:23,365
While I, you have now written some jQuery,

106
00:05:23,360 --> 00:05:25,790
it is as easy as that.

107
00:05:25,790 --> 00:05:28,250
When you're done, let's head on over to the next lesson.

108
00:05:28,250 --> 00:05:32,280
We'll talk a little bit more about selectors, specifically.