jQuery Tutorial

Basic

Effects

This tutorial is designed to guide you to learn jQuery from the scratch. jQuery is a JavaScript library that has simplified JavaScript programming. It has also contributed towards simplification of HTML document traversing, event handling, animation and AJAX interaction etc.

This tutorial aims to cover all the topics about jQuery providing wide range of examples, for easy and fast understanding.

Why do we need to learn jQuery?

Web technology is becoming essential sustain in the digital era. Hence the demand for jobs for this platform is also booming. Especially it is useful when you work with:

WordPress or similar content management system
Any legacy code which depends on jQuery
App or browser which targets on old browsers

jQuery come very handy. Hence it makes development, cost-effective, as this library comes free. It is light and small in size and hence server response time gets reduced. It can be integrated with visual studio IDE easily which enable us to update libraries, tools for visual studio projects that use .net framework. Hence it has been popular among .net developers.

Hence, if you are planning to build your career with web technology (especially useful for front-end development) which is high in demand nowadays in IT industry, definitely learning jQuery will add to your skill.

Applications of jQuery

jQuery is a lightweight JavaScript library which is included just in a single .js file. Yet it provides many built-in functions which enable the tasks to be accomplished easily and quickly. It is suitable:

To develop Ajax-based applications.
To make, creating special effects on the web, simple and fast, by means of various plugins that are available with jQuery.
To enrich the site with responsive and featured behavior to make the site interactive, attractive and user-friendly using its built-in animation effects.
To get cross-browser support for web applications
To develop SEO (Search engine optimized) sites.
To work with content management systems such as WordPress.
To have easy client-side scripting of HTML
To achieve fast loading webpage design

Example

Here is small example which illustrates about using jQuery with HTML:

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").click(function(){ alert("Click event is called."); }); }); </script> </head> <body> <p>Click here.</p> </body> </html>

Output:

Screen1: When the page is loaded.

Screen2: The session’Click here’ is clicked.

Prerequisites

jQuery is easy to learn. Yet it is advisable to get some know-what about HTML, CSS and Document object model(DOM) to speed up the learning. Having knowledge about JavaScript programming and the use of any text editor, knowing about how internet and web applications work- is an additional advantage. Try out developing some sample projects to get some hands-on experience. It will make your learning jQuery easy and fast.

Target Audience

This tutorial is designed for beginners as well as for professionals. If you are a beginner, you can start your learning from scratch. If you are professional and looking for additional information about jQuery in-depth, you have reached at the right place!