jQuery Tutorial - 19 - This selector Video Lecture | Importance of jQuery in Website Development - IT & Software

hi this is Alex from PHP academy' dorg
with a video tutorial for the new Boston
in this tutorial we're going to be
taking a look at the this selector now I
call it at this selector however is not
categorized as an actual selector but
what it does is it allows us to
reference a particular object that we're
currently working with or inside so for
example if we were to create a button
and wanted this button to be clicked and
then the text on it on this button to be
changed we can do so by referencing
using this and this saves a lot of time
with using selectors to reference a
particular object we're in actual fact
we only need to reference it once and
inside a particular function we can use
this so if you're unsure what I'm
talking about I'm going to go ahead and
give you an example so I'm going to go
ahead and create a button on my page so
an input type button and I'm going to
assign a value as click me now when I
click this button I want the value to
change to please wait or something like
that you'll probably notice that on a
lot of websites when you click a button
for example payment buttons the text
will change and it will disable the
button and this is just so the button
can't be clicked twice now we're only
going to be changing the value of this
we're not going to be disabling it but
obviously you can go ahead google around
for how you would disable a button now
I'm going to give this an ID and I'm
just going to call it button for example
and we use this ID to select this button
so let's go over to our browser and just
take a look at that you can see that
we've got our click Me button here when
we click it we need to assign an event
handler for something to happen now
let's say we had this click Me button we
could do absolutely anything once we've
assigned an event handler to it we can
display a message we can submit a form
we can load a different page it's
entirely up to you how you use this
however let's go and focus on how we can
use this okay so i've already included
this selectors JS file into my page as
well as jquery because obviously we're
making use of jquery
however the selectors j/s file is just
simply an external javascript file that
we're going to be writing our code in we
keep
our JavaScript in an external file so we
can go ahead and use a selector to
reference this particular button and
then perform an action and this action
will be to change the value of this
button so let's go over to selectors j/s
and let's go ahead and use a selector to
reference button now we've used a hash
because we're using an ID here and the
name of the button is button this value
here is not to be confused with this
type here for example if I call this
button click I would then change this to
button click and I think we'll leave it
at that okay so now we want to use a dot
to bind an event handler and this event
handler is click and inside here we need
a function now let's go ahead and do
this the wrong way how we shouldn't
really do it and then we'll go ahead and
look a look at changing this to make use
of this keyword okay so when this button
is clicked let's go ahead and test the
functionality and I'm just going to
alert out a dialog box saying clicked so
when I click this button now you see
that we have this alert dialog sign
clicked so we know that the clicking of
our button has worked but what we
actually want to go ahead and do is
change the value of this so we can use
the action in jQuery which stands for
attribute and we would normally go ahead
and say button under saw underscore
click dot H and what this will do you
can specify a value in the first
parameter which is value essentially
what we're doing is we're changing an
attribute of this button and the
attribute we want to change is the value
which is currently set to click me now
if you want to go ahead and change this
to something we can so I could say
please wait so what's going to happen
now is when we click on our button we're
again selecting our button and changing
the attribute value to please wait so
let's go ahead and check out how this
works when I click this button you see
it changes to please wait so quite an
easy piece of code and quite effective
however if you're using a reference to a
particular object with inside a function
a lot you can go ahead and eliminate the
need to re reference this or reselect
this button and you can do that using
this selector now like I said it's not
an actual jQuery selector however the
reason I'm doing this tutorial is just
to demonstrate the functionality of this
now what this will do is it will pick up
the current element that we're working
with so essentially by replacing it with
this JavaScript automatically replaces
this with button click so it's a good
coding practice to get into by using
this as opposed to keep re referencing a
particular element on your page so now
when we refresh you can see that it
works in exactly the same way just by
using this
so like I've said this is a better way
to write your code in terms of you know
in terms of using this keyword here as
opposed to re referencing this over and
over again now the reason for this is
let's just say you had lots of
references back to this button inside of
here you might have for example some
more code down here that did something
else what happens if we go ahead and
change this button ID we might just
change it to button for example now what
we would have to do if we had constantly
it applied this text here this selector
here is we would have to go and change
every single thing on our page so some
more code down here might make use of
this selector so by using this we can
automatically just determine which
element that we're currently working
with so you can see it'd be a lot easier
to change if you had you know say two
300 lines of code and you were using a
selector each time so by using this
you're creating a static version of this
select original selector so that's the
this selector in jQuery or just in
JavaScript an extremely effective way to
program