1
00:00:00,780 --> 00:00:06,120
Hello and welcome to this lecture on jig query selector's.

2
00:00:06,210 --> 00:00:14,400
Jake Query select tours are one of the most important parts of the J query library in queries let us

3
00:00:14,460 --> 00:00:25,950
allow us to select a man who played hastier male element to the Aquarius selectors allow us to find

4
00:00:26,040 --> 00:00:36,150
or select hastier male elements to perform an operation or action on some of the examples of Joe query's

5
00:00:36,160 --> 00:00:48,350
selectors include elements selectors select selector class select or select select or first elements

6
00:00:48,350 --> 00:00:49,350
select.

7
00:00:49,380 --> 00:00:52,730
These are be job queries select us.

8
00:00:52,800 --> 00:00:55,470
We will cover in this lecture.

9
00:00:55,680 --> 00:01:01,030
There are so many unknowns but will all stick to these ones for this lecture.

10
00:01:01,410 --> 00:01:07,950
This is the typical way you would specify a query selector.

11
00:01:08,190 --> 00:01:16,200
You begin with a dollar sign and there you place the selector in between the quotes.

12
00:01:16,200 --> 00:01:20,850
If it's a text so this is how you specify a query.

13
00:01:20,860 --> 00:01:26,220
So I have got my sample web page on the right.

14
00:01:26,370 --> 00:01:29,910
I am Gotz my chord on the left.

15
00:01:30,060 --> 00:01:34,290
I have got some selector's inside this could edit.

16
00:01:34,470 --> 00:01:44,460
I will begin with the element select the elements select or his way in a select or is selected based

17
00:01:44,580 --> 00:01:45,970
on their names.

18
00:01:45,990 --> 00:01:50,260
So you use the names to identify them.

19
00:01:50,400 --> 00:01:54,530
For example the P tag is a paragraph.

20
00:01:55,390 --> 00:02:02,070
Selecter deep can be a selector behaviour to tag can be a selector.

21
00:02:02,230 --> 00:02:08,530
So where you are using the N names they are known as element selector.

22
00:02:08,780 --> 00:02:10,710
So I've got an example here.

23
00:02:10,720 --> 00:02:20,140
If I take this comment off the code this page to hear is heading click Top selector.

24
00:02:20,170 --> 00:02:27,490
Sorry to hear you to tag and is it heading selector so is defined in the document.

25
00:02:27,520 --> 00:02:29,270
I've got two here.

26
00:02:29,350 --> 00:02:37,610
This is a head in and give it a collar or blue so the blue text you see here through a friend seemed

27
00:02:37,610 --> 00:02:43,390
to be hitched to Selecter which is known as an element of Selecta.

28
00:02:43,630 --> 00:02:44,900
So was the.

29
00:02:44,910 --> 00:02:51,980
Actually I am specifying his that way in the bottom but and also the selector.

30
00:02:52,210 --> 00:03:00,460
When the button is clicked on I want the anything inside this select to select all to hide.

31
00:03:00,640 --> 00:03:05,430
So if I click on the button the blue attacks which is a page to should hide.

32
00:03:05,830 --> 00:03:07,960
Click let's refresh that

33
00:03:11,290 --> 00:03:13,990
refresh and click.

34
00:03:14,180 --> 00:03:15,850
Soon the Blue Ted has gone.

35
00:03:15,850 --> 00:03:19,380
So that is an example of hitch too.

36
00:03:20,790 --> 00:03:25,310
Selecter which is also known as an element so little.

37
00:03:25,310 --> 00:03:30,920
Next we're going to talk about an idea Selecter Heidi selektah is unique.

38
00:03:30,920 --> 00:03:38,720
He uses it attributes of his mouth tag to identify the element.

39
00:03:38,760 --> 00:03:45,400
So in this case I have specified and I fully here contact to be heading.

40
00:03:45,560 --> 00:03:46,570
That is it there.

