Search within TutorialsPark

Jquery Basics


Learn how to setup Jquery and write your first Jquery Code


Jquery Basics : Setting up Jquery

Before we do anything, we need to add jquery to the document on which script will execute.

jQuery library can be downloaded from the official Jquery Website www.jquery.com ,it has the most latest version of Jquery, the jquery library has an extension of .js.

The Jquery Library file is attached to the document using the <script> tag

On the Jquery website there are two types of files, first is the uncompressed JavaScript Code, with file sizes of ~200KB, you can even see the code implementations.

The second type is a minimized version of the same code, with all the whitespace characters removed and variable names changed to single characters, making it impossible to read code, but this greatly reduces the file size(~30KB)

Though the minimized version is impossible to read or debug, since it is small in size it reduced the page load time as well as bandwidth.


Using a Content Distribution Network(CND) for Jquery Files

Often it is better to use Jquery from a content distribution network (CDN) than storing the Jquery library file on your own web server.

A Content Distribution Network(CDN) is a network of servers, it host the Jquery file (or any other file) and then delivers the file to the user via the server closest to the client's system.

The Advantage of CDN is that it reduces the page load time giving a faster user experience to the user.

Jquery is used on almost all popular websites, chances are that you browser's cache must be already having it from other websites, hence reducing page load times.

Jquery is Hosted on Google CDN, Microsoft CDN and Jquery Website free of cost, and are distributed around the world using their powerful low latency servers.

However, for application intended to be used offline or on intranet, the CDN approach must be avoided.


Note: Through out the website we will use latest version of Jquery hosted on Google CDN.

Using Jquery Library from Google, Microsoft and Jquery CDN

Syntax: Jquery Hosted on Google CDN and Microsoft CDN

Example: Jquery Files Hosted on Google CDN

Give it a TRY! » Note:Click on the button to toggle css styles.