Introduction to jQuery

Quick reference

• 00:05 We've learned a whole lot of JavaScript throughout this course and
• 00:07 we're not done with JavaScript yet.
• 00:09 But before we move into the next topic,
• 00:10 I wanna spend just a few minutes talking about jQuery.
• 00:13 So, since we've been talking about web sitey type things, DOMs, nodes,
• 00:18 forms, things like that.
• 00:19 I thought it would be a good time to mention jQuery and
• 00:21 I'm not gonna actually teach you any jQuery in this course or
• 00:24 even in this video, I'm just going to discuss it a little bit.
• 00:27 May be we look at a couple of quick examples.
• 00:29 Just to give you an idea of what it looks like.
• 00:31 You've probably heard the name jQuery before.
• 00:33 What is it?
• 00:34 Basically, jQuery is a library.
• 00:36 It makes it easier to use JavaScript on your website and
• 00:39 it takes common tasks that might take a bunch of lines of code and it sort of
• 00:43 wraps those into methods that you can then call with just one line of code.
• 00:47 So jQuery does a lot of tricky DOM things, for instance.
• 00:50 And so if you get tired of writing all those DOM get element by ID things and
• 00:54 all that stuff, jQuery might be exactly what you're looking for.
• 00:59 Like said, jQuery lets us do DOM, it also lets us do CSS manipulation,
• 01:03 it lets us play with events.
• 01:05 It does Ajax and
• 01:06 we're gonna talk about Ajax next but it just does a whole lot of cool stuff.
• 01:10 And it also has a bunch of plugins that you can use for just about anything.
• 01:14 There's a lot of JavaScript libraries out there, but
• 01:16 jQuery is definitely the most popular one.
• 01:18 So how do we use jQuery?
• 01:19 Well, like I said, it's a library, so we need to actually download it.
• 01:22 And you can download it for free at JQuery.com.
• 01:25 In fact, if we just go to JQuery.com real quick, we can see,
• 01:29 we just click here to download it.
• 01:31 And I'm gonna download the uncompressed version, save it to my desktop,
• 01:37 and here it is.
• 01:37 I can actually grab it and
• 01:41 drag it into our system here and here we have it.
• 01:45 If we open it, this is jQuery.
• 01:47 This is the whole library.
• 01:48 You can look through there if you want.
• 01:49 It's kinda complicated, but it's sort of readable.
• 01:52 Now, if we actually wanna use this on our page,
• 01:54 we just go up to our head document here and slap in this.
• 01:57 Actually, take off the min, we just slap in a reference to this file right here and
• 02:02 now we can use it.
• 02:04 So that's one way to do it.
• 02:05 You don't even actually have to download it like we just did.
• 02:08 You can reference it on a third party CDN and the same way you'd just type
• 02:13 in a script but instead of it pointing to this file locally,
• 02:17 it points to this googleapis.com and it's the same jquery.js file.
• 02:22 Well, mine has some numbers on it, but it's the same file, basically.
• 02:25 So those are two ways to do it.
• 02:26 And now, once that's all it is.
• 02:28 That's all you have to do to install it.
• 02:29 Very easy.
• 02:30 So with jQuery, you basically select or query an HTML element,
• 02:35 and then you perform some action on it.
• 02:37 And we're very familiar with this already with our DOM stuff, so we've already,
• 02:42 we've been doing this for quite a while now.
• 02:44 And so, jQuery, it looks like this.
• 02:47 We can come down here.
• 02:48 And we've been playing around with our p element,
• 02:50 might as well try it again here.
• 02:51 So we could do the selector.
• 02:53 selector is quotation marks p.
• 02:57 All right, and now here is an action.
• 02:58 What action do we wanna do?
• 03:00 Well, let's hide it.
• 03:01 We wanna get rid of it, right?
• 03:02 So if we save this, actually lets slap a semi colon on there for good measure.
• 03:07 If we save this, here's our p up here but if we hit reload boom, disappears.
• 03:11 Just like that, one simple line of code and we've gotten rid of our p.
• 03:15 Think back what it would have taken us to do with DOM in
• 03:19 past videos when we wanted to remove something.
• 03:21 Not as simple as this.
• 03:22 So that's sort of the point of jQuery.
• 03:24 It makes normal JavaScript stuff just quicker and easier to do.
• 03:28 So you may be asking yourself,
• 03:29 why have I been learning the JavaScript if this jQuery stuff is so much easier?
• 03:32 Well, you need to know the thing before you can learn how to make
• 03:36 the thing quicker, right.
• 03:37 So you need to know JavaScript, the basic fundamentals before you can learn sort of
• 03:41 how to make JavaScript quicker.
• 03:42 And like I said, there's still a ton of things that we would
• 03:45 always just do with regular JavaScript.
• 03:47 There's just some things that jQuery sort of speeds up and makes it easier and
• 03:51 quicker to do.
• 03:51 So, that is just a very basic example of jQuery, sort of peak your curiosity.
• 03:55 If you're interested in front end web development,
• 03:57 jQuery is definitely something cool you' might wanna learn.
• 04:00 And that's pretty much all we're gonna talk about as far as jQuery.
• 04:02 In the next video, I wanna start talking about Ajax which is very cool.

Lesson notes are only available for subscribers.