- [Voiceover] Now I'm going
to walk you through the basics
of using jQuery in your web page.
The first step is to actually
include the jQuery library
using a '<script>' tag
Now before, we put JavaScript
inside of our '' tag,
but this time, I'm going
to add a 'src' attribute.
And I need to set that to a URL.
What should that URL be?
If I was working on my own computer
and have downloaded jQuery
into the same folder as my web page,
I could just write 'jquery.js' here.
But that won't work here on Khan Academy.
Here, I need an absolute URL of jQuery
on an online server somewhere.
And there is a list of
those URLs in jquery.com,
and I have one of them
here I'll just paste in.
There we go.
All right. Now I wanna
point out a few things
about this URL.
The first thing is that
it starts with 'https'.
That means that it is a secure URL.
We only allow you to
bring in secure resources
in Khan Academy web pages
and that's generally a good
practice in web development.
Okay. The second thing
is that this is located
on a Google server: googleapis.com.
This server is called a CDN,
a content delivery network,
which means that it's optimized
for serving static files
like JavaScript libraries
and serving them very quickly.
Now this Google server is one that I trust
and generally, you should
always trust the servers
you bring scripts in from
since they could potentially
do nasty things to your page.
Okay. The third thing is
that there's a version number
in this URL: 2.1.4.
The jQuery library is
in active development
and they often release new versions.
The numbers farther to the left
represent major version changes
versus the numbers farther to the right,
which represent minor versions.
I'm using jQuery 2 here,
which works in modern browsers
but doesn't work in IE8.
On your own site,
you can decide which version
to use based on what you need.
All right. So we have jQuery included.
Now, let's actually use it
inside another '<script>' tag.
Every JavaScript library exposes functions
and they give their functions names.
We have to look in the documentation
to find out what those function names are
and what they actually do.
Well the jQuery library
exposes one main function
and it has a very short name.
It's just the dollar sign.
That means that the first thing we write
is dollar
then two parenthesis,
because it's a function,
and of course, semicolon.
Now it's nice that this
function name is so short
because we'd be calling
that function an awful lot.
There are lots of things we
can pass to that function,
but for this intro example,
I'm just going to pass a string 'h1'.
Now, when I've done this,
this tells jQuery to find
all of the 'h1' elements on the page
and return them as a
jQuery collection object.
Now that I've done that,
I can call other methods
on the jQuery object
in order to manipulate all the
'h1' elements that it found.
Like if I want to change the
inner text of all of them,
I can call the 'text' function
then pass it a string.
It's happening.
Yes!
And we're done!
That is our first bit of jQuery.
So we included the jQuery
library with the '' tag,
told jQuery to find all
the 'h1s' on the page,
and then asked jQuery to
change the text of all of them.
If you keep going, we'll
go through much more
in more detail,
more ways to select and
manipulate elements,
using jQuery to respond to
user events on the page,
plus fun stuff with animation and effects.