0:00:00.770,0:00:02.612
- [Voiceover] Now I'm going[br]to walk you through the basics

0:00:02.612,0:00:05.722
of using jQuery in your web page.

0:00:05.722,0:00:09.005
The first step is to actually[br]include the jQuery library

0:00:09.005,0:00:11.542
using a '<script>' tag

0:00:12.232,0:00:16.122
Now before, we put JavaScript[br]inside of our '' tag,

0:00:16.122,0:00:20.276
but this time, I'm going[br]to add a 'src' attribute.

0:00:20.276,0:00:24.391
And I need to set that to a URL.

0:00:24.391,0:00:26.566
What should that URL be?

0:00:26.566,0:00:28.628
If I was working on my own computer

0:00:28.628,0:00:30.093
and have downloaded jQuery

0:00:30.093,0:00:32.525
into the same folder as my web page,

0:00:32.525,0:00:36.473
I could just write 'jquery.js' here.

0:00:36.473,0:00:39.408
But that won't work here on Khan Academy.

0:00:39.408,0:00:43.096
Here, I need an absolute URL of jQuery

0:00:43.096,0:00:45.885
on an online server somewhere.

0:00:45.885,0:00:50.082
And there is a list of[br]those URLs in jquery.com,

0:00:50.622,0:00:52.738
and I have one of them[br]here I'll just paste in.

0:00:52.738,0:00:54.430
There we go.

0:00:54.430,0:00:56.119
All right. Now I wanna[br]point out a few things

0:00:56.119,0:00:58.031
about this URL.

0:00:58.031,0:01:01.820
The first thing is that[br]it starts with 'https'.

0:01:01.820,0:01:05.231
That means that it is a secure URL.

0:01:05.231,0:01:09.231
We only allow you to[br]bring in secure resources

0:01:09.231,0:01:11.207
in Khan Academy web pages

0:01:11.207,0:01:15.343
and that's generally a good[br]practice in web development.

0:01:15.663,0:01:18.862
Okay. The second thing[br]is that this is located

0:01:18.862,0:01:22.751
on a Google server: googleapis.com.

0:01:22.751,0:01:25.385
This server is called a CDN,

0:01:25.385,0:01:27.921
a content delivery network,

0:01:27.921,0:01:29.406
which means that it's optimized

0:01:29.406,0:01:32.625
for serving static files[br]like JavaScript libraries

0:01:32.625,0:01:35.388
and serving them very quickly.

0:01:35.388,0:01:38.164
Now this Google server is one that I trust

0:01:38.164,0:01:41.301
and generally, you should[br]always trust the servers

0:01:41.301,0:01:43.002
you bring scripts in from

0:01:43.002,0:01:47.240
since they could potentially[br]do nasty things to your page.

0:01:47.400,0:01:50.013
Okay. The third thing is[br]that there's a version number

0:01:50.013,0:01:53.807
in this URL: 2.1.4.

0:01:53.807,0:01:56.402
The jQuery library is[br]in active development

0:01:56.402,0:01:59.015
and they often release new versions.

0:01:59.015,0:02:00.987
The numbers farther to the left

0:02:00.987,0:02:03.279
represent major version changes

0:02:03.279,0:02:05.755
versus the numbers farther to the right,

0:02:05.755,0:02:08.134
which represent minor versions.

0:02:08.134,0:02:10.353
I'm using jQuery 2 here,

0:02:10.353,0:02:12.295
which works in modern browsers

0:02:12.295,0:02:14.484
but doesn't work in IE8.

0:02:14.484,0:02:15.635
On your own site,

0:02:15.635,0:02:19.627
you can decide which version[br]to use based on what you need.

0:02:19.627,0:02:22.809
All right. So we have jQuery included.

0:02:22.809,0:02:24.973
Now, let's actually use it

0:02:24.973,0:02:28.266
inside another '<script>' tag.

0:02:30.226,0:02:33.309
Every JavaScript library exposes functions

0:02:33.309,0:02:35.358
and they give their functions names.

0:02:35.358,0:02:37.010
We have to look in the documentation

0:02:37.010,0:02:39.262
to find out what those function names are

0:02:39.262,0:02:41.761
and what they actually do.

0:02:41.761,0:02:45.444
Well the jQuery library[br]exposes one main function

0:02:45.444,0:02:47.524
and it has a very short name.

0:02:47.524,0:02:50.637
It's just the dollar sign.

0:02:50.637,0:02:52.259
That means that the first thing we write

0:02:52.259,0:02:53.556
is dollar

0:02:53.556,0:02:56.526
then two parenthesis,[br]because it's a function,

0:02:56.526,0:02:59.412
and of course, semicolon.

0:02:59.412,0:03:01.928
Now it's nice that this[br]function name is so short

0:03:01.928,0:03:05.756
because we'd be calling[br]that function an awful lot.

0:03:06.226,0:03:08.928
There are lots of things we[br]can pass to that function,

0:03:08.928,0:03:10.300
but for this intro example,

0:03:10.300,0:03:15.254
I'm just going to pass a string 'h1'.

0:03:16.319,0:03:17.697
Now, when I've done this,

0:03:17.697,0:03:19.724
this tells jQuery to find

0:03:19.724,0:03:23.095
all of the 'h1' elements on the page

0:03:23.095,0:03:28.050
and return them as a[br]jQuery collection object.

0:03:28.150,0:03:29.311
Now that I've done that,

0:03:29.311,0:03:33.233
I can call other methods[br]on the jQuery object

0:03:33.233,0:03:37.200
in order to manipulate all the[br]'h1' elements that it found.

0:03:37.200,0:03:39.939
Like if I want to change the[br]inner text of all of them,

0:03:39.939,0:03:43.356
I can call the 'text' function

0:03:43.356,0:03:46.044
then pass it a string.

0:03:47.244,0:03:48.492
It's happening.

0:03:48.492,0:03:49.792
Yes!

0:03:49.792,0:03:50.804
And we're done!

0:03:50.804,0:03:53.029
That is our first bit of jQuery.

0:03:53.029,0:03:56.910
So we included the jQuery[br]library with the '' tag,

0:03:56.910,0:03:59.819
told jQuery to find all[br]the 'h1s' on the page,

0:03:59.819,0:04:03.643
and then asked jQuery to[br]change the text of all of them.

0:04:03.643,0:04:06.332
If you keep going, we'll[br]go through much more

0:04:06.332,0:04:07.653
in more detail,

0:04:07.653,0:04:11.117
more ways to select and[br]manipulate elements,

0:04:11.117,0:04:14.353
using jQuery to respond to[br]user events on the page,

0:04:14.353,0:04:18.558
plus fun stuff with animation and effects.