jQuery and AJAX Tutorials 49 | Back to the Basics Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming

hey what's up guys my name is yes and
it's your fully a49 tutorial on jQuery
already oh my god so we are almost done
with the jQuery tutorial set and you're
not going to learn something new in this
tutorial we're only going to review all
the stuff which we did before
so before we created this chat pod and
this fancy gallery we call it portfolio
and but now this is repeat the basics
because we couldn't really focus on
basics since last tutorial were very
tough because of Ajax and stuff but
today it's going to be way easier
so now let's imagine we want something
to happen when the button then when this
button is clicked you want to make sure
great in event for it and in order to
create an event you just select the
element like I taught you in one of the
first tutorials you can either use the
ID or the element type so let's just use
the element type just type button and
then you apply a function and you figure
out which event you want to use and
let's use the event of mouse over
function not up
and the reason why we have this function
here is that we won't happening to be
executed when this button is when you
hover over its body
so if you want your code to run in
either function and that's why you type
your code usually in in this in this
function so between these two curly
brackets pretty much and then if you
want to select the element which was
already clicked you use this this
keyword so for instance let's make the
button fade out only hover over it and
here you can
specify your parameters you can see
they're slow or fast or enter your own
number in milliseconds for example
thousand milliseconds is one second
alright let's just go ahead and see what
does we hover over it and it's
disappearing so this is how it works
so now
now let's trade another selector but
select this button by its ID and when we
click it function let's display the
buttons label when they click it so I'll
use a variable called label so they go
to this dot HTML and why HTML because
the bottom element we store is caption
as an HTML just between the bottom
opening tag and button closing tag and
now just go put an alert this label so
and there is something very important I
want to show guys before this tutorial
set is complete well you see we have
this dollar signs which means we are
referred to jQuery and jQuery is stored
externally right here in this min JS
file so every time we have jQuery it
means that the browser goes to jQuery
and is looking for this function and
does all that stuff all that stuff for
us and I mean the more jQuery functions
you have in your code the more often
your browser has to go somewhere like
externally in this jQuery core and look
for all this functions and you know like
mouse-over or events click and stuff so
your code basically gets slower when you
have too much jQuery links and there is
also a nice work around how you can
prevent that how can prevent the browser
going too much to jQuery
and making your site slow you can just
go ahead and create a variable I'll just
name it button just a normal variable
like you usually have in JavaScript and
set it equal to the selector of the
button for example let's just use this
lecture because it's I it's ID so you
just create a variable and set it equal
to the pointer to the selector which is
pointing at the element itself so at
this button and then you can just go
ahead and replace all this jQuery
functions while it is just button by
this button so that means that now this
button is referring to this real button
and the jQuery code still works anyway
so let's just go ahead and test it and
it does so it works