Learning jquery – Setting up a jQuery code environment
Today’s World Wide Web (WWW) is a dynamic environment and its users are very particular about styles and functionality. To build interesting and interactive websites, developers are turning to javascript libraries such as JQuery. Statistics shows jQuery is being used by 77.9% of all the websites.
Downloading jQuery
No installation is required. To use jQuery, we just need a publicly available copy of the file, no matter whether that copy is on an external site or our own.
http://jquery.com is the official jQuery website, will have up to date stable version of libraries, which can be downloaded from the home page of the site. Website comprises of both compressed and uncompressed version of library. For testing and developing you can use uncompressed version and for production you can replace with compressed version.
As jQuery’s popularity has grown, companies have made the file freely available through their Content Delivery Networks (CDNs). Most notably, Google (https://developers.google.com/speed/libraries/devguide), Microsoft
(http://www.asp.net/ajaxlibrary/cdn.ashx), and the jQuery project itself (http://code.jquery.com) offer the file on powerful, low-latency servers distributed around the world for fast download regardless of the user’s location.
While a CDN-hosted copy of jQuery has speed advantages due to server distribution and caching, using a local copy can be convenient during development.
Deciding the version of jQuery to use.
a) 1.X jQuery versions (1.11.x, 1.10.x, 1.9.x etc..)- Supports almost all browsers including old versions of Internet explorer(6,7 and 8).
b) 2.X jQuery versions no longer supports old versions of Internet Explorer (6, 7, and 8) in order to provide faster, cleaner support for more modern browsers.
Setting up jQuery in an HTML document
Download latest stable Jquery version library (v1.11.3 or v2.1.4 – latest when writing this article) and place it in your website folder and link the file using <script> tag.
eg: <script src=”jquery.js”></script>
jQuery library file can be linked to website in 2 places one is in <head> tag and another is just above closing body tag.
NOTE: Webpage with scripts at the bottom of the page loads faster and renders much faster.
The below code demonstrates script inclusion in webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Setting up jQuery in an HTML document</title>
<link rel="stylesheet" href="style.css">
<script src="jquery.js"></script>
</head>
<body>
<h1>Setting up jQuery in an HTML document</h1>
</body>
</html>
jQuery – CDN version
No JQuery download required, just replace the <script src="jquery.js"></script> with the following JQuery CDN
versions.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
OR
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
NOTE: Using CDN is prefered because as already discussed, nearly 77.9% websites are using JQuery, when we open these websites in our web browsers, our browsers will cache the CDN script, hence rest of jquery webpages / websites will load faster.
In our next article, we will learn about jQuery Selectors.
