All right so it's time for our first Jay queery exercise the way that this one works is that I'm going
to give you some sample aged hymnal for divs some have classes some have ideas and they'll take those
for divs and put them in your own age HTML file and you'll need to include Jay query correctly up to
you how you do that if you want to use a Cdn or if you want to download it.
And then there are four quick challenges that I want you to attempt using Jay Querrey and in particular
the dollar sign to select and Dot see SS to style.
So the first one.
Select all divs and give them a purple background.
The next one is selects the divs with class highlight and make them 200 pixels wide.
The third one is to select the div with the ID third and give it an orange border up to you how wide
and what style of the border.
And then the bonus is to select the first div only and change its font color to be pink.
So go ahead give this a shot.
You'll need to post a video.
Create a New Age HTML file.
Include a query and then copy this code in or type it up yourself and then you'll need to solve these
four challenges.
So go ahead post a video.
I'll be back in just a few seconds with the solution
already.
Let's go ahead and type up a quick solution to this.
As always the first thing we need to do is make our each time file.
So I have a new file.
I called it exercise that h t m l and I'll save it and then add in my regular h tim l boilerplate and
we'll just call this J query exercise in the title and then I'll go ahead and add in our starter DML
and I'll just copy it in rather than typing it.
OK so we have the four elements.
Now let's go and add Jay Querrey.
Remember we have two ways of doing that we can include it locally or we can link to a CDN.
So I'll show both the first one.
I'm just going to copy the file over.
So I have to modify version here just to command c command V.
So I now have it in the same directory as my exercise that age Simmo.
And then I'll go over here and the first thing that I want to do is add a script tag script and then
I'll add source equals and then I need to make sure that I match that correctly which is Jay dash to
point 1.4 men.
Yes.
So Jay queery dash to point one point for Dot men.
Jesus we'll save that and open it up in our browser and do our little test to see if it works.
It looks like it found the file.
Otherwise it would give us an error and we can always try doing something like a dollar sign div and
see what we get.
And it's working.
It's selecting our 4 divs.
We can also include A-J queries CDN.
And I just google for that.
Jay quercetin and then pick our version.
So we don't want 3.0.
I'm sure it works fine.
But that's the newest version and it's still an alpha.
So there's probably some bugs and some issues.
So to point one point four is the most recent stable version then we'll copy this URL and then we'll
add another script tag and I'll leave them both here and just comment one out and reset the source equal
to that you are wrong.
So either one works I'll use the Cdn since I already proved to you that we
all use the Cdn.
Since I already proved that this one worked just for variety sake.
So we'll save and then refresh and double check does our code still work.
Yes it's finding dollar signs just fine.
It's connected to J Qwerty.
One point that I'd like to make is that we include J queery up top in the head and we use it in our
scripts that we write down in the body.
And the reason we do that remember things load in the order that they're declared So we want Arjay query
to definitely load before we use it instead of a script.
So our script that we need to define is where we'll write our code and we'll just call it exercise.
J s.
And then we need to make that file exercise that J us and we'll put that right here in the same directory
and what we can do is a really simple test to see if it's connected both to our h tim file and to the
J query if it's able to see and use the J query method we'll just do something like this.
If J query else will do something else so if there is J query we will alert a query loaded else we'll
alerts know Jay Querrey sad face and save.
And if we refresh now we get J query loaded.
So that tells us two things.
One this script is running exercise that Jesus is connected and two were able to use the Jay Querrey
methods.
If we did this in reverse order though and I put Jay query after I included my exercise Jay Yes and
I save and refresh we get an error which tells us J query is not defined so you can see the importance
of the order that we put things in.
So we always want to put our libraries that our code depends on up top in the head at the very least
we want to put them before our scripts that use them.
Let's go back to the assignment and the first thing we need to do is correctly include Jay Querrey which
we've already done.
Next up we need to select all the divs and give them a purple background.
So we'll go ahead and select all divs by using dollar sign instead of quotes.
All we need to do is select div with CSSA.
So just div dot C S S and we'll make them purple.
So color or background in this case is purple or we could have used our own R.G. B shade of purple.
And if you don't remember how we make purple with RGV then you need to go play the R.G. became a little
bit more.
So that's the first one we can save and check that that worked by refreshing.
And we get four purple backgrounds.
OK.
So that's that.
That is selecting all the divs and giving them a purple background.
I'll just add a little note here and comment that out.
Next up we want to select the divs with class equal to highlight and make them 200 pixels wide.
So that will work very similarly but to select the divs with class equal to highlight what we need to
do is use dollar sign again.
And rather than div we can use dot highlight and then do C Ss with and that will be 200 peaks.
It's worth noting that this technically selects anything that has a class of highlight.
If you want it to be explicit and say only the divs that have the class of highlight we could have an
anchor tag or a paragraph that also have that class we would write this selector.
And this is C S S that says all divs with the class of highlight.
But in this case it will make a difference.
So 200 pixels with refresh and you can see these two divs have the class of highlight the second and
the fourth div and they have a with 200 pixels.
OK the next one is to select the div with the idea of third.
And to give it an orange border so to select the div with that Id dollar sign again and instead of dot
we need our to Thorpe.
And then the name of the ID that SS order and it's up to us.
All I said was color is orange.
So let's do a two pixel solid orange border and save and refresh and we now have that orange border
right there.
I'll make it a little bit bigger so that it shows better in the screencast.
There we go.
And that's around a third div which has the ID of the word.
So the last challenge which was a bonus is to select the first div only and change its font color to
pink the way that will select the first div is using a CSSA pseudo selector.
First of type so div colon first dash of dash type which you should be familiar with from some of the
CSSA selector videos.
And then we'll just make it pink that's the SS color pink and we save and refresh and you can see the
color is pink.
The other option that we have is there's actually a built in J query shortcut which is just Colan first
and that also works just fine.
An interesting note is that using colon first is actually a little slower than first of type because
first of type is built in to see assess it is a CSSA selector versus first is a J query shortcut.
So it's not native C Ss it's just ever so slightly slower.
So I would use first of type.
OK so that's it for this exercise in the next few videos.
We're going to learn about other ways of manipulating things rather than just changing SEUS us