jQuery Tutorial - 7 - Ready 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 bustin
in this video we're going to take a look
at the document ready handler in or the
ready handler in jQuery now you can see
at the moment I have a basic page just
setup an html5 document with a title
stylesheet and I also have included
jQuery now when we write jQuery code we
tend to want to load all of our code at
a particular point straight after the
document object model is available or
the Dom for short you'll probably see it
written like this quite a lot of the
time and for this we use the ready event
handler and we bind this to the document
the overall document and what this is a
lot what this allows us to do is load in
our code before anything else starts to
load so we have an advantage where we
quickly load in our code or what we want
our page to do so our from our events
etc animations before the page is loaded
so there are are advantages and
disadvantages to this method however I'm
going to go ahead and show you how we
would use document ready so the first
thing I want to do is go ahead and
create an external javascript file so
I'm going to open up a new file in my
text editor and i'm going to save it
inside my javascript directory and i'm
just going to say save this as ext js4
external now we need to go ahead and
include this on the page so let's go
ahead and type out our script tags the
type is text JavaScript
and the source is Jay s /e xtj s which
is the father we've just created inside
of our Jay s folder now let's just say
we have some document content here
that's going to look in the browser very
much like that so nothing really too
special so I want to go ahead and I want
to load or do something before the
document has loaded so I can go ahead
and I use a selector to select the
document and then I say dot ready now
inside the dot ready Handler we need to
create a function and this is the
standard notation that you'll use or in
fact the overall concept of what I'm
talking about
is what you would usually use when you
were would load jQuery code or write
jQuery code so inside here we outline a
function and then we give it some curly
brackets and what we want to do is just
pull this down and now inside of here
this is where all of our jQuery code
would would go so essentially as soon as
the document is ready
ie straight after the Dom has been
registered we can go ahead and actually
start to write something out so in this
case just for this example I'm going to
go ahead and alert something out so I'm
gonna alert out document is ready so now
when we go ahead into our browser and
refresh just go and refresh you'll see
that this has been loaded straight away
now we've only got some page content
here however you'll notice that as soon
as the page was reloaded this alert box
came up so if we were for example to go
ahead and write some other code in here
we now know that as soon as the document
is ready we'd be able to actually go
ahead and it and you know write our code
inside of here
alternatively if I was just to go ahead
and say alert ready for example it does
more or less the same thing but the
standard way that we would write in
jQuery we would usually use document dot
ready every time we were to write some
jQuery code so it's probably best to get
into the habit of when you write any
jQuery code and you include it you know
as we will be doing in this tutorial
series in an external file go ahead and
use document dot ready just to allow the
jQuery code that you've written to be
run as quickly as possible