jQuery and AJAX Tutorials 2 | jQuery Selectors Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming

[Music]
what's up guys my name is Elias and
welcome to your second tutorial on
jQuery and in this video I'm gonna be
talking to you about selectors and
selectors are very important
I can barely mention any piece of code
written in jQuery without the use of
selectors and if you're familiar with
CSS and you were to work with that ah
you have to know what they are and so
you can actually skip this video and
like get to the next one
pretty much so if you don't know what
CSS is or if you don't know how to style
an element you can follow along let's
add a style tag first okay let's imagine
we have a button and let's say it's
button one and we want this button not
to be standard on this button to be
larger so I can just type button font
size 26 on so it got larger and now I
want to create in any sum another box
another button say it's button 2 and we
have two buttons like the same size so
and what if I only want my first button
to be large and the second button to be
small so what should I do
I have to select the button so how do I
do that
and there are two options the first
option is I can use class so I can use
class of big for example and use class
of small and then instead of selecting
all the buttons here I can select only
big ones so and I put dot that stands
for class it means CSS go ahead and
select all the elements
in this document which have class big
and this is this button here and make it
a large like
one size 20 and the other element should
not be changed so this is what we done
this is button one is large and button
two is tiny and what if we want our
buttons small to be even more like even
smaller we can say should be font size
like 10 or something yeah let's let's
say 8 great um and what if I I wanna say
I wanna have like 3 buttons of like 3
big buttons like button 1 point 1 and
button 1 point whatever to and they all
have to be big but simultaneously I want
this very button to be yellow how do I
do that huh this is where I would use
IDs so ID is a unique name of an element
I can say it should be yellow no I want
to use actually green because it looks
nicer and in order to select this very
element with green ID
I used route I type route and class name
which is green properties and I'll just
say color green refresh and now I see my
three large buttons with the class large
and only one button is green your
probably would ask me why are talking
about CSS and selectors I mean what's
going on so there's a good news for you
guys
jQuery uses the same selectors like
early same structures as a CSS use so
let me just show an example for example
what if I want to select my element one
point one and make it disappear here's
how do that I I call jQuery
by using this dollar sign I can type
jQuery instead but I will use this
dollar sign and in my brackets in my
parentheses I use this route and tied to
the ID which is green like this very ID
and then I could dot and an action let's
say I want to hide it
let's round the code yeah and it's gone
and let's say I want to hide all the
elements in this class
big so what do I do here I replace this
route with a dot and it means I'm
referring to the whole class and I type
big instead and so I'm about to hide all
the elements which have the class of big
let's see yeah yeah gun so this is
pretty much how a simple jQuery selector
works there are way more complicated
combinations of selectors and sometimes
you have like very large structures of
of your HTML document and you want to
select any certain elements so you would
use a lot of selectors so this is pretty
much it I hope you enjoy that I hope you
learn new stuff and in this tutorial
we'll be talking more on about selectors
and doing some more exercises so you
have any questions go ahead and ask and
I will see you next time thanks for
watching