JQuery Introduction

JQuery Introduction:

  • JQuery is an easy to learn JavaScript library which makes JavaScript programming very easy.
  • JQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish and wraps them into methods that you can call with a single line of code.
  • JQuery also simplifies complicated tasks like AJAX calls and DOM manipulation.
  • jQuery will run exactly the same and produce same output in all major browsers
  • jQuery is free and very easy to include in your projects: just download its latest version from the jQuery website, or use an online Content Delivery Network
  • JQuery is continuously upgraded, maintained and documented by a dedicated community of great developers. This ensures high quality and support on the internet.

Following are the major features supported by jQuery

  •  HTML element selections
  •  HTML element / DOM manipulation
  •  CSS manipulation
  •  HTML event functions
  •  JavaScript Effects and animations
  •  HTML DOM traversal and modification
  • AJAX
  • Utilities

Install and Use jQuery Library

Two versions of jQuery are available for downloading:

  • Minified: ideal for using in a production environment.
  • Uncompressed (for debugging or reading).

Download the latest version of http://jquery.com/download/

jQuery Versions:

  • jQuery 1.11.1
  • jQuery 2.1.1:

Note: jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7, or 8.

Referencing jQuery in HTML Page:

            <script src=”jquery-<version>.js”/>

CDN (content delivery network):

Un-Obstructive JavaScript:

<button type=”button” onclick=”doSomething()” >Click Me</button>

In the above example structure and behavior are mixed.

Now consider the same example written using Un-obstructive JavaScript strategy:

Script code can go in head.

Structure code now does not contain any behavior

<button type=”button” id=”btnClickMe” >Click Me</button>

First jQuery Example:

jQuery Syntax:

The jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s).

jQuery uses a combination of XPath and CSS selector syntax.

Basic syntax is: $(selector).action()

  • A dollar sign to define jQuery
  • A selector to query (or find) HTML elements
  • A jQuery action() to be performed on the element(s)


  • $(this).hide() – hides current element
  • $(“p”).hide() – hides all paragraphs
  • $(“p.test”).hide() – hides all paragraphs with class=”test”
  • $(“#test”).hide() – hides the element with id=”test”

  The document ready function:

$(document).ready(function () {

// jQuery code goes here…


This is to prevent any jQuery code from running before the document is finished loading (is ready).

  • Trying to hide an element that doesn’t exist
  • Trying to get the size of an image that is not loaded

Avoid $() conflict:

“$” is the alias to jQuery functions but if “$” conflicts with other frameworks

var foo = jQuery.noConflict();

// now foo() is the jQuery main function



Almost every function returns jQuery, which provides a fluent programming interface and chainability:

$(“div”).show() .addClass(“main”) .html(“Hello jQuery”);

Please follow and like us:

Leave a Reply

Your email address will not be published. Required fields are marked *