WEBVTT 00:00:00.770 --> 00:00:02.612 - [Voiceover] Now I'm going to walk you through the basics 00:00:02.612 --> 00:00:05.722 of using jQuery in your web page. 00:00:05.722 --> 00:00:09.005 The first step is to actually include the jQuery library 00:00:09.005 --> 00:00:11.542 using a '<script>' tag 00:00:12.232 --> 00:00:16.122 Now before, we put JavaScript inside of our '' tag, 00:00:16.122 --> 00:00:20.276 but this time, I'm going to add a 'src' attribute. 00:00:20.276 --> 00:00:24.391 And I need to set that to a URL. 00:00:24.391 --> 00:00:26.566 What should that URL be? 00:00:26.566 --> 00:00:28.628 If I was working on my own computer 00:00:28.628 --> 00:00:30.093 and have downloaded jQuery 00:00:30.093 --> 00:00:32.525 into the same folder as my web page, 00:00:32.525 --> 00:00:36.473 I could just write 'jquery.js' here. 00:00:36.473 --> 00:00:39.408 But that won't work here on Khan Academy. 00:00:39.408 --> 00:00:43.096 Here, I need an absolute URL of jQuery 00:00:43.096 --> 00:00:45.885 on an online server somewhere. 00:00:45.885 --> 00:00:50.082 And there is a list of those URLs in jquery.com, 00:00:50.622 --> 00:00:52.738 and I have one of them here I'll just paste in. 00:00:52.738 --> 00:00:54.430 There we go. 00:00:54.430 --> 00:00:56.119 All right. Now I wanna point out a few things 00:00:56.119 --> 00:00:58.031 about this URL. 00:00:58.031 --> 00:01:01.820 The first thing is that it starts with 'https'. 00:01:01.820 --> 00:01:05.231 That means that it is a secure URL. 00:01:05.231 --> 00:01:09.231 We only allow you to bring in secure resources 00:01:09.231 --> 00:01:11.207 in Khan Academy web pages 00:01:11.207 --> 00:01:15.343 and that's generally a good practice in web development. 00:01:15.663 --> 00:01:18.862 Okay. The second thing is that this is located 00:01:18.862 --> 00:01:22.751 on a Google server: googleapis.com. 00:01:22.751 --> 00:01:25.385 This server is called a CDN, 00:01:25.385 --> 00:01:27.921 a content delivery network, 00:01:27.921 --> 00:01:29.406 which means that it's optimized 00:01:29.406 --> 00:01:32.625 for serving static files like JavaScript libraries 00:01:32.625 --> 00:01:35.388 and serving them very quickly. 00:01:35.388 --> 00:01:38.164 Now this Google server is one that I trust 00:01:38.164 --> 00:01:41.301 and generally, you should always trust the servers 00:01:41.301 --> 00:01:43.002 you bring scripts in from 00:01:43.002 --> 00:01:47.240 since they could potentially do nasty things to your page. 00:01:47.400 --> 00:01:50.013 Okay. The third thing is that there's a version number 00:01:50.013 --> 00:01:53.807 in this URL: 2.1.4. 00:01:53.807 --> 00:01:56.402 The jQuery library is in active development 00:01:56.402 --> 00:01:59.015 and they often release new versions. 00:01:59.015 --> 00:02:00.987 The numbers farther to the left 00:02:00.987 --> 00:02:03.279 represent major version changes 00:02:03.279 --> 00:02:05.755 versus the numbers farther to the right, 00:02:05.755 --> 00:02:08.134 which represent minor versions. 00:02:08.134 --> 00:02:10.353 I'm using jQuery 2 here, 00:02:10.353 --> 00:02:12.295 which works in modern browsers 00:02:12.295 --> 00:02:14.484 but doesn't work in IE8. 00:02:14.484 --> 00:02:15.635 On your own site, 00:02:15.635 --> 00:02:19.627 you can decide which version to use based on what you need. 00:02:19.627 --> 00:02:22.809 All right. So we have jQuery included. 00:02:22.809 --> 00:02:24.973 Now, let's actually use it 00:02:24.973 --> 00:02:28.266 inside another '<script>' tag. 00:02:30.226 --> 00:02:33.309 Every JavaScript library exposes functions 00:02:33.309 --> 00:02:35.358 and they give their functions names. 00:02:35.358 --> 00:02:37.010 We have to look in the documentation 00:02:37.010 --> 00:02:39.262 to find out what those function names are 00:02:39.262 --> 00:02:41.761 and what they actually do. 00:02:41.761 --> 00:02:45.444 Well the jQuery library exposes one main function 00:02:45.444 --> 00:02:47.524 and it has a very short name. 00:02:47.524 --> 00:02:50.637 It's just the dollar sign. 00:02:50.637 --> 00:02:52.259 That means that the first thing we write 00:02:52.259 --> 00:02:53.556 is dollar 00:02:53.556 --> 00:02:56.526 then two parenthesis, because it's a function, 00:02:56.526 --> 00:02:59.412 and of course, semicolon. 00:02:59.412 --> 00:03:01.928 Now it's nice that this function name is so short 00:03:01.928 --> 00:03:05.756 because we'd be calling that function an awful lot. 00:03:06.226 --> 00:03:08.928 There are lots of things we can pass to that function, 00:03:08.928 --> 00:03:10.300 but for this intro example, 00:03:10.300 --> 00:03:15.254 I'm just going to pass a string 'h1'. 00:03:16.319 --> 00:03:17.697 Now, when I've done this, 00:03:17.697 --> 00:03:19.724 this tells jQuery to find 00:03:19.724 --> 00:03:23.095 all of the 'h1' elements on the page 00:03:23.095 --> 00:03:28.050 and return them as a jQuery collection object. 00:03:28.150 --> 00:03:29.311 Now that I've done that, 00:03:29.311 --> 00:03:33.233 I can call other methods on the jQuery object 00:03:33.233 --> 00:03:37.200 in order to manipulate all the 'h1' elements that it found. 00:03:37.200 --> 00:03:39.939 Like if I want to change the inner text of all of them, 00:03:39.939 --> 00:03:43.356 I can call the 'text' function 00:03:43.356 --> 00:03:46.044 then pass it a string. 00:03:47.244 --> 00:03:48.492 It's happening. 00:03:48.492 --> 00:03:49.792 Yes! 00:03:49.792 --> 00:03:50.804 And we're done! 00:03:50.804 --> 00:03:53.029 That is our first bit of jQuery. 00:03:53.029 --> 00:03:56.910 So we included the jQuery library with the '' tag, 00:03:56.910 --> 00:03:59.819 told jQuery to find all the 'h1s' on the page, 00:03:59.819 --> 00:04:03.643 and then asked jQuery to change the text of all of them. 00:04:03.643 --> 00:04:06.332 If you keep going, we'll go through much more 00:04:06.332 --> 00:04:07.653 in more detail, 00:04:07.653 --> 00:04:11.117 more ways to select and manipulate elements, 00:04:11.117 --> 00:04:14.353 using jQuery to respond to user events on the page, 00:04:14.353 --> 00:04:18.558 plus fun stuff with animation and effects.