- Understand what jQuery is, and when to use it
- Learn how to include jQuery in your projects
- Understand how to apply jQuery selectors to manipulate DOM elements
- Add and remove DOM elements using jQuery
- Bind events with jQuery
jQuery is a 3rd-party library that is intended to make front-end development tasks — particularly those involving DOM selection and manipulation — easier, faster, and more fun.
A library is just a collection of reusable methods that serve a particular purpose.
- jQuery helps us manipulate the DOM, allowing us to perform complex manipulations in less code with less hassle
- jQuery's syntax was developed to mimic CSS selector syntax, making code easier to develop, read, and manage
- The syntax is shorter, and we're lazy! :)
- jQuery deals with many cross-browser compatibility issues for us
jQuery is a client side library, which means we need to include it in our HTML. To do this, we have two options:
Directly from jQuery's website (http://code.jquery.com/)
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
From a CDN (content delivery network) like CDNJS or Google Hosted Libraries
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
CDNJS, Google Hosted Libraries, and the jQuery site will all allow you to download a copy of jQuery to include in your projects.
If you look carefully at the filenames of the jQuery versions you download, or just look at the URL in the "src" attribute for each script tag above, you'll notice something at the end of each file name — namely, that they end in 'min.js'. This means the javascript code has been minified.
Yep. You did. Minification is the process of making a javascript file smaller by (among other things) removing all line breaks and whitespace, reducing the length of variable and function names, and stripping out all comments. Minification can significantly reduce the size of a javascript file, and in turn, significantly decrease the time it takes our browsers to load the file into memory.
In jQuery's 1.11.1's case, the original (unminified) code is about 276 kilobytes, whereas the minified code is only 94 kilobytes. That makes the minified version one-third the size of the original - not bad!
Minified scripts can be difficult to read, so most servers that host jQuery and other libraries will also offer the original (non-minified) version of the code so developers can understand the code.
Minification is performed on a javascript when it's ready for release and there are many options for doing this. If you'd like to minify your own scripts, try a google search to check out the various options. Or, you can try the Closure Compiler from Google which runs locally on your computer like any other piece of software you might use as a developer.
Also, if you do happen to come across a library where you can't find a non-minified version to look at, software also exists to decompress a minified script. These are usually called (unminifiers, pretty-printers, or beautifiers). They take a minified javascript and attempt to decompress it, making it easier to read and understand.
Even if you don't fully understand the code, it's a good exercise to visit code.jquery.com and take a look at minified and non-minified jQuery.
If you've visited code.jquery.com, you'll see that there are two major versions in development.
- The 1.x branch is the most cross-browser-compatible version of the jQuery core.
- The 2.x branch, while offering some new features, is not compatible with older web browsers — most notably, it's not compatible with Internet Explorer versions 8 and below.