jQuery Tutorial - 14 - Element selector Video Lecture | Importance of jQuery in Website Development - IT & Software

hi this is Alex from PHP academy' dog
with a video tutorial for the new boston
in this tutorial we're going to again
look at selectors but this time we're
going to look at the element selectors
now obviously an element in an HTML
document would look something like this
this is a paragraph element we could
also have something like a div we could
also have something like a span as well
as things like images like that and
things like a tags as well so there's a
variety of different elements inside
HTML documents and we can use jQuery to
select specific elements of our page so
for example if we had a paragraph here
and we had a paragraph here but then
down here we had a span we're going to
go ahead and create some functionality
in our selectors j/s file which we've
included on our page to add some text to
this this paragraph here and this
paragraph here but not this span here
and then we're going to change these
around a bit to see the effect that we
get from that so we've got a paragraph
here and a paragraph here we can simply
reference we want to do something to a
paragraph in particular and this will
work and carry out the same operation
for every paragraph on the page
so inside selectors is we want to say P
we've now actually selected the
paragraph element now this would then
apply it to this paragraph here and it
would also apply to this paragraph here
however we have a span here so it would
not apply to that so inside selectors we
can say dot text and inside here we can
place some text so for example hello now
when we go over to our browser you'll
notice that we have two hellos just here
now if I was to go ahead and change this
here to a paragraph as well
this is now in the range that we've
specified all the selected set that
we've specified and therefore when we
refresh the page the text will also be
inserted into that last paragraph as
well now what we can also do is when we
set when we have elements and I'm just
going to give the example of paragraph
elements in here I'm sure with this
example you can work out things like
spans and divs as well as other elements
however what we can actually do is
because we have three paragraphs we can
choose the first the last or any other
particular paragraph so inside selectors
jas instead of just having P we can then
use a colon to specify which paragraph
we want to apply this text to so I'm
going to type in first now obviously the
first paragraph on the page is this one
here and therefore the only text that
should be applied or the only paragraph
that should have this text in is the
first paragraph let's go ahead and
refresh the page
now you can see that despite us having
three paragraphs on the page and
selecting the P we've selected the first
as well and therefore it's only applied
this to the first paragraph now
similarly we can also use last so if I
type last in there and refresh obviously
we can't see any difference at the
moment let's just go ahead and put some
text in here
so you can see that that hello has
applied to the last element that we've
specified so obviously you can also do
this with other elements for example if
these were div elements you could then
use div and then last or div and then
first it's entirely obviously for the
purpose you're using it would be
entirely up to you but for now we're
using paragraphs and we've successfully
referenced all the paragraphs and then
we've chosen the first and then the last
now you might also want to say 'pete
first and go ahead and change this back
to just P you could then go ahead and
select ID equals let's just say para
let's just put some text in there as
well when we refresh you can see that
they've all changed however this is
because we've specified a P despite the
fact that we've put an ID on there in
the last video we looked at referencing
by an ID it's still a paragraph so you
need to be careful when you're using
this on your page because if you wanted
to for example just change this text in
here you've given it an ID here you've
referenced all paragraphs now you could
solve this by for example copying and
pasting this line down and just
referencing that paragraph on its own
when you refresh let's just go ahead and
change this something different hello -
and when we refresh we get that change
however this is an inefficient way to do
things
so at best you need to think about how
you can actually name things and where
you need to reference things and which
elements need to be referenced so
hopefully that will make sense we've got
three paragraphs here go ahead and try
it with divs spans images anything and
try and combine your other jQuery
knowledge with referencing to see what
you can do