Hello and welcome to this lecture on jig query selector's.
Jake Query select tours are one of the most important parts of the J query library in queries let us
allow us to select a man who played hastier male element to the Aquarius selectors allow us to find
or select hastier male elements to perform an operation or action on some of the examples of Joe query's
selectors include elements selectors select selector class select or select select or first elements
select.
These are be job queries select us.
We will cover in this lecture.
There are so many unknowns but will all stick to these ones for this lecture.
This is the typical way you would specify a query selector.
You begin with a dollar sign and there you place the selector in between the quotes.
If it's a text so this is how you specify a query.
So I have got my sample web page on the right.
I am Gotz my chord on the left.
I have got some selector's inside this could edit.
I will begin with the element select the elements select or his way in a select or is selected based
on their names.
So you use the names to identify them.
For example the P tag is a paragraph.
Selecter deep can be a selector behaviour to tag can be a selector.
So where you are using the N names they are known as element selector.
So I've got an example here.
If I take this comment off the code this page to hear is heading click Top selector.
Sorry to hear you to tag and is it heading selector so is defined in the document.
I've got two here.
This is a head in and give it a collar or blue so the blue text you see here through a friend seemed
to be hitched to Selecter which is known as an element of Selecta.
So was the.
Actually I am specifying his that way in the bottom but and also the selector.
When the button is clicked on I want the anything inside this select to select all to hide.
So if I click on the button the blue attacks which is a page to should hide.
Click let's refresh that
refresh and click.
Soon the Blue Ted has gone.
So that is an example of hitch too.
Selecter which is also known as an element so little.
Next we're going to talk about an idea Selecter Heidi selektah is unique.
He uses it attributes of his mouth tag to identify the element.
So in this case I have specified and I fully here contact to be heading.
That is it there.
So the I.D. tags are identified with the hash symbol.
So if I remove the comments from this line of code we can test this out.
So this hash tag indicates that we got a D as a selector.
So I specified it in the code here would be a D.
So if I say my code refresh that and if I click on this button here.
But it's also a select if I click on the button I select all should vanish.
So this large takes here should go in green.
Click.
That's gone.
So that's an example of using an I.D. selector next will this cost pick class select top class selected
or can be used for several elements on the page whereas the idea selector is unique.
It can only be used for one element.
Class is reusable and can be used for several elements.
I have specified the class here.
I have defined a class inside a paragraph tag and the class is para.
The attribute is class and the value has power and class.
This identifier will adopt or period next to the names.
So this is a style in here.
You can see no superior day dot followed by the name of the class here and I've given it some styles
to take.
So here in my query I have specified the class selector here.
Would did dot power which I defined earlier in the paragraph stack up defined that there.
So again if I click on the button which is also a selector.
The thing with the paragraph class whole with this class para will hide the moment.
I have caught my power anything with para.
It's got quite a lot of rest.
At least two paragraphs here I read.
If I click on the button this should disappear.
See they have gone.
That's an example of using a class selector.
Next week to use what's this core or select or select or identify with asterisks symbol.
What the whole selector does.
It will affect every element on the.
So wherever you use n be uster exciting the salento you are referring to every element on the page.
So if I click on the button which is also select on every thing on the page will hide including the
button.
So watch this.
Let's refresh.
That didn't quite work.
Sorry was my fault.
I didn't actually see the changes I made.
So if I refresh quick on that now everything should hide the gun so everything has gone from the page
because I use it Asterix as a select talks or when that is use it will perform the action Operation
on every element on the page.
The next select top described is called The first element.
Select top what does it refers to.
Any.
The first element of any tag.
For example if you've got several a P element it will only effect the first paragraph or the first paetec.
If you notice here I will quote two paragraph tags.
I got two paragraphs here paragraph one paragraph paragraph to another paragraph.
So what this will do it will hide well in the first.
Once we expect this first one that's a paragraph to disappear when the button is clicked.
So again the button is a select Takfir click on it.
I expect the first paragraph to disappear.
So let's check that out.
See first paragraph.
That is what is known as the first element.
Select took final select top for this leg shot is this.
Select this Selecter What does does it refers to the quadrent element being selected.
So in this case is referring to the bottom here.
So saying that when I click on the button the button itself should disappear.
So any way you see this a square recall is referring to the quadrent element that's been defined next
to day after day documentary ready function.
Okay so it's actually referring to the to the button here.
This tells Hyde refers to this button.
So it refers to the actual selector.
That's been defined inside the code block.
So if I click on this the button itself will disappear.
Let's take that out.
See the button has gone.
That is how you use it.
This selector which references the first selector in this lecture.
We cover some of the query selectors like elements select which is select top base on big names.
The idea is select top which is unique in a class so later we can reference several elements on the
same page.
It is reusable because the electrodes identified it as terik symbol used to select or elements on a
web page.
And in this select on is used to reference the corrent this year element that's been identified.
Thank you so much for watching this video.
This is just a sample of some of this select us.
There are so many others.
Jim query uses a lot of Seer's says selector's and also has selector's office on.
Thank you.
Bye for now.