1
00:00:00,000 --> 00:00:04,030
Okay, welcome back. Let's talk about selectors.

2
00:00:04,100 --> 00:00:08,820
So a selector is largely what jQuery is built around.

3
00:00:08,820 --> 00:00:11,780
And the reason for that is because when you're working with JavaScript,

4
00:00:11,775 --> 00:00:14,745
you're usually working with your document object model,

5
00:00:14,745 --> 00:00:17,105
which is all of your HTML in here.

6
00:00:17,100 --> 00:00:18,420
And the way that it's structured,

7
00:00:18,420 --> 00:00:21,000
that's your document object model in a nutshell.

8
00:00:21,000 --> 00:00:22,770
And so we can have an H1 in here,

9
00:00:22,770 --> 00:00:24,930
and this could be our custom title.

10
00:00:24,930 --> 00:00:26,760
And let's just set up an example here.

11
00:00:26,760 --> 00:00:28,410
We can have a button in here,

12
00:00:28,410 --> 00:00:31,530
and this is, this is a custom button.

13
00:00:31,525 --> 00:00:33,925
Let's go ahead and select Paragraph.

14
00:00:33,920 --> 00:00:36,490
And let's go ahead and put some lorem in there.

15
00:00:36,485 --> 00:00:41,035
Let's change from a Django templates to a standard HTML template.

16
00:00:41,030 --> 00:00:43,700
So if I type Lorem, hit tab,

17
00:00:43,700 --> 00:00:46,460
I get lorem ipsum p. Hit tab,

18
00:00:46,460 --> 00:00:51,370
I get a paragraph, Lorem hit tab I get another lorem ipsum paragraph.

19
00:00:51,365 --> 00:00:55,045
And let's just add some unique things in here.

20
00:00:55,040 --> 00:00:59,420
So we've got a paragraph and let's go ahead and make sure

21
00:00:59,420 --> 00:01:01,910
the paragraph and the button and all I did there was I

22
00:01:01,910 --> 00:01:04,660
selected one area and then on a Mac,

23
00:01:04,655 --> 00:01:07,205
I hit Command click.

24
00:01:07,205 --> 00:01:10,705
On Windows, it's likely to be altered or control-click.

25
00:01:10,700 --> 00:01:13,230
So I can type in two places at once.

26
00:01:13,810 --> 00:01:17,080
Class, custom, class.

27
00:01:17,075 --> 00:01:19,975
And so let's go ahead and work with some of these selectors now.

28
00:01:19,970 --> 00:01:24,860
And I'll just make that a touch smaller here so we can see it all on one screen.

29
00:01:24,860 --> 00:01:28,210
So let's go ahead and select R one and change this.

30
00:01:28,205 --> 00:01:30,835
And actually in fact, before we do that,

31
00:01:30,830 --> 00:01:32,720
this is what our page looks like.

32
00:01:32,720 --> 00:01:37,350
We've got two paragraphs and I'll make this a little smaller there.

33
00:01:37,510 --> 00:01:41,240
We've got a title, We've had a button that does absolutely nothing,

34
00:01:41,240 --> 00:01:42,650
and we've got two paragraphs.

35
00:01:42,650 --> 00:01:45,260
This paragraph in this button share a class name

36
00:01:45,260 --> 00:01:48,520
and the H1 and the paragraph are by themselves.

37
00:01:48,515 --> 00:01:50,635
In fact, let's do one extra one.

38
00:01:50,630 --> 00:01:52,400
I'm just going to throw this in here.

39
00:01:52,400 --> 00:01:54,330
This wasn't planned, but let's throw it in here anyways,

40
00:01:54,325 --> 00:01:55,985
let's add an ID to this paragraph.

41
00:01:55,985 --> 00:01:57,835
It's called Customer ID.

42
00:01:57,830 --> 00:02:00,200
And select, let's select each of these.

43
00:02:00,200 --> 00:02:01,870
Let's select our H1.

44
00:02:01,865 --> 00:02:05,415
So we could say selector.

45
00:02:05,419 --> 00:02:08,559
And maybe I will make that bigger selector.

46
00:02:08,555 --> 00:02:16,895
One dot text changed via jQuery.

47
00:02:17,350 --> 00:02:20,780
Now that's only going to select this one H1,

48
00:02:20,780 --> 00:02:24,020
but if there's multiple, each one's is going to change them both. So let's do this.

49
00:02:24,020 --> 00:02:26,800
Our custom title one, our custom title to.

50
00:02:26,795 --> 00:02:28,435
Let's go ahead and refresh our page.

51
00:02:28,430 --> 00:02:30,860
And it says, you can actually see that

52
00:02:30,860 --> 00:02:33,680
it flickers there when I refresh over and over and over again.

53
00:02:33,680 --> 00:02:36,020
And when I view the source code here,

54
00:02:36,020 --> 00:02:37,580
we see our custom title one,

