jQuery Tutorial - 12 - All selector Video Lecture | Importance of jQuery in Website Development - IT & Software

hi this is Alex from PHP academy' de org
and this is a video tutorial for the new
Boston in this video we're going to look
at the Asterix selector which selects
all elements on a page or within a
particular area of your page the first
example we're going to look at is
showing how many elements are currently
on the page so all of the elements you
see on the page and then we'll look at
creating a div and Counting the elements
inside of it obviously I've already
explained in the last tutorial with the
selector you can perform actions on a
specific set of elements so although in
this video we're actually counting the
elements the selectors are not obviously
just used for counting okay so let's go
ahead and just leave this page as it is
but we'll head over to selectors jas and
start to write out our code so I'm going
to write create a variable called count
and this is going to be equal to the
total amount of elements on the page so
to grab the total amount of elements
what we want to do is just use the
asterisk selector here on its own and we
want to produce account from this so we
want to select everything on the page
and then retrieve the actual count that
we have back from this because this on
its own will only select it won't
actually give how many elements have
been returned in the specified set and
remember the specified set is everything
so if we go ahead and add dot length
onto the end of this count now contains
a list of all the elements or a number
of all of the elements on the page so as
you can see we've got a few elements on
the page here so when we go ahead and
alert this out to the user
we should have let's have a look about
about yeah we'll have seven elements on
the page we should do anyway let's go
ahead and refresh the page yeah so you
see we get the count seven so that has
selected every single element on this
page and returned the length that this
selector has returned which happens to
be seven
so now we want to go ahead and select
elements only from a particular area so
to do this we can go ahead in art and in
our index dot PHP page create a div
we'll give it an ID so we'll say area
and then inside here we can create some
elements so this is a paragraph and
let's go ahead and create a button as
well and then finally let's go ahead and
create a span okay so let's go ahead and
refresh the page we'll still get that
will still get well we'll get 11 up now
because we've added another 3 elements
on to this however another four elements
on to this story that includes our div
in the outer area here as well but what
we actually want to do is only select
these elements that we actually find
useful so let's just say we wanted to
change the color or add some or add a
class to only these elements we don't
want to select the entire page contents
so inside selectors we actually now want
to specify the area that we want to
select and this is area because we've
created a div with these three elements
inside so we can we can just reference
this area and then we can say dot find
and inside of this we can use the
asterisks so instead of actually
specifying the asterisks in this first
selector we specify the area and then we
use find and then we specify in acts
tricks it's still going to return the
length but this time when we refresh the
page it should return a length of three
so now you can see we've got a length of
3 because that's counted the elements
within that div so selectors generally
are used to obviously reference
particular objects on your page you can
either reference by an ID in this case
we referenced earlier by area we used a
hash because we've used an ID and then
we specified the name and then we
counted the
the amount of elements using the
asterisks inside of here now we've got
one paragraph inside of here so let's go
ahead and check what would happen if we
change this to a P so let's refresh the
page you can see that we've got one
return to the user that's because
there's only one paragraph within this
area here so we first of all use the
selector to select the outside area and
then we're looking internally to find a
specific element we'll look more at P
and other different selectors in the
next few videos but for now that's the
Asterix selector in jQuery