All right.
Welcome back.
So let's start writing some code.
And the first thing we're going to learn how to do is how to select elements.
So just like with regular dominant relation or phonology Yes we need to select things and then manipulate
.
I know I'm a bit of a broken record there but it is a really important process select and then change
things.
This video is going to be mainly focused on selecting elements with J Query for two main objectives
here.
The first one is learning how to select elements with the dollar sign function and then also using the
C assessed method to style elements.
So we're not just getting select things just print them out but to make it more visual We'll select
them and then change the background color and Jay query we can select everything that we want using
just one function.
The dollar sign.
So unlike vanilla J.S. where we have document that get element by id query selector query selector all
get elements of a class name get elements by tag name.
There are so many different ways of selecting the dollar sign and Jay query will replace all of them
.
It basically works like queries selector all in that we give it a C Ss style selector.
And then Jay query returns all the matching elements that match the selector that we give it.
So I have an example here if we wanted to select all of the image tags on the page it just looks like
this if we wanted to select all the elements with class of scale we do dot scale.
Remember this is set style selectors.
So for an ID we need the arc to Thorpe for a class who need the dot and we can also do some more advanced
things like this selecting all anchor tags that are inside of list elements.
So I'll do a quick demo here of how this works.
So we have our Jake Querrey demo aged him our page set up where I have the Cdn included.
And it doesn't matter if we use the N word or if you want to use the downloaded copy it will work the
same way.
So we need that script here and then we need some content to play with.
So I'll keep the H-1 S.J. core demo.
I'll change these allies to make them a bit more unique so I'll fill it with some of my favorite animals
.
So end is for Newt.
My five year old self's favorite part of the animal alphabet song will add in another one of my favorites
album Monkey.
And then lastly the pine martin.
And if you've never seen the pine marten they are equally adorable and terrifying animal.
So you can see pretty adorable here.
But if you take a look at them in action they're crazy predators and pretty scary.
OK.
So some of my favorite animals in the list will save and let's open this up now.
Make sure we're in the right directory.
Jay quarried demo that each Chimo and what I'll do is move this out in its own window and we'll just
go in the console make the font size a little bigger and let's use a query to select some of these things
.
So remember a dollar sign is a function.
And if I just type dollar sign on it's own without the parentheses.
That's just like me typing alert without parentheses or con. dot log without the parentheses doesn't
really do anything except tell me.
Yeah I know about that code but it doesn't actually execute it.
Let's begin by selecting the only H-1 on the page to do that.
We can use dollar sign and the s selector to select h ones is just H-1 and we hit enter.
You can see it returns the J queery demo H-1.
So also notice that it's inside of a list.
So unlike query selector where it returns the first instance the dollar sign selector for.
Query will return a list even if there's only one item which is actually useful and we'll see that in
a little bit.
So let's try selecting all the allies now so we can do something like Dollar Sign ally and we get three
allies just like that.
We can also select the body by typing body and to make things a little more interesting.
Let's go back to our age e-mail and add in an I.D. to pine martin we'll call it adorable as the id and
then we can also on our howler monkey will add an A tag howler monkey and it will just go to monkey
dot com and this will just be monkey dot com.
And if we refresh if I want to select that link I would use dollar sign and I could just do anchor tag
and that will give it to me.
I could also say anchor tag inside of an ally.
I could also if I really wanted to say only the anchor tags inside of allies that are instead of a will
.
And in all cases so far those are identical.
But if I add another anchor tag just at the bottom of the page Google dot com and I refresh.
And now I do my dollar sign anchor tag.
I get both anchor tags.
If I do a dollar sign UL with an ally with an anchor tag inside of that it only gives me this anchor
tag.
Or they could've just shortened it to this here and there we go to select the item with the idea adorable
it works just like queery select or all or query selector or C Ss for that matter where I need the Arctic
or hash symbol Plus the ID name adorable and that gives me the pine marten ally.
So we've seen how we select and it's not very exciting just to print things out to the console or just
to see them returned here.
But I actually want to do is introduce one method we're going to see a lot more methods in the next
few videos but I'm going to show one right now that will help us make things visual and help us alter
the styling so that method is called Dotsie SS and the way that it works is we type a selector dollar
sign and some selector and then we can add Dotsie SS on the end of that and pass it in some properties
and values to change.
So here's an example I'm selecting something with the idea of special and then I'm running up CSSA on
it and changing the border to be two pixel solid red.
So let me demonstrate that.
Let's do it to the H-1.
So I select dollar sign H-1 Dotsie SS Just like this.
And then instead of here let's change the color to be yellow just like that.
And I hit enter.
And you can see it changes to yellow which is awesome.
So it's always good to keep in mind how you would do this without j Querrey.
So we would do something like document that get and let's do document query selector H-1 dot and B don't
have that C Ss So we need to do dot style dot color equals.
And let's change it to orange.
And there we go.
We changed it to orange but this line right here is actually a lot more powerful and can do a lot more
than we can do with this single line here.
So let's suppose that I wanted to change multiple styles about this H-1 I wanted to change the color
and the background color and the border.
What I can do is define my styles in an object and pass an object in.
So I don't have to just do a string Porter comma the value for Porter.
I can define an object with multiple properties multiple key value pairs and pass that in and they will
all be applied.
So let's do that now.
Let's define our styles and we don't have to make a separate object.
I'll show you that.
And instead of here will say color should be red background should be pink and we'll do border should
be two pixels solid purple just like that.
And if we hit Enter we now have our styles object and again that can be called anything.
And then what we'll do is select the H-1.
So dollar sign H-1 again gutsiest us and we just pass in our styles object and all of those styles are
applied.
So to do that without j query would require us to do three separate lines.
You'd need to do document that querist let your H-1 style dark color is equal to red and then dot style
dot background is equal to pink and then that style that border is equal to two pixel solid purple.
Hopefully you can see already that with just a few lines.
J Query is already proven to be pretty powerful.
And while we can do everything without it it's definitely saving us some time and making our code cleaner
.
There's another feature of the dot CSSA method that makes it even more useful that I'll show now what
we can do is actually style multiple elements at once rather than just selecting the first one and making
it yellow.
We could select all the ones or all allies and we just need one line to do that.
So I'll show you that.
Now let's make all the lies.
So to do that I need to select allies.
So just like that.
And if I hit enter.
You'll see that it gives me the three allies and then I need to chain on C Ss and I'll just give it
a single property color and change it to be blue just like that and I'll hit enter and notice this one
line changes all three allies.
So definitely very powerful.
All we do is select with our selector dollar sign ally and that gives us three allies and by doing Dotsie
SS on an array here of ALWIS this list of allies.
It actually will make them all blue and we don't even have to manually loop through like we would without
a query.
So just to remind you if I want to change all of them to be green without query I first need to select
all of them.
So var allies equals document that query selector all pass in the string ally.
And then I need to loop through.
So for var I equals zero is less than Elvises at length I plus plus.
And then inside the loop we need to do allies I that style that color
equals and we'll do green just like that and we'll hit enter.
And you can see they all change to green.
So again it's doable without a query but it's significantly more code.
We need to select them all first and even just selecting them is painful.
This is a lot longer than just a dollar sign.
And then we also need to loop through manually with a for loop or a while loop and then change each
one individually and then we're done with a query though.
All we had to do to change back to blue is select all allies Dotsie SS and then pass in our property
which is blue color blue.
I'll demonstrate a few more examples here.
Let's select all anchor tags just like this a tag that C Ss and will make their font size bigger so
font size and it will be 40 pixels and there we go.
We get big links I'll also show that we can define an object full of styles like we did earlier and
we can use that to style multiple elements not just one.
So we'll select all the lies and style them together and rather than just doing the SS and passing in
a string like color we'll give it an object and just define it in place here.
And we'll add in some space here to type.
And the first thing we'll do is change the font size of all of them.
So NCSA as the font size is font Dasch size or height and size in javascript and in J query we have
to use camel case.
So font size no space or no dash but we uppercase s member that's Kimbal case and we'll make them 10
let's do yet 10 pixels and then we'll add in a border and this one will be three pixel dasht purple
.
Those dashed borders are always stunning.
And then lastly add in the background color background.
And let's just make up our own R.G. color.
So R.G. B.
And we'll do our G.P.A. actually.
And the first one read will too.
89 red 45 Green 20 blue.
And then 0.5 Alpha which is the opacity or transparency channel.
And if we hit enter you can see that all of those are applied at once.
So our font size shrink We've got 10 pixels.
We have these stunning borders around the allies that are three pixels dasht purple and then we have
the background color which is whatever this color turned out to be it looks like sort of a light brownish
color.
All right.
So hopefully you can see from that quick demonstration just two different things that we're doing selecting
with dollar sign and that on its own is incredibly powerful.
It basically works like queery Slichter and queery selector all combined.
And it's a much shorter and easier to write syntax.
And then there's the CSSA method which is also extremely powerful because we can change individual properties
like we did here but we can also massas sign CSSA properties like we did right here where we pass in
an object full of key value pairs.
Probably the most important part of all of this is that when I select a collection like all allies like
I did right here I don't have to manually loop through and apply something individually like I did up
here where we had to loop through all the allies and change the color one at a time with J query.
If I have a collection of elements it automatically loops over that and applies Dotsie assess to every
single one.
So it's extremely powerful.
And that's why as a side note that's why it always returns an array here.
Even if I just have one element with the ID adorable it always returns it in the list because all the
logic behind the scenes involves looping over that list.
So it will loop over this and it just happens that there's one item here.
So it doesn't really loop.
It just goes over one time.
All right hopefully enjoyed that and are starting to see the power of equerry