Setting up jQuery (Must know)
This first section will describe how to download and include jQuery in a web page and a good rule of thumb to choose between the two major jQuery branches, 1.X and 2.X, depending on the browsers you need to support. In addition, we'll discuss the benefits of using a Content Delivery Network (CDN) rather than hosting a local version of the library.
Getting ready
Before we start, we need to download the jQuery library. To do that, simply visit http://jquery.com/download/ and get the latest version of the 1.X branch. At the time of writing, the last release is 1.10.1. The name of the file typically has the form jquery-VERSION.js, so your downloaded file should be named as jquery-1.10.1.js.
Now, open your favorite text editor or IDE and let's type some markup. If you don't know what to choose, a simple text editor should be enough. On Windows, a good and free one is Notepad++, on Linux you can use gEdit or Nano, and on Mac you can use Sublime Text.
How to do it...
To set up your first web page that uses jQuery, perform the following steps:
Create a folder and name it as you prefer, for example
code.Create an HTML file inside it and name it
template.html. Then, put the previously downloaded jQuery library,jquery-1.10.1.js, into thecodefolder too.Now, we need to write a basic template that we'll use throughout the rest of the book. So, open the
template.htmlfile with your editor of choice and write the following code:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Instant jQuery Selectors</title> </head> <body> </body> </html>Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
With the template in place, we need to include jQuery. To do that, simply add the highlighted line wherever you want inside the
<head>tag. I'll put it just after the<title>:... <title>Instant jQuery Selectors How-to</title> <script src="jquery-1.10.1.js"></script> </head> ...Save the file.
There's more...
Although simple, the previous steps give us several points to discuss.
What version to use?
As I said, at the time of writing, jQuery has two major branches under development from which to choose. What version to pick really depends on where you're using the framework and what browsers you intend to support.
jQuery 1.X supports all of the versions of Chrome, Firefox, Safari, Opera, and Internet Explorer starting from version 6. The new version, instead, dropped the support for Internet Explorer 6, 7, and 8 in exchange for a smaller size and better performance. This means that if you see a web page that relies on jQuery 2.X using Internet Explorer 8, the script will fail.
So, what version should you use? Here are some use cases:
In case you're developing a website where you need to target an audience as wide as possible (for example, an institutional website), you should use version 1.X.
If you're developing a website that doesn't need to support older versions of Internet Explorer (for example, if it runs in a controlled environment such as, a company local network), you can use jQuery 2.X.
If you're developing a mobile app using PhoneGap, or similar frameworks, you don't need to support Internet Explorer 6 to 8. So, you can safely use jQuery 2.X.
Note
Based on the StatCounter June 2013 statistics (http://gs.statcounter.com/#browser_version_partially_combined-ww-monthly-201306-201306-bar), Internet Explorer 6 has a market share of approximately 0.3 percent, IE7 has approximately 0.5 percent, and IE8 has approximately 8 percent. So, before choosing your jQuery version, think twice about your targeted audience.
Compressed or not?
On the jQuery website you could note that for each release (for example, 1.10.1) there is also a compressed (sometimes called "minified") version. The difference between the normal and the minified versions is that the former is intended for the development stage, while the latter for the production stage. In fact, the compressed version not only removes the useless spaces but also shrinks variables' name making it hard to read and debug your code that relies on the library. On the other hand, the advantage of a compressed library is the reduction in size of the script that leads to bandwidth savings for the end users.
Using a CDN
In the previous steps, we've included a local hosted copy of the library, but we can also rely on Content Delivery Network (CDN). A CDN is a distributed system of servers created to serve contents to end users with high availability and performance at a great speed. So, using a CDN to load jQuery, we can speed up the loading process because being on a different host, the loading parallelism increases, and since a lot of websites use CDNs, there's a higher probability that the required framework version is already in the user's browser cache. There are several CDNs you can use but the most famous ones are the jQuery CDN (http://code.jquery.com) and the Google CDN (https://developers.google.com/speed/libraries/devguide).
For example, using the jQuery CDN to include the same version seen before, you can write the following code:
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
If you want to include the compressed version instead, you should write the following code:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
Now that you know how to use a CDN, there's a fact you should be aware of. On the Internet, no server or network has a 100 percent uptime. This means that in some situations, although rather rare, a CDN network can be down or not accessible. If this happens, your website's code that relies on the framework will stop working. To avoid this issue, there's a smart solution you can learn and use, also adopted by the people behind HTML5 boilerplate (http://html5boilerplate.com). The idea is to request a copy of the framework from a CDN and check if it has been loaded and test whether the jQuery property of the window object is defined. If the test fails, a code that will load a local hosted copy is injected. The reason for the test is that once loaded, jQuery adds the jQuery property mentioned that exposes all of the framework's methods. Moreover, the library adds an additional property that is a reference to the jQuery property called $, acting as a shortcut. They are exactly the same object as you can see in the following code taken from the jQuery source:
// Expose jQuery to the global object window.jQuery = window.$ = jQuery;
In conclusion, since the local copy is in a folder called js, the following code implements this idea:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.1.min.js"><\/script>')</script>As a final note, I want to highlight that using a CDN in a page that doesn't run on a web server could cause an error on some browsers.