55
00:02:37,580 --> 00:02:38,990
our custom title too.

56
00:02:38,990 --> 00:02:43,730
And we change them both to change via jQuery with a single line of code.

57
00:02:43,730 --> 00:02:45,280
How nice is that?

58
00:02:45,275 --> 00:02:49,115
So we selected all the H 1s on the page and we change it to change via jQuery.

59
00:02:49,115 --> 00:02:52,315
Now in regular JavaScript and vanilla JavaScript,

60
00:02:52,310 --> 00:02:55,690
we have to loop through all of those and change them one-by-one.

61
00:02:55,685 --> 00:02:58,345
Jquery does that automatically for us.

62
00:02:58,340 --> 00:03:01,280
And let's go ahead and select all of our paragraph so we can do

63
00:03:01,280 --> 00:03:06,140
dollar sign, parentheses, paragraph, dot

64
00:03:06,140 --> 00:03:08,230
Html instead of text.

65
00:03:08,225 --> 00:03:10,865
And let's do a bold tag in here.

66
00:03:10,865 --> 00:03:15,005
This is bolded and replaced.

67
00:03:15,460 --> 00:03:18,760
And so we know what this is going to do.

68
00:03:18,755 --> 00:03:22,705
We just saw this example is an H1 is going to select this paragraph and this paragraph,

69
00:03:22,700 --> 00:03:24,560
he doesn't care about the class name

70
00:03:24,560 --> 00:03:26,920
or the idea at the moment, we're not selecting those.

71
00:03:26,915 --> 00:03:29,255
We're just going to select both paragraphs.

72
00:03:29,255 --> 00:03:30,625
And let's go ahead.

73
00:03:30,620 --> 00:03:32,030
And when we refresh our page,

74
00:03:32,030 --> 00:03:34,190
you can see that it flickers again quickly.

75
00:03:34,190 --> 00:03:36,880
If I refresh fast enough and over and over and over again.

76
00:03:36,875 --> 00:03:40,595
And it says, this is bolded and replace it selected both of them.

77
00:03:40,595 --> 00:03:43,265
Now what's nice is you can select multiple things.

78
00:03:43,265 --> 00:03:45,535
So let's say we didn't want to do that.

79
00:03:45,530 --> 00:03:49,960
We wanted to select all the H 1s and all the paragraphs,

80
00:03:49,955 --> 00:03:51,695
but we did not want to select our button.

81
00:03:51,695 --> 00:03:55,015
And we wanted to change the inner texts you changed via jQuery.

82
00:03:55,010 --> 00:03:56,990
Let's go ahead and execute this.

83
00:03:56,990 --> 00:03:58,480
So it's going to select this one,

84
00:03:58,475 --> 00:04:00,685
this one, this one, and this one.

85
00:04:00,680 --> 00:04:03,860
And it's going to change that text to change via jQuery.

86
00:04:03,860 --> 00:04:07,450
Let's just make sure that it's working at say, number two.

87
00:04:07,445 --> 00:04:09,955
And it selected all of them.

88
00:04:09,950 --> 00:04:13,760
And all we did, there was another regular CSS selector,

89
00:04:13,760 --> 00:04:15,380
we said h one comma p.

90
00:04:15,380 --> 00:04:18,710
So select the H1, also select all paragraphs.

91
00:04:18,710 --> 00:04:21,380
Now because this is still JavaScript under the hood,

92
00:04:21,380 --> 00:04:24,400
we can select a paragraph that's like a paragraph by

93
00:04:24,395 --> 00:04:28,165
its customer ID and not ID its class.

94
00:04:28,160 --> 00:04:31,940
Let's do dot custom class.

95
00:04:31,940 --> 00:04:34,550
And where I'm getting that from is rate here,

96
00:04:34,550 --> 00:04:37,190
dot custom class and dot custom class.

97
00:04:37,190 --> 00:04:41,930
But this time I'm selecting just a paragraph with dot custom class on it.

98
00:04:41,930 --> 00:04:44,380
I'm not selecting the button yet.

99
00:04:44,375 --> 00:04:46,505
If i wanted to select both of them,

100
00:04:46,505 --> 00:04:50,305
I would get rid of the p. But I want just p with a custom class.

101
00:04:50,300 --> 00:04:55,400
And then I can say dot text changed again.

102
00:04:55,400 --> 00:04:57,610
And let's add a number three here.

103
00:04:57,605 --> 00:04:59,935
And when I go back to my browser here and

104
00:04:59,930 --> 00:05:03,800
refresh what this is actually doing, believe it or not,

105
00:05:03,800 --> 00:05:06,310
is it selecting this, this, this,

106
00:05:06,305 --> 00:05:10,855
and this and changing it to change view jQuery number two, which we see here.

107
00:05:10,850 --> 00:05:12,740
And then because again,

108
00:05:12,740 --> 00:05:13,940
it's JavaScript under the hood,

109
00:05:13,940 --> 00:05:15,470
it's going to execute one line at a time.

