jQuery Tutorial – A jQuery guide for beginners with examples

What is jQuery

jQuery is a JavaScript based library that makes using JavaScript much easier for your web based applications. The jQuery is fast, much easy to use, small in size – around 32Kb, and contains a lot of features.

Watch Short Video of this Tutorial

You have to write a lot of JavaScript code to accomplish tasks that jQuery enables you to write with much less code. Its aim is to write less do more.

jQuery is cross platform compatible, i.e. supported by many popular browsers like Chrome, Firefox, IE, Safari, and others.

jQuery makes it quite simple like HTML document traversal and manipulation, handling events (like clicking on links, mouse up, mouse down etc.), animations for your applications (like the slider, loader etc.) and Asynchronous JavaScript and XML (AJAX) operations with an easy to use API.

You can do many things or seen in different websites like cool jQuery sliders, slideshows, menus, fade in/fade out effects, beautiful dropdowns; just a few what can be done with jQuery.

There are many other JavaScript frameworks out there like Ext JS, Dojo etc. however, the jQuery is the most widely used and popular JavaScript framework.

This jQuery tutorial will take you through installing the jQuery, Syntax of jQuery, environment setup and working examples of jQuery in following chapters.

Perquisites to work with jQuery

Having knowledge of HTML, CSS, JavaScript will make it quite easy to learn jQuery. This does not mean to be expert in JavaScript, though. Experience with the programming language like PHP or other is a plus but not mandatory to learn jQuery.

A few running examples of jQuery

Example of jquery show/hide toggle() method

jquery fadeToggle () method

Toggle between slideDown() and slideUp() methods Example

slideDown method example

slideUp method example

Install/Setup jQuery

Installing or setting up jQuery to enable you working in your web applications is quite simple.

You just have to place or refer library file of jQuery in your HTML files to work with it. Below is how you can do it:

Download jQuery library

You can download the jQuery library from http://jquery.com/download/. It is recommended to download uncompressed file for the development machine and compressed file for production (where your site is hosted). See more for learning the difference between jquery.js and jquery.min.js.

After downloading and placing the uncompressed file to your development machine, place it at the same directory where your code files are. Then, you can use following code to include the jQuery library in your HTML file:

Refer from CDN network

CDNs (Content Delivery Networks) offers to include jQuery in your documents. You simply have to give URL of one of the available jQuery library from CDN.

Example:

jQuery CDN

http://code.jquery.com/jquery-3.2.1.min.js

http://code.jquery.com/jquery-migrate-3.0.0.min.js

Google CDN

http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

 

One of the benefits of using the CDN is, if another website is using CDN and loaded by the browser, your website will use the pre-loaded library from the cache.

This is how you will include the jQuery library in HTML file from a CDN:

IDE for jQuery

You may use any text editor like very basic windows notepad to start developing with jQuery. However, this can only be for basic learning or testing.

A few available jQuery IDEs are mentioned below:

Notepad for simple testing

phpDesigner 8 has also built-in support for the JavaScript and jQuery framework along with other JavaScript frameworks. However, this is paid IDE primarily for PHP.

You can also use Eclipse to develop jQuery based websites. Find appropriate plug-in for that.

Many other HTML and JavaScript editors are also available that can be for jQuery based websites.