hey guys in this episode I’m gonna show
you guys how to quickly begin
using jQuery to
manipulate of course uh EO web pages and
so forth so hope this is going to be a
quick one uh right on the screen right
now I’m using vs code and I have created
already an index.html file and it’s an
absolutely blank file as you can see and
on the browser it’s totally blank so
we’re going to do this really quickly
I’m going to create a very much Bare
Bones HTML file and then we’re going to
integrate jQuery into it and see how it
works and hopefully this is going to be
as I said quick so you don’t have to
spend too much time on it alright so
first thing is we of course create HTML
tags and we create
the head tag as well and we’ll name this
we have to name this page so we just
name this demo
and that’s pretty much it for our head
tags no an HTML document also has to
have a body tag as well and we’ll just
probably put hello wheel just to make
sure that something appears on the page
there we go we have a Hello World
um page and with you know Hollywood is
in within the body section okay so what
is the quickest way of doing this is
probably to load jQuery from CDN of some
sort
um so let’s do that very quickly I like
to use cloudflare so I’m going to search
for jQuery cloudflare CDN
and when you do that you get the first
link is cdnjs.com click on that
and here we have a list of files that is
available on the CDN now
the one that we want to use is of course
this one that is slightly orange or pink
it depends on of course your screen
colors
um and we’re particularly using the
min.js you can use
the dot GS without the Min but Min
stands for minified which means that the
file is usually going to be
smaller okay so it’s going to be quicker
to download as well but because we link
into it you won’t have to download
anything right I’m talking about like
opening it in the browser the browser
has to pull this file to the user and so
forth so anyways go ahead and use just
go ahead and click on
copy script tag so when you click on
that we go back to
our vs code and right under the head
just paste that in and you don’t have to
worry too much about what everything is
I’m not going to explain that as I said
this is a very very quick crash course
into getting something to work now we
basically this is not going to do
anything to say on the UI side and in
other words you’re not going to see any
difference here so for example I saved
this file the HTML file and I’m going to
go back to the demo page and nothing
really happens right or at least at
least not on the front side of things
but we’ll get to what you need to do in
order to utilize the jQuery library that
we know imported in
okay so first thing is first to make
this easier we need to probably create a
div all right so we’re going to make a
div container and let’s class this
container let’s name it something so
we’ll name this placeholder
and we’re gonna
stick with hello world for a second
we’re going to change this make sure
that you get rid of this
um tag there it’s going to break the
HTML code and when we reload this
nothing again is going to change but
something did change in the background
we’ll get to that as I get into the
inspector but just stay tuned don’t
leave us yet okay so now we have a
placeholder and we have a class that we
could reference this please order this
div element to as we saw we already
pulled in the the library and now we’re
gonna create another script here and
this time we’re going to put in some
text into here so
to the first thing we need to do is
understand how jQuery works when it gets
executed all right so
the first thing jQuery requires you to
usually do is to access jQuery use the
dollar sign and then you put here
document
and then there’s a ready function and
I’ll explain it ready function just now
already function which requires a
function
as well which doesn’t have any arguments
Open brackets here
all right
now here
let’s to get something to get something
going we’ll use the console okay so I’ll
explain all this as we go along but the
console is going to see
um page has been loaded okay so let me
explain what’s happening here so it’s
basically whenever the document
loads or it’s ready
we want to run this function
and this is all of course this is
Javascript right so
what it is saying is the entire page
should load before whatever is inside of
this function here whatever isn’t this
function here will be executed and you
want this to happen the reason why you
want this to happen is because you want
to make sure that all the containers
load whatever the containers are they
load first
or else
jQuery will not be able to find that
container if it needs to manipulate the
container I’ll explain that even for you
as we go along so just stay tuned
okay so let’s execute what’s happening
here and I’ll explain again what’s
happening if we look at the inspector so
we go back to the page
we’re going to reload this nothing
happens but I’m going to open up the
inspector which is Ctrl shift I of
Chrome
and I’m gonna go to this section called
console I hope that you could see that
and as I click on Console you’ll notice
it says pH has been looted the fact that
this this is this says pH has been
looted means that whatever data was
stored in the HTML file
that has to loot completely first
before the function inside here is going
to Output page has been loaded so this
console.log is not jQuery but it’s it’s
part of JavaScript and basically it
allows you to output something to this
console here when you’re doing debugging
and that’s what’s happening here and we
need as I said we need this to occur we
need to put whatever our code is within
this ready function so to speak
so that
it actually is able to find the
placeholder in other words the
placeholder has to load first before you
could manipulate the police holder
itself all right and that’s what this
function is actually doing
so
if I were to I’ll give you the example
as we go along but let’s say we want to
manipulate this let’s say we want to
change hello world into something else
right
all we have to do is within this
function we do the same format here
dollar sign whatever it is so this is
usually a tag of some sort that we need
to use and in this case the tag will be
the class all right well in when I say
tag it’s actually the the CSS name
basically all right so you’ll see what I
mean here so a class usually has a dot
in front of it so let’s go dollar sign
Open brackets
make sure to put quotations
and you think that you could just type
in placeholder here to reference it but
that won’t work
you need to actually put whatever the
class name because this is a class you
have to put a period a dot in front of
it
and that’s telling it that’s basically
referencing
this div element here
okay so that’s what it does this this
part is referencing this element here
and now we could change what is inside
here
by calling the function
dot HTML and let’s see welcome
now if I save that as I said this whole
page is going to load in the browser
this function is going to wait until
this full page loads it has to load the
entire thing before it gets executed and
then it’s going to execute page has been
loaded onto the console and then it’s
going to change the text
of this div here let’s go it’s going to
happen really really fast
there we go see it’s really super fast
so it’s it makes you feel as though it’s
not happening in steps but it’s actually
happening in steps and there’s a reason
why and let me show you something so
let’s see
that we wanted to we we didn’t use the
ready function let’s say we didn’t use
the ready function let’s say we put this
this outside of this ready function
and let’s say we just we hide that okay
let’s see we said welcome first before
we looted the page
there’s a chance it may not happen
there we go notice it said hello world
which is the original
which is the original
um uh text in this container notice that
even though we call the placeholder
properly right which pointed to this
placeholder div element here and we
tried to change it it did not change and
as I said the reason is that you need to
wait you need to use this ready function
which loads the entire page freeze and
then manipulate whatever is in these uh
these containers
all right so I hope that that at least
explains how to uh you know how to begin
using uh jQuery super fast but I needed
to explain the ready function please in
order to do that
so let’s um this is not the only way
that you could actually reference this
uh placeholder for example let’s say
instead of a class you had an ID
so I’m going to remove this that this
part that doesn’t work okay and we’re
going to bring back in the the code that
actually works let’s say that this was
not a class but it was an ID instead
like that this code would not work
because it’s pointing to a class it’s
looking for a class that does not exist
anymore so if we reload here it’s going
to just say hello world again it’s not
going to work
if we go back into placeholder we know
based on CSS that in order to reference
an ID right an i an element by its ID we
need to put
the uh the number sign
okay so if I save that and then I go
back here
and reload is going to work so basically
it overwrote what was in hello world
using this
these functions you know this command
basically I’m going to call things
command functions you know it’s pretty
much the same thing at the end of the
day it doesn’t really matter as long as
you can get this really quickly to work
with it
uh is there anything else I need to show
you I think that is just the beginning
okay this is just a quick video as I
said of how to go about using jQuery and
I think we solved that problem of how to
go about using jQuery it does look a
little bit confusing but the more you
use it you’ll realize how wonderful
jQuery is and I don’t want to you know I
don’t want to say anything you know
negative about react whatever works for
you guys it works for you guys but to me
jQuery is so much faster so much easier
to use not faster in terms of speed
but it’s just so much easier to
implement something in jQuery especially
if you know what you’re doing as well in
fact you could sort of imitate a lot of
things that react does but we’ll go
along uh hopefully depending on if the
video is in demand then I’m going to
continue on so make sure to like
subscribe commenting as well let me know
if there’s a if if this is something
you’re interested in learning and I will
continue to create videos on jQuery
because I think it’s super awesome I use
it even up to no and um it’s been a
wonderful experience so far with that
being said thanks so much and I’ll see
you guys again soon
bye