2.1 Hello jQuery

Oh, I hope you're excited. Today is the first day of the rest of your life. Not really, not at all. But it will be the first day where you will realize how great and easy jQuery is to work with. So we're going to begin by installing jQuery, taking a look at some of the development tools we'll use. And then I'll give you a quick peek at how we can use CSS selectors that you likely already know to query what we refer to as the DOM. So, no more waiting. Let's get into it. To use jQuery, we have a couple of different options, and we'll take a look at both. First, we'll take a look at downloading the actual file. If we go over here to the right side, you'll see that we have two options, Production and Development. Now, for you at this stage, it doesn't really matter, but the basic difference is production code will be compressed, which means it will be impossible for you to read it. The development version, on the other hand, will contain all of the necessary code comments and spacing so that it's easy to filter through and learn from. Now, for production sites, and what I mean by that is sites that you will deploy and have live, you will always use the production version. And you'll see when it's minified and gzipped, it comes out to around 31k. But if we keep all the comments and spacing in, you'll see that it's a whopping 230k, and that's really too big. However, for development only, definitely use this version. That way, you can refer to it once you learn a little bit more. So I'm gonna click Development and choose Download jQuery. And you'll see that it takes us to this link, code.jquery.com, and the current version of jQuery. At the time of this writing, that's 1.7.1. So you can either copy and paste this into a new file,. Or you can right-click and choose Save As, and for now, we'll save it to the desktop as jQuery1.7.1. I'll click Save. There we are. Now we have the library ready to go. Next, I'm gonna create a new folder. I will call this lesson-1, and I'll drag in jQuery like so. Now we need to be using a code editor. I'm going to assume that you have some experience, again, with HTML and CSS, and you've already chosen a code editor. You can even use Notepad if you want. I wouldn't recommend it, but you can if that's what you want to do. Now personally, my favorite code editor is called Sublime Text. And what's nice about this is, though it's not free, you can use a trial version and it's available for Windows, Mac and Linux. And it's the best code editor I've ever used, so I highly recommend you take a look at it. All right, and the first step is, we'll create a new file, of course. I'm gonna call it index.html, and I'll paste in just some opening markup. You should be familiar with this at this point. If you're not, you might want to step back before you continue on. I need you to know a little HTML and a little CSS to move forward. The next step is, we are going to reference jQuery. We have a couple different options. First, we can reference it within the head of our document, jquery-1.7.1.js. However, if possible, try to place that at the bottom just before the closing body tag. And the reason why we do this is because of the way browsers load assets. The basic idea is, nothing can continue on until this script has been downloaded by the browser, more or less. Some browsers get around that now, and that's what we call downloading in parallel. However, if you place it at the bottom, you can load all of that CSS and HTML, and then you load jQuery at the bottom. And that way, it'll appear as if the page is loading more quickly. Okay, we're all set to go. We have jQuery set up. Now we need to call the jQuery function. For now, I'll place my script tag within the same page, and we can reference jQuery in two ways. First, we can use the long form. jQuery is a function. Now within here, we can pass what we call a selector. Actually, you can pass a lot of things, but for now, we'll take a look at using CSS selectors, and these are what you already are familiar with. For example, let's add a list item that says hello. Now, within your style sheet, you would target that list item likely by doing li color is red. Am I right? Or you might do ul li, but try not to be any more specific than you need to be. So, how would we do that with jQuery if we wanted to target the same thing? Well, we reference the jQuery function, and within it, we pass in the CSS selector. So just to give you a better understanding, let's keep it ul li. I can copy that exact CSS selector that you know and paste it into jQuery. So now we're saying, hey, jQuery, search the DOM. Now, DOM refers to Document Object Model. Don't let that confuse you. For now, just think of the DOM as a representation of your page essentially. So, right here, I'm saying, hey, jQuery. Use this CSS selector and find all list items. So, jQuery will jump into the DOM, and it's gonna look for every occurrence of the list item, like this one, and any other set it finds, and it will return them. So let's try this. We'll save that to a variable, and I'm going to assume again that you have a very modest understanding of JavaScript. And by that I mean at least read a couple chapters of a JavaScript book. Otherwise, you might have a little trouble following along, but we won't do anything too difficult. And I'm gonna save this to a variable called lis for list items. So let's see what we get in return, and a popular way to do that is through development tools. Most browsers these days have them built in. For example, Chrome, which is what we will be using, has developer tools available. I can right-click, choose Inspect Element, and you'll see that we have these awesome tools available to us. We can view a representation of the DOM. We can take a look at the resources that are being loaded. And we can also take a look at the console. And this is where errors will be logged, warnings, and anything that we would like to log as well. So for example, if I want to log these list items, I can say console. Notice that refers right here, and I want you to log list items. Let's come back. Open our file, lesson-1. And once again, if I open up Chrome Developer Tools, this time I'm going to View > Developer > Developer Tools. Alternatively on the Mac, I can press Cmd+Option+I. Now you'll see that jQuery did in fact fetch the list item from the DOM and saved it to the lis variable. To make sure this is working, once again let's copy a couple more. Come back, reload the page, and you'll see that we now have these available to us. So right off the bat, you can see how powerful this is. You don't need to learn anything new. You simply rely on the CSS selectors that you're already familiar with to query and manipulate the DOM. Now, before I move on to showing you the shorthand way for referencing the jQuery function, let's do something with this object. So, I will clear out the console, remove the variable, and we will fetch all list items, and adjust the CSS, and we'll make the color this time will be green. Let's try that out. Refresh and what do you know? The color is now green. If I wanna see the representation in the DOM, I will click on Elements, open up the ul, and you can see what jQuery's doing is it is appending a style attribute to each list item. Now, as a rule of thumb, sometimes you have to do this. For example, when the values will be calculated dynamically, you will have to reference methods like this. However, whenever possible, always try to keep the styling within your style sheet. That way, you have separation from your content, to your styling, to your logic. In this case, let's create a new class and we'll simply call it emphasis, something like that. And the color will be green there. Now, with jQuery, rather than editing the CSS for each DOM element, I will simply add a class. And to do that, we reference addClass. What is the class name? I'll simply copy that, like so, and place it in. Save it once again. I'm gonna come back, reload the page, and we get the exact same effect, but this time, we're not adding a style attribute to each list item. Instead, we're referencing a class. And that way, CSS can take care of the work. Now, the last thing that we're going to do today is, you'll find that it's far more common for people to reference jQuery via its shorthand, which will be a dollar sign. So, this is identical to this. The dollar sign is simply shorthand for referring to the jQuery object. So just to give you some assurance that they are the same, let me show you a different way to reference jQuery, as well as the reason why we can use jQuery and dollar sign interchangeably. If return to Google Chrome, we can also reference a variety of JavaScript libraries using what we call a CDN. And the basic idea behind this is Google CDN, in this example, they'll take care of the bandwidth. And because they can distribute to so many people, it's far more likely that the code will be cached on the user system, which means they don't have to redownload the jQuery file. Again, that makes your pages appear to load more quickly. So you'll find that its fairly common to use Google CDN when referencing the jQuery library. You can go to code.google.com/apis/libraries. And in this case, i need jQuery. And you'll see that we have two options here, the minified version and the development version. So I will copy that version, paste it in, and you'll see we get the exact same file. But now we're using a CDN. I'll return to Sublime Text, and this time, I'm going to replace our local copy with the CDN version. Now, the only downside to this is you may sometimes end up with issues where you don't have an Internet connection so this file is not working. And you also haven't saved a local copy, which means you can't test your jQuery. Maybe if you're in the car, or on the plane, so that's something to think about. But definitely for production purposes, it's a good idea to use a CDN distributive version of the minified file. Now, if we come back to that file. Not quite yet, but I want you to get in the habit of referring to this source file whenever you need to figure out how to use a particular method. Now, right now, it's probably too overwhelming, and that's okay. But if I scroll to the very bottom, you'll see right here, Expose jQuery to the global object. Now, window.jQuery is the exact same thing as referencing jQuery, so this is identical to this. So, what this line of code is saying is, get the jQuery and create an alias of sorts. Make it equal to a dollar sign, and both of those are going to reference the jQuery function right here. And that's why we can use jQuery or dollar sign interchangeably. Throughout this course now, I will be sticking with the second version. All right, that will do it for day one. Have some fun playing around with these techniques. See what's possible, and get ready for day two.