41
00:03:46,760 --> 00:03:51,970
So the I.D. tags are identified with the hash symbol.

42
00:03:52,120 --> 00:03:58,830
So if I remove the comments from this line of code we can test this out.

43
00:03:59,120 --> 00:04:06,630
So this hash tag indicates that we got a D as a selector.

44
00:04:07,250 --> 00:04:11,160
So I specified it in the code here would be a D.

45
00:04:11,270 --> 00:04:20,690
So if I say my code refresh that and if I click on this button here.

46
00:04:20,690 --> 00:04:26,640
But it's also a select if I click on the button I select all should vanish.

47
00:04:26,690 --> 00:04:31,490
So this large takes here should go in green.

48
00:04:31,520 --> 00:04:32,300
Click.

49
00:04:32,540 --> 00:04:33,160
That's gone.

50
00:04:33,160 --> 00:04:42,020
So that's an example of using an I.D. selector next will this cost pick class select top class selected

51
00:04:42,030 --> 00:04:49,190
or can be used for several elements on the page whereas the idea selector is unique.

52
00:04:49,220 --> 00:04:51,380
It can only be used for one element.

53
00:04:51,550 --> 00:04:56,320
Class is reusable and can be used for several elements.

54
00:04:56,330 --> 00:04:58,760
I have specified the class here.

55
00:04:59,570 --> 00:05:04,940
I have defined a class inside a paragraph tag and the class is para.

56
00:05:04,940 --> 00:05:09,110
The attribute is class and the value has power and class.

57
00:05:09,110 --> 00:05:13,290
This identifier will adopt or period next to the names.

58
00:05:13,440 --> 00:05:15,140
So this is a style in here.

59
00:05:15,170 --> 00:05:22,610
You can see no superior day dot followed by the name of the class here and I've given it some styles

60
00:05:22,820 --> 00:05:24,240
to take.

61
00:05:24,500 --> 00:05:31,930
So here in my query I have specified the class selector here.

62
00:05:31,960 --> 00:05:39,320
Would did dot power which I defined earlier in the paragraph stack up defined that there.

63
00:05:39,630 --> 00:05:45,080
So again if I click on the button which is also a selector.

64
00:05:45,180 --> 00:05:51,580
The thing with the paragraph class whole with this class para will hide the moment.

65
00:05:51,670 --> 00:05:55,250
I have caught my power anything with para.

66
00:05:55,450 --> 00:05:57,100
It's got quite a lot of rest.

67
00:05:57,100 --> 00:05:59,540
At least two paragraphs here I read.

68
00:05:59,540 --> 00:06:02,710
If I click on the button this should disappear.

69
00:06:03,050 --> 00:06:04,300
See they have gone.

70
00:06:04,460 --> 00:06:08,900
That's an example of using a class selector.

71
00:06:08,900 --> 00:06:19,370
Next week to use what's this core or select or select or identify with asterisks symbol.

72
00:06:19,610 --> 00:06:21,350
What the whole selector does.

73
00:06:21,410 --> 00:06:25,730
It will affect every element on the.

74
00:06:26,090 --> 00:06:34,150
So wherever you use n be uster exciting the salento you are referring to every element on the page.

75
00:06:34,380 --> 00:06:42,680
So if I click on the button which is also select on every thing on the page will hide including the

76
00:06:42,680 --> 00:06:43,640
button.

77
00:06:43,640 --> 00:06:45,940
So watch this.

78
00:06:46,940 --> 00:06:48,000
Let's refresh.

79
00:06:48,020 --> 00:06:51,790
That didn't quite work.

80
00:06:51,800 --> 00:06:53,080
Sorry was my fault.

81
00:06:53,090 --> 00:06:55,610
I didn't actually see the changes I made.

82
00:06:55,700 --> 00:07:02,090
So if I refresh quick on that now everything should hide the gun so everything has gone from the page

