Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now let's look at how to install jQuery. There's two ways that we can actually put them together. So let's go over what the two ways are first. One way is to call jQuery directly from a content distribution network. Content distribution network basically just means somewhere on the internet that is hosting jQuery for you. Generally, these are going to be websites that have much faster infrastructure than you have, so jQuery should download a lot faster. One other nice thing is that if you're using a CDN, other websites also use this method. So, your visitor might have gone to a website that uses that same copy of jQuery that you, yourself, are linking to.
Therefore your visitor's browser would already have cached that same copy. So when they visit your site, there might not be any need to download jQuery at all. You can also install your own copy, and you have to do this if you're working without an Internet connection. If you want to work with jQuery on your own machine, not connected to the Internet, this is the only way you can do it. Now the best way that you could work with this potentially is to use both at the same time. So, let's see how we can do that. So, here I am on jquery.com. There's a bright candy like button here to let me download a copy but also at the bottom of every page. Here's the quick access CDN method and this gives me a link to the Google CDN with the latest copy of jQuery 1, so you can copy this, but also let's look at the download area.
Here are the two versions of jQuery that you would be interested in. One is the compressed production version. If you're just going to grab jQuery and use it, without actually looking at the code, just get this one. If you want to open up jQuery and look at it, and see how it works, you can download the uncompressed development version. But I wouldn't recommend using that in a production environment, when you launch your website live. You'll want the tinier version that'll download faster. But as I say, we can combine these methods. So, after you've downloaded the file, here's how this will work. Here I have a stub HTML file and there's really nothing going on here except for this.
First, I'm calling up jQuery using that Google CDN. Adjust my script tag with the source attributes set to the right location. I've spelled out the HTTP here because when I'm just previewing files in my browser, like this, the protocol is file. This is not HTTP so when I'm using this, I can't use this initial double slash the way they have here. This only works when your file is actually on the internet and your browser can figure out whether to use HTTP or HTTPS, that is a non-secure or secure connection automatically, as appropriate.
They're sitting side-by-side in this folder. So, here my little script tag just calls for jQuery.win.js, right from the same location. So, what happens is, I load jQuery from the internet and then if it's defined, that is, if this actually works, then nothing else happens and I'm just using jQuery from the internet. But if that's not true, if this doesn't work for any reason and therefore the jQuery property of window. That is the global jQuery variable is not defined, then we use the local copy and jQuery will work. So when you want to install jQuery you can do it anyway that you want, but this way will give you what I think is the best of both worlds.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.