1
00:00:00,770 --> 00:00:02,612
- [Voiceover] Now I'm going
to walk you through the basics

2
00:00:02,612 --> 00:00:05,722
of using jQuery in your web page.

3
00:00:05,722 --> 00:00:09,005
The first step is to actually
include the jQuery library

4
00:00:09,005 --> 00:00:11,542
using a '<script>' tag

5
00:00:12,232 --> 00:00:16,122
Now before, we put JavaScript
inside of our '' tag,

6
00:00:16,122 --> 00:00:20,276
but this time, I'm going
to add a 'src' attribute.

7
00:00:20,276 --> 00:00:24,391
And I need to set that to a URL.

8
00:00:24,391 --> 00:00:26,566
What should that URL be?

9
00:00:26,566 --> 00:00:28,628
If I was working on my own computer

10
00:00:28,628 --> 00:00:30,093
and have downloaded jQuery

11
00:00:30,093 --> 00:00:32,525
into the same folder as my web page,

12
00:00:32,525 --> 00:00:36,473
I could just write 'jquery.js' here.

13
00:00:36,473 --> 00:00:39,408
But that won't work here on Khan Academy.

14
00:00:39,408 --> 00:00:43,096
Here, I need an absolute URL of jQuery

15
00:00:43,096 --> 00:00:45,885
on an online server somewhere.

16
00:00:45,885 --> 00:00:50,082
And there is a list of
those URLs in jquery.com,

17
00:00:50,622 --> 00:00:52,738
and I have one of them
here I'll just paste in.

18
00:00:52,738 --> 00:00:54,430
There we go.

19
00:00:54,430 --> 00:00:56,119
All right. Now I wanna
point out a few things

20
00:00:56,119 --> 00:00:58,031
about this URL.

21
00:00:58,031 --> 00:01:01,820
The first thing is that
it starts with 'https'.

22
00:01:01,820 --> 00:01:05,231
That means that it is a secure URL.

23
00:01:05,231 --> 00:01:09,231
We only allow you to
bring in secure resources

24
00:01:09,231 --> 00:01:11,207
in Khan Academy web pages

25
00:01:11,207 --> 00:01:15,343
and that's generally a good
practice in web development.

26
00:01:15,663 --> 00:01:18,862
Okay. The second thing
is that this is located

27
00:01:18,862 --> 00:01:22,751
on a Google server: googleapis.com.

28
00:01:22,751 --> 00:01:25,385
This server is called a CDN,

29
00:01:25,385 --> 00:01:27,921
a content delivery network,

30
00:01:27,921 --> 00:01:29,406
which means that it's optimized

31
00:01:29,406 --> 00:01:32,625
for serving static files
like JavaScript libraries

32
00:01:32,625 --> 00:01:35,388
and serving them very quickly.

33
00:01:35,388 --> 00:01:38,164
Now this Google server is one that I trust

34
00:01:38,164 --> 00:01:41,301
and generally, you should
always trust the servers

35
00:01:41,301 --> 00:01:43,002
you bring scripts in from

36
00:01:43,002 --> 00:01:47,240
since they could potentially
do nasty things to your page.

37
00:01:47,400 --> 00:01:50,013
Okay. The third thing is
that there's a version number

38
00:01:50,013 --> 00:01:53,807
in this URL: 2.1.4.

39
00:01:53,807 --> 00:01:56,402
The jQuery library is
in active development

40
00:01:56,402 --> 00:01:59,015
and they often release new versions.

41
00:01:59,015 --> 00:02:00,987
The numbers farther to the left

42
00:02:00,987 --> 00:02:03,279
represent major version changes

43
00:02:03,279 --> 00:02:05,755
versus the numbers farther to the right,

44
00:02:05,755 --> 00:02:08,134
which represent minor versions.

45
00:02:08,134 --> 00:02:10,353
I'm using jQuery 2 here,

46
00:02:10,353 --> 00:02:12,295
which works in modern browsers

47
00:02:12,295 --> 00:02:14,484
but doesn't work in IE8.

48
00:02:14,484 --> 00:02:15,635
On your own site,

49
00:02:15,635 --> 00:02:19,627
you can decide which version
to use based on what you need.

50
00:02:19,627 --> 00:02:22,809
All right. So we have jQuery included.

51
00:02:22,809 --> 00:02:24,973
Now, let's actually use it

52
00:02:24,973 --> 00:02:28,266
inside another '<script>' tag.

53
00:02:30,226 --> 00:02:33,309
Every JavaScript library exposes functions

54
00:02:33,309 --> 00:02:35,358
and they give their functions names.

55
00:02:35,358 --> 00:02:37,010
We have to look in the documentation

56
00:02:37,010 --> 00:02:39,262
to find out what those function names are

57
00:02:39,262 --> 00:02:41,761
and what they actually do.

58
00:02:41,761 --> 00:02:45,444
Well the jQuery library
exposes one main function

59
00:02:45,444 --> 00:02:47,524
and it has a very short name.

60
00:02:47,524 --> 00:02:50,637
It's just the dollar sign.

61
00:02:50,637 --> 00:02:52,259
That means that the first thing we write

62
00:02:52,259 --> 00:02:53,556
is dollar

63
00:02:53,556 --> 00:02:56,526
then two parenthesis,
because it's a function,

64
00:02:56,526 --> 00:02:59,412
and of course, semicolon.

65
00:02:59,412 --> 00:03:01,928
Now it's nice that this
function name is so short

66
00:03:01,928 --> 00:03:05,756
because we'd be calling
that function an awful lot.

67
00:03:06,226 --> 00:03:08,928
There are lots of things we
can pass to that function,

68
00:03:08,928 --> 00:03:10,300
but for this intro example,

69
00:03:10,300 --> 00:03:15,254
I'm just going to pass a string 'h1'.

70
00:03:16,319 --> 00:03:17,697
Now, when I've done this,

71
00:03:17,697 --> 00:03:19,724
this tells jQuery to find

72
00:03:19,724 --> 00:03:23,095
all of the 'h1' elements on the page

73
00:03:23,095 --> 00:03:28,050
and return them as a
jQuery collection object.

74
00:03:28,150 --> 00:03:29,311
Now that I've done that,

75
00:03:29,311 --> 00:03:33,233
I can call other methods
on the jQuery object

76
00:03:33,233 --> 00:03:37,200
in order to manipulate all the
'h1' elements that it found.

77
00:03:37,200 --> 00:03:39,939
Like if I want to change the
inner text of all of them,

78
00:03:39,939 --> 00:03:43,356
I can call the 'text' function

79
00:03:43,356 --> 00:03:46,044
then pass it a string.

80
00:03:47,244 --> 00:03:48,492
It's happening.

81
00:03:48,492 --> 00:03:49,792
Yes!

82
00:03:49,792 --> 00:03:50,804
And we're done!

83
00:03:50,804 --> 00:03:53,029
That is our first bit of jQuery.

84
00:03:53,029 --> 00:03:56,910
So we included the jQuery
library with the '' tag,

85
00:03:56,910 --> 00:03:59,819
told jQuery to find all
the 'h1s' on the page,

86
00:03:59,819 --> 00:04:03,643
and then asked jQuery to
change the text of all of them.

87
00:04:03,643 --> 00:04:06,332
If you keep going, we'll
go through much more

88
00:04:06,332 --> 00:04:07,653
in more detail,

89
00:04:07,653 --> 00:04:11,117
more ways to select and
manipulate elements,

90
00:04:11,117 --> 00:04:14,353
using jQuery to respond to
user events on the page,

91
00:04:14,353 --> 00:04:18,558
plus fun stuff with animation and effects.