Creating elements from scratch | Computer Programming | Khan Academy

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