10 Days – Learn JQuery become JQuery Pro

Our Reader Score
[Total: 0 Average: 0]
Learn jquery in 10 days

Hi, my name is Satinder Singh.  Here’s the tutorial “  Learn JQuery in 10 days “If you promise to give me thirty minutes a day, for an eleven day regularly, then I promise that you’ll come out the other side as a jQuery pro.


Jquery is the write less, do more JavaScript Library. It’s powerful features and ease of use have made it the most popular client-side JavaScript framework for the Web.

Jquery makes developer life easy, because using Jquery is easy to find the elements of a document, and then manipulate those elements by adding content, editing HTML attributes and CSS properties,  defining event handlers and performing animations. It also has Ajax utilities for dynamically making  HTTP requests and general-purpose utility functions for working with objects and arrays.

  1.  Jquery Basic
  2. Element Set and get
  3. Altering document structure
  4. Events
  5. Effect Animation
  6. Ajax
  7. Utility functions
  8. Selectors and selection method

#1- Basic of Jquery-

First you have to add Jquery to your web page .i.e HTML page.

Download jQuery from jQuery.com The jQuery Library is a single JavaScript file, and you reference it with the HTML <script> tag and that script tag should be inside the <head> tag.


Alternative to  downloading  you can include it from CDN. I use Google libraries Click Here.


The Jquery Library Defines a single global function named Jquery(). This function is so Frequently used that the library also defines the global symbol $ as a shortcut for it.
The jQuery() function (a.k.a. $()) is the most important one in the jQuery library.

When you pass a jQuery selector string to $(), it returns a jQuery object that represents the set of matched (or “selected”) elements. jQuery selectors are very much like the CSS selectors you use in stylesheets.



Live Demo


First we write this piece of code, which ensure that the document is ready for manipuulation. ie it prevent any jQuery code running before the document is finished loading.

Example 1:  Display  “Hello world” alert message on click of a div

Example 2 : Change background-color of a element

Complete Full Code:

Hope you enjoyed this tutorial. See you again next time!

Get your Printable Copy