- [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.