110
00:05:15,470 --> 00:05:17,180
So it executes that line,

111
00:05:17,180 --> 00:05:19,180
then it's going to execute this line,

112
00:05:19,175 --> 00:05:23,825
and it selects our paragraph and changes it to change view jQuery number two.

113
00:05:23,825 --> 00:05:28,705
But then it also select P dot custom class.

114
00:05:28,700 --> 00:05:33,570
That's this one, and overwrites it a second time.

115
00:05:33,610 --> 00:05:36,230
Now we can select by an ID as well.

116
00:05:36,230 --> 00:05:41,980
So let's go ahead and select an ID and we don't need to use P custom ID,

117
00:05:41,980 --> 00:05:43,360
although we could, if we wanted to,

118
00:05:43,360 --> 00:05:45,010
we don't actually need that element selector.

119
00:05:45,010 --> 00:05:49,040
And there we could just use ID. Same with our class.

120
00:05:49,980 --> 00:05:55,470
But because an idea as opposed to be completely unique in your page or on your page,

121
00:05:55,465 --> 00:05:58,065
there should never ever be more than one customer ID.

122
00:05:58,060 --> 00:06:02,310
Where's there can be more than one class name of the exact same name.

123
00:06:02,305 --> 00:06:08,005
There should only ever be one customer ID or one particular id per element.

124
00:06:08,005 --> 00:06:13,465
And so we can select this without having to select or specify a paragraph.

125
00:06:13,465 --> 00:06:16,635
Because our browser knows that if we're following the rules,

126
00:06:16,630 --> 00:06:18,880
there's only ever going to be one customer ID in here.

127
00:06:18,880 --> 00:06:24,480
And we can say this dot text changed again,

128
00:06:24,475 --> 00:06:27,235
and let's do a number four in there.

129
00:06:28,890 --> 00:06:32,650
And so this is what the code currently looks like.

130
00:06:32,650 --> 00:06:35,710
So it's going to select all over h 1s and our paragraphs.

131
00:06:35,710 --> 00:06:38,440
Change it to the one that ends in number to select

132
00:06:38,440 --> 00:06:41,610
the paragraph with a custom class change out to the one that ends in number three.

133
00:06:41,605 --> 00:06:46,765
And then select just happens to be a paragraph which is already selected up here.

134
00:06:46,765 --> 00:06:50,265
But we're going to select the customer ID, which is the paragraph.

135
00:06:50,260 --> 00:06:54,340
And we're going to change this one to change it again, number four.

136
00:06:54,340 --> 00:06:56,500
And when we refresh our page,

137
00:06:56,500 --> 00:06:57,960
changed again number four.

138
00:06:57,955 --> 00:07:02,235
And so now our pages are immediately more interactive.

139
00:07:02,230 --> 00:07:04,840
We can overwrite whatever HTML has been given.

140
00:07:04,840 --> 00:07:08,780
So if someone gives you a boring HTML page and you want to change a bunch of stuff,

141
00:07:08,780 --> 00:07:11,530
but you're not allowed to touch the HTML, which actually happens.

142
00:07:11,525 --> 00:07:16,115
Sometimes you can use JavaScript and jQuery to change it.

143
00:07:16,115 --> 00:07:20,605
Now, I'm not gonna talk too much more about selectors at this point

144
00:07:20,600 --> 00:07:25,040
just because it really is just a CSS selector and that's more of a CSS thing.

145
00:07:25,040 --> 00:07:27,740
Lin, It is a JavaScript or jQuery thing.

146
00:07:27,740 --> 00:07:31,670
So whenever you want to select something very specific,

147
00:07:31,670 --> 00:07:32,890
you could select your body.

148
00:07:32,885 --> 00:07:34,825
You can select some element,

149
00:07:34,820 --> 00:07:38,930
maybe a paragraph, and then you can select all strong tags inside of it.

150
00:07:38,930 --> 00:07:42,800
This is just regular CSS selector.

151
00:07:42,800 --> 00:07:45,530
So you're selecting your body, selecting all paragraphs inside the body,

152
00:07:45,530 --> 00:07:49,310
selecting all strong elements inside of a paragraph.

153
00:07:49,310 --> 00:07:50,470
And then we would be changing it.

154
00:07:50,465 --> 00:07:51,625
We don't have that example setup,

155
00:07:51,620 --> 00:07:53,390
but if you'd like to, that would be a,

156
00:07:53,390 --> 00:07:57,230
a fun little thing to set up for your project or not your project,

157
00:07:57,230 --> 00:08:03,460
but your homework for this particular lesson is to create a very specific selector,

158
00:08:03,455 --> 00:08:06,445
do dot text, and then change the text on it.

159
00:08:06,440 --> 00:08:07,940
Go ahead and give that a shot.

160
00:08:07,940 --> 00:08:14,580
When we are done, we are going to look at changing some HTML on the page dynamically.