83
00:07:02,390 --> 00:07:10,830
because I use it Asterix as a select talks or when that is use it will perform the action Operation

84
00:07:10,830 --> 00:07:14,540
on every element on the page.

85
00:07:14,540 --> 00:07:19,940
The next select top described is called The first element.

86
00:07:19,940 --> 00:07:23,190
Select top what does it refers to.

87
00:07:23,220 --> 00:07:24,150
Any.

88
00:07:24,200 --> 00:07:27,660
The first element of any tag.

89
00:07:27,680 --> 00:07:35,800
For example if you've got several a P element it will only effect the first paragraph or the first paetec.

90
00:07:36,040 --> 00:07:40,480
If you notice here I will quote two paragraph tags.

91
00:07:40,910 --> 00:07:47,710
I got two paragraphs here paragraph one paragraph paragraph to another paragraph.

92
00:07:47,900 --> 00:07:50,670
So what this will do it will hide well in the first.

93
00:07:50,670 --> 00:07:57,710
Once we expect this first one that's a paragraph to disappear when the button is clicked.

94
00:07:57,890 --> 00:08:01,870
So again the button is a select Takfir click on it.

95
00:08:02,060 --> 00:08:05,350
I expect the first paragraph to disappear.

96
00:08:05,370 --> 00:08:06,930
So let's check that out.

97
00:08:06,950 --> 00:08:08,910
See first paragraph.

98
00:08:09,370 --> 00:08:13,570
That is what is known as the first element.

99
00:08:13,910 --> 00:08:19,780
Select took final select top for this leg shot is this.

100
00:08:20,050 --> 00:08:30,490
Select this Selecter What does does it refers to the quadrent element being selected.

101
00:08:30,490 --> 00:08:33,840
So in this case is referring to the bottom here.

102
00:08:34,120 --> 00:08:39,490
So saying that when I click on the button the button itself should disappear.

103
00:08:39,490 --> 00:08:48,480
So any way you see this a square recall is referring to the quadrent element that's been defined next

104
00:08:48,490 --> 00:08:51,370
to day after day documentary ready function.

105
00:08:51,570 --> 00:08:55,570
Okay so it's actually referring to the to the button here.

106
00:08:55,900 --> 00:08:59,270
This tells Hyde refers to this button.

107
00:08:59,830 --> 00:09:03,140
So it refers to the actual selector.

108
00:09:03,190 --> 00:09:07,740
That's been defined inside the code block.

109
00:09:08,130 --> 00:09:12,650
So if I click on this the button itself will disappear.

110
00:09:12,910 --> 00:09:14,220
Let's take that out.

111
00:09:14,230 --> 00:09:16,480
See the button has gone.

112
00:09:16,600 --> 00:09:18,550
That is how you use it.

113
00:09:18,640 --> 00:09:25,300
This selector which references the first selector in this lecture.

114
00:09:25,390 --> 00:09:34,000
We cover some of the query selectors like elements select which is select top base on big names.

115
00:09:34,060 --> 00:09:40,630
The idea is select top which is unique in a class so later we can reference several elements on the

116
00:09:40,630 --> 00:09:41,460
same page.

117
00:09:41,470 --> 00:09:49,720
It is reusable because the electrodes identified it as terik symbol used to select or elements on a

118
00:09:49,720 --> 00:09:50,650
web page.

119
00:09:50,740 --> 00:09:58,290
And in this select on is used to reference the corrent this year element that's been identified.

120
00:09:59,020 --> 00:10:01,330
Thank you so much for watching this video.

121
00:10:01,330 --> 00:10:04,440
This is just a sample of some of this select us.

122
00:10:04,450 --> 00:10:06,190
There are so many others.

123
00:10:06,310 --> 00:10:13,230
Jim query uses a lot of Seer's says selector's and also has selector's office on.

124
00:10:13,510 --> 00:10:14,250
Thank you.

125
00:10:14,370 --> 00:10:15,080
Bye for now.